fix dark theme

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

index fa89f3ebd0bd16c6e62b29c79e94a561650eb698..479e13bf4bf1b8f6c9647bd401e1f66e221b0fe1 100644 (file)
--- a/popup.html
+++ b/popup.html
@@ -1,20 +1,40 @@
-<!-- Written by Mike Frysinger <vapier@gmail.com>.  Released into the public domain.  Suck it. -->
+<!-- Written by Mike Frysinger <vapier@gmail.com>.  Released into the public domain. -->
  <!doctype html>
  <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 {
-       margin: 0px;
+       background-color: var(--body-color);
+       filter: var(--body-filter);
+       margin: 1px;
         padding: 0px;
+       font-family: Arial, sans-serif;
+       font-size: smaller;
  }
  td {
         white-space: nowrap;