Merge branch 'master' of github.com:Rayquaza01/changelogger

Rayquaza01 · Oct 29, 2019 · 4986273 · 4986273
2 parents 0f9a416 + eb1dcdc
commit 4986273
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 23 deletions.
diff --git a/extension/options.css b/extension/options.css
@@ -0,0 +1,53 @@
+:root {
+    --body-background-color: #ffffff;
+    --item-border-color: #000000;
+    --font-color: #000000;
+    --link-color: #000000;
+    --input-color: #1e88e5;
+    --input-text-color: #ffffff;
+}
+
+[data-theme="dark"] {
+    --body-background-color: #292929;
+    --item-border-color: #757575;
+    --font-color: #ffffff;
+    --link-color: #ffffff;
+    --input-color: #1e88e5;
+    --input-text-color: #ffffff;
+}
+
+body {
+    background-color: var(--body-background-color);
+    color: var(--font-color);
+    font-family: sans-serif;
+    font-size: 10px;
+}
+
+select,
+input {
+    width: 15%;
+    padding: 5px 5px;
+    border: none;
+    background-color: var(--input-color);
+    color: var(--input-text-color);
+}
+
+div {
+    border: 1px solid var(--item-border-color);
+    margin: 5px;
+    padding: 5px;
+}
+
+a {
+    color: var(--link-color);
+    text-decoration: none;
+}
+
+h1 {
+    margin: 5px;
+}
+
+h3 {
+    text-align: center;
+    color: var(--font-color);
+}
diff --git a/extension/options.html b/extension/options.html
@@ -2,30 +2,41 @@
 <html>
     <head>
         <meta charset="utf-8" />
+        <link rel="stylesheet" type="text/css" href="options.css" />
     </head>
     <body>
-        <h1>Badge</h1>
-        <select id="badge">
-            <option value="true">True</option>
-            <option value="false">False</option>
-        </select>
-        <h1>Notification</h1>
-        <select id="notification">
-            <option value="true">True</option>
-            <option value="false">False</option>
-        </select>
-        <h1>Max</h1>
-        <input type="number" id="max" min="1" />
-        <h1>Theme</h1>
-        <select id="theme">
-            <option value="light">Light</option>
-            <option value="dark">Dark</option>
-        </select>
-        <h1>Ignore Updates Without Changelogs</h1>
-        <select id="ignore_no_changelogs">
-            <option value="true">True</option>
-            <option value="false">False</option>
-        </select>
+        <div>
+            <h1>Badge</h1>
+            <select id="badge">
+                <option value="true">True</option>
+                <option value="false">False</option>
+            </select>
+        </div>
+        <div>
+            <h1>Notification</h1>
+            <select id="notification">
+                <option value="true">True</option>
+                <option value="false">False</option>
+            </select>
+        </div>
+        <div>
+            <h1>Max</h1>
+            <input type="number" id="max" min="1" />
+        </div>
+        <div>
+            <h1>Theme</h1>
+            <select id="theme">
+                <option value="light">Light</option>
+                <option value="dark">Dark</option>
+            </select>
+        </div>
+        <div>
+            <h1>Ignore Updates Without Changelogs</h1>
+            <select id="ignore_no_changelogs">
+                <option value="true">True</option>
+                <option value="false">False</option>
+            </select>
+        </div>
         <h3><a href="docs/help.html" target="_blank">Help</a></h3>
         <script src="options.js"></script>
     </body>

diff --git a/extension/options.js b/extension/options.js
@@ -6,6 +6,9 @@ const ignore_no_changelogs = document.getElementById("ignore_no_changelogs");
 
 async function load() {
     const res = await browser.storage.local.get("options");
+    if (res.options.theme === "dark") {
+        document.documentElement.dataset.theme = "dark";
+    }
     badge.value = res.options.badge;
     notification.value = res.options.notification;
     max.value = res.options.max;
@@ -14,7 +17,7 @@ async function load() {
 }
 
 async function save() {
-    browser.storage.local.set({
+    await browser.storage.local.set({
         options: {
             badge: JSON.parse(badge.value),
             notification: JSON.parse(notification.value),
@@ -23,6 +26,7 @@ async function save() {
             ignore_no_changelogs: JSON.parse(ignore_no_changelogs.value)
         }
     });
+    document.documentElement.dataset.theme = theme.value;
 }
 
 document.addEventListener("DOMContentLoaded", load);