From 8a6c0012767dbb2903ff6c23eac4d42de1aa6878 Mon Sep 17 00:00:00 2001 From: Teddy Gustiaux Date: Mon, 15 Apr 2019 21:08:11 -0400 Subject: [PATCH] feat: add dark theme to the add-on settings --- src/globals.js | 2 + src/options/css/custom.css | 164 ++++++++++++++++++++++++++++--- src/options/options.html | 22 ++++- src/options/scripts/constants.js | 9 +- src/options/scripts/display.js | 7 ++ src/options/scripts/options.js | 13 ++- 6 files changed, 196 insertions(+), 21 deletions(-) diff --git a/src/globals.js b/src/globals.js index 0278f55..d3e2df1 100644 --- 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 index 8be6149..d5981ba 100644 --- 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 index 603373d..884d20a 100644 --- a/src/options/options.html +++ b/src/options/options.html @@ -13,12 +13,28 @@ -
+
-

+ +
+
+

+
+
+
+ ☀ + + + ☾ +
+
+
+ -
+ +
+
diff --git a/src/options/scripts/constants.js b/src/options/scripts/constants.js index 4480139..bf98263 100644 --- 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 index 375f8e7..85e447c 100644 --- 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 index 8200ca9..96f6ef1 100644 --- 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);