feat: add dark theme to the add-on settings

teddy-gustiaux · Apr 16, 2019 · 8a6c001 · 8a6c001
1 parent f1be2ed
commit 8a6c001
Show file tree

Hide file tree

Showing 6 changed files with 196 additions and 21 deletions.
diff --git a/src/globals.js b/src/globals.js
@@ -7,6 +7,7 @@
  */
 
 // List of stored options keys
+const THEME = 'theme';
 const RELEASE = 'release';
 const BUILTIN = 'builtin';
 const ALLTABS = 'alltabs';
@@ -16,6 +17,7 @@ const NEW_RELEASE = 'newRelease';
 const NOTIFICATION = 'updateNotification';
 const TAB = 'tab';
 // List of stored options properties
+const DARK_THEME_ENABLED = 'darkThemeEnabled';
 const OPEN_NOTES = 'openNotes';
 const FOLDER = 'folder';
 const TOP = 'top';

diff --git a/src/options/css/custom.css b/src/options/css/custom.css
@@ -1,51 +1,183 @@
+:root {
+    --primary-color: #3273dc;
+    --font-color: #4a4a4a;
+    --font-color-focus: #363636;
+    --bg-color: #fff;
+    --bg-color-alternate: #f5f5f5;
+    --bg-color-notification: var(--bg-color-alternate);
+    --bg-color-notification-global:  var(--bg-color-alternate);
+    --bg-color-box:  var(--bg-color);
+    --theme-switch-color: #ffa7c4;
+}
+
+[data-theme="dark"] {
+    --primary-color: #209cee;
+    --font-color: #fff;
+    --font-color-focus: #f3f3f3;
+    --bg-color: #2d2d2d;
+    --bg-color-alternate: #4a4a4a;
+    --bg-color-notification: var(--bg-color-alternate);
+    --bg-color-notification-global:  var(--bg-color-alternate);
+    --bg-color-box:  var(--bg-alternate);
+    --theme-switch-color: #ffa7c4;
+}
+
+html {
+    background-color: var(--bg-color);
+}
+
 body {
-  padding: 2rem;
-  font-family: "Open Sans", sans-serif;
+    padding: 2rem;
+    font-family: "Open Sans", sans-serif;
+    color: var(--font-color);
+}
+
+strong {
+    color: var(--font-color);
+}
+
+a:hover {
+    color: var(--font-color-focus);
+}
+
+.title {
+    color: var(--font-color-focus);
+}
+
+.subtitle {
+    color: var(--font-color);
+}
+
+.notification {
+    background-color: var(--bg-color-notification);
+}
+
+.notification.notification-global {
+    background-color: var(--bg-color-notification-global);
 }
 
 #tab_container .container_item {
-  display: none;
+    display: none;
 }
 
 #tab_container .container_item.is-active {
-  display: block;
+    display: block;
+}
+
+.box {
+    background-color: var(--bg-color-box);
+    color: var(--font-color);
 }
 
 .field, article {
-  margin-top: 1.5em;
+    margin-top: 1.5em;
 }
 
 .modal-card-body p {
-  margin-top: 2em;
+    margin-top: 2em;
 }
 
 .divider {
-  margin-top: 2em;
-  margin-bottom: 2em;
+    margin-top: 2em;
+    margin-bottom: 2em;
+}
+
+.label {
+    color: var(--font-color-focus);
 }
 
 .select-label {
-  display: block;
-  margin-bottom: 0.5em;
+    display: block;
+    margin-bottom: 0.5em;
 }
 
 .disabled-item {
-  opacity: 0.65;
+    opacity: 0.65;
 }
 
 .tabs.is-small-medium{
-  font-size: 1rem
+    font-size: 1rem
+}
+
+.tabs a {
+    color: var(--font-color);
+}
+
+.tabs.is-boxed li.is-active a {
+    background-color: var(--bg-color);
+    color: var(--primary-color);
+}
+
+.tabs.is-boxed a {
+    color: var(--font-color);
+}
+
+.tabs.is-boxed a:hover {
+    background-color: var(--bg-color-alternate);
+    color: var(--font-color);
 }
 
 .tab-icon {
-  font-size: 1.4rem;
-  margin-right: 0.2em !important;
+    font-size: 1.4rem;
+    margin-right: 0.2em !important;
 }
 
 .release-info {
-  margin-right: 0.8rem;
+    margin-right: 0.8rem;
 }
 
 .release-info:after {
-  content: "\00A0\2197";
+    content: "\00A0\2197";
+}
+
+.select select {
+    background-color: var(--bg-color);
+    color: var(--font-color);
+}
+
+.select select[disabled] {
+    background-color: var(--bg-color-alternate);
+}
+
+.button.is-link.is-outlined:focus, .button.is-link.is-outlined:hover {
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+    color: white;
+}
+
+.button.is-link.is-outlined {
+    background-color: transparent;
+    border-color: var(--primary-color);
+    color: var(--primary-color);
+}
+
+.select:not(.is-multiple):not(.is-loading)::after {
+    border-color: var(--primary-color);
+}
+
+.select:not(.is-multiple):not(.is-loading):hover::after {
+    border-color: var(--font-color);
+}
+
+/* ======================== */
+/* ===== Theme switch ===== */
+/* ======================== */
+
+#theme-switch {
+    padding-left: 3.5rem;
+}
+
+.theme-switch-icon {
+    font-size: 1.6rem;
+ }
+.theme-switch-icon.theme-switch-icon-left {
+    padding-right: 0.3rem;
+}
+
+.theme-switch-wrapper {
+    float:right; clear:right;
+}
+
+.switch[type="checkbox"] + label {
+    padding-top: 0.45rem;
 }
diff --git a/src/options/options.html b/src/options/options.html
@@ -13,12 +13,28 @@
 
 <body>
 
-    <section class="section">
+    <section class="section" id="content-wrapper">
         <div class="container">
 
-            <h1 class="title" data-locale="options_title"></h1>
+            <!--  COLUMN TITLE + THEME -->
+            <div class="columns">
+                <div class="column is-four-fifths">
+                    <h1 class="title" data-locale="options_title"></h1>
+                </div>
+                <div class="column is-one-fifth">
+                    <div class="theme-switch-wrapper">
+                        <span class="theme-switch-icon theme-switch-icon-left">&#9728;</span>
+                        <input id="theme-switch" class="switch is-rounded is-info" type="checkbox">
+                        <label for="theme-switch"></label>
+                        <span class="theme-switch-icon">&#9790;</span>
+                    </div>
+                </div>
+            </div>
+            <!--  END COLUMN TITLE + THEME -->
 
-            <div data-locale="options_thank_you" class="notification"></div>
+            <!-- GLOBAL NOTIFICATION -->
+            <div data-locale="options_thank_you" class="notification notification-global"></div>
+            <!-- END GLOBAL NOTIFICATION -->
 
             <!-- MENU -->
             <div class="tabs is-boxed is-small-medium" id="tab_header">

diff --git a/src/options/scripts/constants.js b/src/options/scripts/constants.js
@@ -8,6 +8,9 @@
 
 // Boilerplate of all add-on options
 const OPTIONS_BOILERPLATE = {
+    [THEME]: {
+        [DARK_THEME_ENABLED]: 'boolean',
+    },
     [RELEASE]: {
         [OPEN_NOTES]: 'boolean',
     },
@@ -39,6 +42,9 @@ const OPTIONS_BOILERPLATE = {
 
 // List of all add-on options IDs for selection
 const OPTIONS_IDS = {
+    [THEME]: {
+        [DARK_THEME_ENABLED]: 'theme-switch',
+    },
     [RELEASE]: {
         [OPEN_NOTES]: 'release-open-changelog',
     },
@@ -64,13 +70,14 @@ const OPTIONS_IDS = {
 
 // List of tab management items
 const TAB_DEFAULT_NUMBER = 1;
-const TAB_CONTAINER = '#tab_container';
 const TAB_MENU = '.tab_menu';
 const TAB_CONTAINER_ITEM = '.container_item';
 const DATA_ITEM = 'data-item';
 const DATA_TAB = 'data-tab';
 
 // Miscellaneous
+const CONTENT_WRAPPER = '#content-wrapper';
+const THEME_SWITCH = '#theme-switch';
 const UNNAMED_FOLDER = '[no name]';
 const WELCOME = '#welcome';
 const CLOSE_WELCOME = '#close-welcome';

diff --git a/src/options/scripts/display.js b/src/options/scripts/display.js
@@ -124,3 +124,10 @@ function toggleIconOptions(options) {
         toggleFeatures(false, itemsToDisable, itemLabelsToDisable);
     }
 }
+
+function toggleTheme(options) {
+    const checked = !!isOptionEnabled(options, THEME, DARK_THEME_ENABLED);
+    const theme = checked === true ? 'dark' : 'light';
+    document.querySelector(THEME_SWITCH).checked = checked;
+    document.documentElement.setAttribute('data-theme', theme);
+}
diff --git a/src/options/scripts/options.js b/src/options/scripts/options.js
@@ -27,6 +27,7 @@ async function restoreOptions() {
     });
 
     toggleIconOptions(options);
+    toggleTheme(options);
     const tabNumber = typeof options[TAB] !== 'undefined' ? options[TAB] : TAB_DEFAULT_NUMBER;
     switchTab(tabNumber);
 }
@@ -53,6 +54,14 @@ function tabManagement() {
     });
 }
 
+function switchTheme(e) {
+    if (e.target.checked) {
+        document.documentElement.setAttribute('data-theme', 'dark');
+    } else {
+        document.documentElement.setAttribute('data-theme', 'light');
+    }
+}
+
 /*
  * =================================================================================================
  * LISTENERS
@@ -65,4 +74,6 @@ document.addEventListener('DOMContentLoaded', restoreOptions);
 document.addEventListener('DOMContentLoaded', insertData);
 document.addEventListener('DOMContentLoaded', tabManagement);
 // Listen for saving of the options page
-document.querySelector(TAB_CONTAINER).addEventListener('change', saveOptions);
+document.querySelector(CONTENT_WRAPPER).addEventListener('change', saveOptions);
+// Listen for change of theme
+document.querySelector(THEME_SWITCH).addEventListener('change', switchTheme);