add dark/light themes

[chrome-ext/web-power-switch.git] / popup.html
diff --git a/popup.html b/popup.html

index 7ea22fe9daaf8d34b2d72ed3d567d64b08835d11..b8abe51010e0121290b8d49fdfd1afbb171e3865 100644 (file)
--- a/popup.html
+++ b/popup.html
@@ -5,15 +5,32 @@
  <head>
  <meta charset='utf-8'/>
  <title>Web Power Switch Manager</title>
+
+<link rel='stylesheet' href='css/dark.css' media='(prefers-color-scheme: dark)'/>
+<link rel='stylesheet' href='css/light.css' media='(prefers-color-scheme: light), (prefers-color-scheme: no-preference)'/>
+<!-- Load theme override asap to help with initial loading/flashing. -->
+<link rel='stylesheet' href='' id='theme-override'/>
+<script src='theme-init.js'></script>
+
  <script src='common.js'></script>
  <script src='popup.js'></script>
  <style>
+button[name="theme"]::before {
+       content: var(--theme-text);
+       font-size: smaller;
+       font-weight: bold;
+}
+button[name="theme"] {
+       float: right;
+}
  table#buttons {
         margin: 0px;
         padding: 0px;
         border-collapse: collapse;
  }
  body {
+       background-color: var(--body-color);
+       filter: var(--body-filter);
         margin: 1px;
         padding: 0px;
         font-family: Arial, sans-serif;