fix dark theme

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

index 9973ec8d07ecf9bfb74354ba965421eac24922a0..479e13bf4bf1b8f6c9647bd401e1f66e221b0fe1 100644 (file)
--- a/popup.html
+++ b/popup.html
@@ -3,16 +3,34 @@
  <html>
  
  <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;
@@ -25,12 +43,6 @@ div#status {
         white-space: nowrap;
  }
  </style>
-<style media='(prefers-color-scheme: dark)'>
-html {
-       background-color: black;
-       filter: invert(1);
-}
-</style>
  </head>
  
  <body>