From 6e1f709068a8f5841002aa4554a2e3affa08a7be Mon Sep 17 00:00:00 2001 From: Vb Streetz Date: Thu, 19 Mar 2020 05:20:30 +0300 Subject: [PATCH 1/7] Detect dark mode --- app/assets/v2/css/colors.css | 2 + app/assets/v2/css/gitcoin.css | 3 +- app/assets/v2/js/theme.js | 52 +++++++++++++++++++ app/dashboard/templates/dashboard/index.html | 1 + .../templates/townsquare/index.html | 1 + 5 files changed, 58 insertions(+), 1 deletion(-) create mode 100644 app/assets/v2/js/theme.js diff --git a/app/assets/v2/css/colors.css b/app/assets/v2/css/colors.css index 3bcb8ccd392..75ab5ace5f5 100644 --- a/app/assets/v2/css/colors.css +++ b/app/assets/v2/css/colors.css @@ -23,6 +23,8 @@ --text-light: #D8D8D8; --text-dark: var(--gc-black); + + --main-bg: #EFF3F6; } .text-highlight-purple { diff --git a/app/assets/v2/css/gitcoin.css b/app/assets/v2/css/gitcoin.css index b8256e98938..65c032b2faf 100644 --- a/app/assets/v2/css/gitcoin.css +++ b/app/assets/v2/css/gitcoin.css @@ -262,8 +262,9 @@ div.button-pink { background-repeat: no-repeat; } + .bg-lightblue { - background-color: #EFF3F6; + background-color: var(--main-bg); } .bg-lightpurple { diff --git a/app/assets/v2/js/theme.js b/app/assets/v2/js/theme.js new file mode 100644 index 00000000000..c609e95ce6c --- /dev/null +++ b/app/assets/v2/js/theme.js @@ -0,0 +1,52 @@ +const MODE_LIGHT = 'light'; +const MODE_DARK = 'dark'; + +const MODE_COLORS = { + [MODE_LIGHT]: { + '--main-bg': '#EFF3F6' + }, + [MODE_DARK]: { + '--main-bg': 'var(--gc-black)' + } +}; + +$('document').ready(subscribe); + +function subscribe() { + const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches + const isLightMode = window.matchMedia("(prefers-color-scheme: light)").matches + const isNotSpecified = window.matchMedia("(prefers-color-scheme: no-preference)").matches + const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified; + + window.matchMedia("(prefers-color-scheme: dark)").addListener(e => e.matches && activateDarkMode()) + window.matchMedia("(prefers-color-scheme: light)").addListener(e => e.matches && activateLightMode()) + + if(isDarkMode) activateDarkMode() + if(isLightMode) activateLightMode() + if(isNotSpecified || hasNoSupport) { + console.log('You specified no preference for a color scheme or your browser does not support it. I schedule dark mode during night time.') + now = new Date(); + hour = now.getHours(); + if (hour < 4 || hour >= 16) { + activateDarkMode(); + } + } +} + +function activateLightMode() { + console.log('light mode'); + activateMode(MODE_LIGHT); +} + +function activateDarkMode() { + console.log('dark mode'); + activateMode(MODE_DARK); +} + +function activateMode(mode) { + const rootElement = document.querySelector(':root'); + + Object.entries(MODE_COLORS[mode]).forEach(([ k, v ]) => { + rootElement.style.setProperty(k, v); + }); +} diff --git a/app/dashboard/templates/dashboard/index.html b/app/dashboard/templates/dashboard/index.html index 8cb2d179682..dc7429141c0 100644 --- a/app/dashboard/templates/dashboard/index.html +++ b/app/dashboard/templates/dashboard/index.html @@ -190,6 +190,7 @@

+ diff --git a/app/townsquare/templates/townsquare/index.html b/app/townsquare/templates/townsquare/index.html index ba0fe27a162..8ca54297292 100644 --- a/app/townsquare/templates/townsquare/index.html +++ b/app/townsquare/templates/townsquare/index.html @@ -178,5 +178,6 @@ + From f9229e9157a263933f1775dab98345d474b765b3 Mon Sep 17 00:00:00 2001 From: Vb Streetz Date: Thu, 19 Mar 2020 05:47:13 +0300 Subject: [PATCH 2/7] No need for scripting --- app/assets/v2/js/theme.js | 52 ------------------- app/dashboard/templates/dashboard/index.html | 1 - .../templates/townsquare/index.html | 1 - 3 files changed, 54 deletions(-) delete mode 100644 app/assets/v2/js/theme.js diff --git a/app/assets/v2/js/theme.js b/app/assets/v2/js/theme.js deleted file mode 100644 index c609e95ce6c..00000000000 --- a/app/assets/v2/js/theme.js +++ /dev/null @@ -1,52 +0,0 @@ -const MODE_LIGHT = 'light'; -const MODE_DARK = 'dark'; - -const MODE_COLORS = { - [MODE_LIGHT]: { - '--main-bg': '#EFF3F6' - }, - [MODE_DARK]: { - '--main-bg': 'var(--gc-black)' - } -}; - -$('document').ready(subscribe); - -function subscribe() { - const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches - const isLightMode = window.matchMedia("(prefers-color-scheme: light)").matches - const isNotSpecified = window.matchMedia("(prefers-color-scheme: no-preference)").matches - const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified; - - window.matchMedia("(prefers-color-scheme: dark)").addListener(e => e.matches && activateDarkMode()) - window.matchMedia("(prefers-color-scheme: light)").addListener(e => e.matches && activateLightMode()) - - if(isDarkMode) activateDarkMode() - if(isLightMode) activateLightMode() - if(isNotSpecified || hasNoSupport) { - console.log('You specified no preference for a color scheme or your browser does not support it. I schedule dark mode during night time.') - now = new Date(); - hour = now.getHours(); - if (hour < 4 || hour >= 16) { - activateDarkMode(); - } - } -} - -function activateLightMode() { - console.log('light mode'); - activateMode(MODE_LIGHT); -} - -function activateDarkMode() { - console.log('dark mode'); - activateMode(MODE_DARK); -} - -function activateMode(mode) { - const rootElement = document.querySelector(':root'); - - Object.entries(MODE_COLORS[mode]).forEach(([ k, v ]) => { - rootElement.style.setProperty(k, v); - }); -} diff --git a/app/dashboard/templates/dashboard/index.html b/app/dashboard/templates/dashboard/index.html index dc7429141c0..8cb2d179682 100644 --- a/app/dashboard/templates/dashboard/index.html +++ b/app/dashboard/templates/dashboard/index.html @@ -190,7 +190,6 @@

- diff --git a/app/townsquare/templates/townsquare/index.html b/app/townsquare/templates/townsquare/index.html index 9573aee605d..02ee69419ee 100644 --- a/app/townsquare/templates/townsquare/index.html +++ b/app/townsquare/templates/townsquare/index.html @@ -176,6 +176,5 @@ - From 8b3c8b049c31fcc6a80e7a8eb898d7045d6f4add Mon Sep 17 00:00:00 2001 From: Vb Streetz Date: Thu, 19 Mar 2020 05:47:30 +0300 Subject: [PATCH 3/7] Init background shades --- app/assets/v2/css/base.css | 9 ++++ app/assets/v2/css/colors.css | 41 +++++++++++++++++++ app/assets/v2/css/forms/input.css | 2 +- app/assets/v2/css/notifications.css | 10 +++++ .../townsquare/shared/shareactivity.html | 2 +- 5 files changed, 62 insertions(+), 2 deletions(-) diff --git a/app/assets/v2/css/base.css b/app/assets/v2/css/base.css index 5e52b4de05c..5154f6da62f 100644 --- a/app/assets/v2/css/base.css +++ b/app/assets/v2/css/base.css @@ -1722,3 +1722,12 @@ div.busyOverlay { font-size: 22px; } +.bg-shade-0 { + background: var(--bg-shade-0); +} +.bg-shade-1{ + background: var(--bg-shade-1); +} +.bg-shade-2{ + background: var(--bg-shade-2); +} diff --git a/app/assets/v2/css/colors.css b/app/assets/v2/css/colors.css index 75ab5ace5f5..fe4ce471647 100644 --- a/app/assets/v2/css/colors.css +++ b/app/assets/v2/css/colors.css @@ -24,7 +24,48 @@ --text-light: #D8D8D8; --text-dark: var(--gc-black); + --bg-shade-0: white; + --bg-shade-1: white; + --bg-shade-2: #5f5c74; + --main-bg: #EFF3F6; + --form-input-bg: white; +} + +@media screen and (prefers-color-scheme: dark) { + :root { + --gc-light-blue: #16a8d5; + --gc-blue: #3E00FF; + --gc-blue-hover: #5b24ff; + --gc-purple: #0D0764; + --gc-purple-hover: #0b0d9d; + --gc-green: #0FCE7C; + --gc-green-hover: #25E899; + --gc-pink: #f9006c; + --gc-pink-hover: #f167a3; + --gc-yellow: #F5A623; + + --gc-white: #ffffff; + --gc-light-violet: #bbafd0; + --gc-dark-violet: #130b88; + --gc-black: #0d023a; + --t: #ccc; + + --gc-grey: #fafafa; + --gc-blue-grey: #f2f6f9; + --gc-dark-grey: #868789; + --gc-darker-grey: #3d3d3d; + + --text-light: #D8D8D8; + --text-dark: var(--gc-black); + + --bg-shade-0: #0a0428; + --bg-shade-1: #221d3e; + --bg-shade-2: #5f5c74; + + --main-bg: #0a0428; + --form-input-bg: #221d3e; + } } .text-highlight-purple { diff --git a/app/assets/v2/css/forms/input.css b/app/assets/v2/css/forms/input.css index 46a67f746b5..bfe0605c24b 100644 --- a/app/assets/v2/css/forms/input.css +++ b/app/assets/v2/css/forms/input.css @@ -1,5 +1,5 @@ .form__input { - background-color: #FFF; + background-color: var(--form-input-bg); border-radius: 2px; border: 1px solid #D8D8D8; padding: 5px 7px; diff --git a/app/assets/v2/css/notifications.css b/app/assets/v2/css/notifications.css index 1ee70c02ba5..5ab041214f2 100644 --- a/app/assets/v2/css/notifications.css +++ b/app/assets/v2/css/notifications.css @@ -5,7 +5,17 @@ --link-color: #3E00FF; --badge-blue-bg: #E7F0FA; --badge-blue-text: #6587AE; +} +@media screen and (prefers-color-scheme: dark) { + :root { + --color-notification: 37, 232, 153; + --badge-bg: #D6FBEB; + --badge-text: #00A55E; + --link-color: #3E00FF; + --badge-blue-bg: #5f5c74; + --badge-blue-text: white; + } } diff --git a/app/townsquare/templates/townsquare/shared/shareactivity.html b/app/townsquare/templates/townsquare/shared/shareactivity.html index e2ac6256c69..7523bb24005 100644 --- a/app/townsquare/templates/townsquare/shared/shareactivity.html +++ b/app/townsquare/templates/townsquare/shared/shareactivity.html @@ -1,6 +1,6 @@ {% load humanize static i18n %} {% if not is_direct_link %} -
+
From 3ab1b74159ff5da838bc1b300504556a753f26e9 Mon Sep 17 00:00:00 2001 From: Vb Streetz Date: Fri, 20 Mar 2020 07:24:24 +0300 Subject: [PATCH 4/7] Some typography color updates --- app/assets/other/avatars/.index | 0 app/assets/tmp/_index_ | 0 app/assets/v2/css/buttons.css | 2 +- app/assets/v2/css/colors.css | 12 ++++++++++-- app/assets/v2/css/forms/input.css | 17 ++++------------- app/assets/v2/css/town_square.css | 2 +- app/media/.gitkeep | 0 7 files changed, 16 insertions(+), 17 deletions(-) delete mode 100644 app/assets/other/avatars/.index delete mode 100644 app/assets/tmp/_index_ delete mode 100644 app/media/.gitkeep diff --git a/app/assets/other/avatars/.index b/app/assets/other/avatars/.index deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/app/assets/tmp/_index_ b/app/assets/tmp/_index_ deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/app/assets/v2/css/buttons.css b/app/assets/v2/css/buttons.css index 9bc2cbb2081..079f04029e3 100644 --- a/app/assets/v2/css/buttons.css +++ b/app/assets/v2/css/buttons.css @@ -274,7 +274,7 @@ button:focus { } .btn-radio i { - color: #3E00FF; + color: var(--button-radio-icon-color); } .badge-greylight { diff --git a/app/assets/v2/css/colors.css b/app/assets/v2/css/colors.css index fe4ce471647..cef6b77a7bc 100644 --- a/app/assets/v2/css/colors.css +++ b/app/assets/v2/css/colors.css @@ -28,8 +28,12 @@ --bg-shade-1: white; --bg-shade-2: #5f5c74; - --main-bg: #EFF3F6; + --main-bg: #eff3f6; --form-input-bg: white; + --form-input-color: rgba(0, 0, 0, 0.38); + --button-radio-icon-color: #3e00ff; + --link-color: #3e00ff; + --town-square-link-color: black; } @media screen and (prefers-color-scheme: dark) { @@ -62,9 +66,13 @@ --bg-shade-0: #0a0428; --bg-shade-1: #221d3e; --bg-shade-2: #5f5c74; - + --main-bg: #0a0428; --form-input-bg: #221d3e; + --form-input-color: white; + --button-radio-icon-color: white; + --link-color: white; + --town-square-link-color: white; } } diff --git a/app/assets/v2/css/forms/input.css b/app/assets/v2/css/forms/input.css index bfe0605c24b..503a31adb10 100644 --- a/app/assets/v2/css/forms/input.css +++ b/app/assets/v2/css/forms/input.css @@ -47,20 +47,11 @@ textarea.form__input { background-position: top 0.5rem right 0.5rem; } -.form__input::-webkit-input-placeholder { - color: rgba(0, 0, 0, 0.38); -} - -.form__input::-moz-placeholder { - color: rgba(0, 0, 0, 0.38); -} - -.form__input:-moz-placeholder { - color: rgba(0, 0, 0, 0.38); -} - +.form__input::-webkit-input-placeholder, +.form__input::-moz-placeholder, +.form__input:-moz-placeholder, .form__input:-ms-input-placeholder { - color: rgba(0, 0, 0, 0.38); + color: var(--form-input-color); } .form__input:disabled { diff --git a/app/assets/v2/css/town_square.css b/app/assets/v2/css/town_square.css index a6e26fa9f10..e6de00c6b25 100644 --- a/app/assets/v2/css/town_square.css +++ b/app/assets/v2/css/town_square.css @@ -858,7 +858,7 @@ body.green.offer_view .announce { .townsquare_nav-list .nav-item .nav-link { padding-left: 0; - color: black; + color: var(--town-square-link-color); } .townsquare_nav-list .nav-link.active { diff --git a/app/media/.gitkeep b/app/media/.gitkeep deleted file mode 100644 index e69de29bb2d..00000000000 From 886f0f74193cdef056aa946e88123850284ea4ed Mon Sep 17 00:00:00 2001 From: Vb Streetz Date: Fri, 20 Mar 2020 22:21:28 +0300 Subject: [PATCH 5/7] More typography and input states updates --- app/assets/v2/css/colors.css | 10 ++++++++-- app/assets/v2/css/forms/input.css | 6 ++---- app/assets/v2/css/labs.css | 2 +- app/assets/v2/css/town_square.css | 10 +++++++--- 4 files changed, 18 insertions(+), 10 deletions(-) diff --git a/app/assets/v2/css/colors.css b/app/assets/v2/css/colors.css index cef6b77a7bc..154f482e0c8 100644 --- a/app/assets/v2/css/colors.css +++ b/app/assets/v2/css/colors.css @@ -33,7 +33,10 @@ --form-input-color: rgba(0, 0, 0, 0.38); --button-radio-icon-color: #3e00ff; --link-color: #3e00ff; - --town-square-link-color: black; + --townsquare-link-color: black; + --townsquare-block-header-color: #626365; + --active-button-border-color: var(--link-color); + --default-text-color: var(--text-dark); } @media screen and (prefers-color-scheme: dark) { @@ -72,7 +75,10 @@ --form-input-color: white; --button-radio-icon-color: white; --link-color: white; - --town-square-link-color: white; + --townsquare-link-color: white; + --townsquare-block-header-color: white; + --active-button-border-color: white; + --default-text-color: white; } } diff --git a/app/assets/v2/css/forms/input.css b/app/assets/v2/css/forms/input.css index 503a31adb10..1a156df0430 100644 --- a/app/assets/v2/css/forms/input.css +++ b/app/assets/v2/css/forms/input.css @@ -47,10 +47,8 @@ textarea.form__input { background-position: top 0.5rem right 0.5rem; } -.form__input::-webkit-input-placeholder, -.form__input::-moz-placeholder, -.form__input:-moz-placeholder, -.form__input:-ms-input-placeholder { +.form__input, +.form__input::-webkit-input-placeholder { color: var(--form-input-color); } diff --git a/app/assets/v2/css/labs.css b/app/assets/v2/css/labs.css index c93eabc7825..aaf56dca562 100644 --- a/app/assets/v2/css/labs.css +++ b/app/assets/v2/css/labs.css @@ -1,5 +1,5 @@ body { - color: var(--text-dark); + color: var(--default-text-color); } .navbar { diff --git a/app/assets/v2/css/town_square.css b/app/assets/v2/css/town_square.css index e6de00c6b25..b774d07b561 100644 --- a/app/assets/v2/css/town_square.css +++ b/app/assets/v2/css/town_square.css @@ -1,3 +1,6 @@ +body { + color: var(--default-text-color); +} #mobile_nav_toggle{ display: none !important; } @@ -858,7 +861,7 @@ body.green.offer_view .announce { .townsquare_nav-list .nav-item .nav-link { padding-left: 0; - color: var(--town-square-link-color); + color: var(--townsquare-link-color); } .townsquare_nav-list .nav-link.active { @@ -882,7 +885,7 @@ body.green.offer_view .announce { .townsquare_block-header { font-size: 0.9rem; - color: #626365; + color: var(--townsquare-block-header-color); text-transform: uppercase; cursor: pointer; } @@ -896,10 +899,11 @@ body.green.offer_view .announce { background-color: var(--badge-blue-bg); color: var(--badge-blue-text); border: 1px solid transparent; + margin-bottom: 0.5rem !important; } #status .btn-group-toggle .btn-radio.active { - border: 1px solid var(--link-color); + border: 1px solid var(--active-button-border-color); } .grey { From 85c91c890b6c65a02180f96ca48ad1ae159ab569 Mon Sep 17 00:00:00 2001 From: Vb Streetz Date: Sat, 21 Mar 2020 03:46:56 +0300 Subject: [PATCH 6/7] feat: theme switcher --- app/assets/v2/css/theme_switcher.css | 15 +++++ app/assets/v2/js/theme.js | 67 +++++++++++++++++++ app/dashboard/templates/shared/menu.html | 1 + .../templates/shared/theme_switcher.html | 5 ++ .../templates/townsquare/index.html | 2 + 5 files changed, 90 insertions(+) create mode 100644 app/assets/v2/css/theme_switcher.css create mode 100644 app/assets/v2/js/theme.js create mode 100644 app/dashboard/templates/shared/theme_switcher.html diff --git a/app/assets/v2/css/theme_switcher.css b/app/assets/v2/css/theme_switcher.css new file mode 100644 index 00000000000..fc326e73581 --- /dev/null +++ b/app/assets/v2/css/theme_switcher.css @@ -0,0 +1,15 @@ +#theme-switcher{ + align-items: center; + cursor: pointer; +} + +.theme-switcher-svg { + fill: currentColor; + width: 1em; + height: 1em; + display: inline-block; + font-size: 1.5rem; + transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + flex-shrink: 0; + user-select: none; +} diff --git a/app/assets/v2/js/theme.js b/app/assets/v2/js/theme.js new file mode 100644 index 00000000000..c1e1bc52110 --- /dev/null +++ b/app/assets/v2/js/theme.js @@ -0,0 +1,67 @@ +let CURRENT_MODE; +const MODE_LIGHT = 'light'; +const MODE_DARK = 'dark'; + +const MODE_COLORS = { + [MODE_LIGHT]: { + '--main-bg': '#EFF3F6' + }, + [MODE_DARK]: { + '--main-bg': 'var(--gc-black)' + } +}; + +$('document').ready(subscribe); + +function subscribe() { + document.getElementById('theme-switcher').addEventListener("click", onToggleMode); + + const mode = window.localStorage.getItem('theme'); + if (mode) { + return activateMode(mode); + } + const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches + const isLightMode = window.matchMedia("(prefers-color-scheme: light)").matches + const isNotSpecified = window.matchMedia("(prefers-color-scheme: no-preference)").matches + const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified; + + window.matchMedia("(prefers-color-scheme: dark)").addListener(e => e.matches && activateDarkMode()) + window.matchMedia("(prefers-color-scheme: light)").addListener(e => e.matches && activateLightMode()) + + if(isDarkMode) activateDarkMode() + if(isLightMode) activateLightMode() + if(isNotSpecified || hasNoSupport) { + console.log('You specified no preference for a color scheme or your browser does not support it. I schedule dark mode during night time.') + now = new Date(); + hour = now.getHours(); + if (hour < 4 || hour >= 16) { + activateDarkMode(); + } + } +} + +function onToggleMode() { + activateMode(CURRENT_MODE === MODE_LIGHT ? MODE_DARK : MODE_LIGHT); +} + +function activateLightMode() { + activateMode(MODE_LIGHT); +} + +function activateDarkMode() { + activateMode(MODE_DARK); +} + +function activateMode(mode) { + CURRENT_MODE = mode; + + window.localStorage.setItem('theme', mode); + + document.querySelector('.theme-switcher__light').style.display = mode === MODE_LIGHT ? 'none' : 'flex'; + document.querySelector('.theme-switcher__dark').style.display = mode === MODE_DARK ? 'none' : 'flex'; + const rootElement = document.querySelector(':root'); + + Object.entries(MODE_COLORS[mode]).forEach(([ k, v ]) => { + rootElement.style.setProperty(k, v); + }); +} \ No newline at end of file diff --git a/app/dashboard/templates/shared/menu.html b/app/dashboard/templates/shared/menu.html index 51535c594da..1aec98d0178 100644 --- a/app/dashboard/templates/shared/menu.html +++ b/app/dashboard/templates/shared/menu.html @@ -326,5 +326,6 @@
Weekly leaderboard
diff --git a/app/dashboard/templates/shared/theme_switcher.html b/app/dashboard/templates/shared/theme_switcher.html new file mode 100644 index 00000000000..ccec42c1bb3 --- /dev/null +++ b/app/dashboard/templates/shared/theme_switcher.html @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/app/townsquare/templates/townsquare/index.html b/app/townsquare/templates/townsquare/index.html index 02ee69419ee..27f0d2a44fd 100644 --- a/app/townsquare/templates/townsquare/index.html +++ b/app/townsquare/templates/townsquare/index.html @@ -27,6 +27,7 @@ + @@ -176,5 +177,6 @@ + From cc3bd445ebe6890ad4a5d79ed6f8327108a6fbea Mon Sep 17 00:00:00 2001 From: Vb Streetz Date: Sat, 21 Mar 2020 04:24:30 +0300 Subject: [PATCH 7/7] feat: use class for easier dark mode theme application --- app/assets/v2/css/colors.css | 83 +++++++++---------- app/assets/v2/css/notifications.css | 20 ++--- app/assets/v2/css/theme_switcher.css | 10 ++- app/assets/v2/js/theme.js | 67 --------------- app/assets/v2/js/theme_switcher.js | 53 ++++++++++++ .../templates/shared/theme_switcher.html | 2 +- .../templates/townsquare/index.html | 2 +- 7 files changed, 114 insertions(+), 123 deletions(-) delete mode 100644 app/assets/v2/js/theme.js create mode 100644 app/assets/v2/js/theme_switcher.js diff --git a/app/assets/v2/css/colors.css b/app/assets/v2/css/colors.css index 154f482e0c8..ec39d341d84 100644 --- a/app/assets/v2/css/colors.css +++ b/app/assets/v2/css/colors.css @@ -1,4 +1,4 @@ -:root { +html { --gc-light-blue: #16a8d5; --gc-blue: #3E00FF; --gc-blue-hover: #5b24ff; @@ -39,47 +39,46 @@ --default-text-color: var(--text-dark); } -@media screen and (prefers-color-scheme: dark) { - :root { - --gc-light-blue: #16a8d5; - --gc-blue: #3E00FF; - --gc-blue-hover: #5b24ff; - --gc-purple: #0D0764; - --gc-purple-hover: #0b0d9d; - --gc-green: #0FCE7C; - --gc-green-hover: #25E899; - --gc-pink: #f9006c; - --gc-pink-hover: #f167a3; - --gc-yellow: #F5A623; - - --gc-white: #ffffff; - --gc-light-violet: #bbafd0; - --gc-dark-violet: #130b88; - --gc-black: #0d023a; - --t: #ccc; - - --gc-grey: #fafafa; - --gc-blue-grey: #f2f6f9; - --gc-dark-grey: #868789; - --gc-darker-grey: #3d3d3d; - - --text-light: #D8D8D8; - --text-dark: var(--gc-black); - - --bg-shade-0: #0a0428; - --bg-shade-1: #221d3e; - --bg-shade-2: #5f5c74; - - --main-bg: #0a0428; - --form-input-bg: #221d3e; - --form-input-color: white; - --button-radio-icon-color: white; - --link-color: white; - --townsquare-link-color: white; - --townsquare-block-header-color: white; - --active-button-border-color: white; - --default-text-color: white; - } +/* @media screen and (prefers-color-scheme: dark) { */ +html.dark-mode { + --gc-light-blue: #16a8d5; + --gc-blue: #3E00FF; + --gc-blue-hover: #5b24ff; + --gc-purple: #0D0764; + --gc-purple-hover: #0b0d9d; + --gc-green: #0FCE7C; + --gc-green-hover: #25E899; + --gc-pink: #f9006c; + --gc-pink-hover: #f167a3; + --gc-yellow: #F5A623; + + --gc-white: #ffffff; + --gc-light-violet: #bbafd0; + --gc-dark-violet: #130b88; + --gc-black: #0d023a; + --t: #ccc; + + --gc-grey: #fafafa; + --gc-blue-grey: #f2f6f9; + --gc-dark-grey: #868789; + --gc-darker-grey: #3d3d3d; + + --text-light: #D8D8D8; + --text-dark: var(--gc-black); + + --bg-shade-0: #0a0428; + --bg-shade-1: #221d3e; + --bg-shade-2: #5f5c74; + + --main-bg: #0a0428; + --form-input-bg: #221d3e; + --form-input-color: white; + --button-radio-icon-color: white; + --link-color: white; + --townsquare-link-color: white; + --townsquare-block-header-color: white; + --active-button-border-color: white; + --default-text-color: white; } .text-highlight-purple { diff --git a/app/assets/v2/css/notifications.css b/app/assets/v2/css/notifications.css index 5ab041214f2..10cfc67a925 100644 --- a/app/assets/v2/css/notifications.css +++ b/app/assets/v2/css/notifications.css @@ -1,4 +1,4 @@ -:root { +html { --color-notification: 37, 232, 153; --badge-bg: #D6FBEB; --badge-text: #00A55E; @@ -7,18 +7,16 @@ --badge-blue-text: #6587AE; } -@media screen and (prefers-color-scheme: dark) { - :root { - --color-notification: 37, 232, 153; - --badge-bg: #D6FBEB; - --badge-text: #00A55E; - --link-color: #3E00FF; - --badge-blue-bg: #5f5c74; - --badge-blue-text: white; - } +/* @media screen and (prefers-color-scheme: dark) { */ +html.dark-mode { + --color-notification: 37, 232, 153; + --badge-bg: #D6FBEB; + --badge-text: #00A55E; + --link-color: #3E00FF; + --badge-blue-bg: #5f5c74; + --badge-blue-text: white; } - .navbar-nav .nav-link.notification__icon { position: relative; font-size: 18px; diff --git a/app/assets/v2/css/theme_switcher.css b/app/assets/v2/css/theme_switcher.css index fc326e73581..b5dafc1313f 100644 --- a/app/assets/v2/css/theme_switcher.css +++ b/app/assets/v2/css/theme_switcher.css @@ -4,7 +4,7 @@ } .theme-switcher-svg { - fill: currentColor; + fill: white; width: 1em; height: 1em; display: inline-block; @@ -13,3 +13,11 @@ flex-shrink: 0; user-select: none; } + +html:not(.dark-mode) .theme-switcher__dark { + display: none; +} + +html.dark-mode .theme-switcher__light { + display: none; +} \ No newline at end of file diff --git a/app/assets/v2/js/theme.js b/app/assets/v2/js/theme.js deleted file mode 100644 index c1e1bc52110..00000000000 --- a/app/assets/v2/js/theme.js +++ /dev/null @@ -1,67 +0,0 @@ -let CURRENT_MODE; -const MODE_LIGHT = 'light'; -const MODE_DARK = 'dark'; - -const MODE_COLORS = { - [MODE_LIGHT]: { - '--main-bg': '#EFF3F6' - }, - [MODE_DARK]: { - '--main-bg': 'var(--gc-black)' - } -}; - -$('document').ready(subscribe); - -function subscribe() { - document.getElementById('theme-switcher').addEventListener("click", onToggleMode); - - const mode = window.localStorage.getItem('theme'); - if (mode) { - return activateMode(mode); - } - const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches - const isLightMode = window.matchMedia("(prefers-color-scheme: light)").matches - const isNotSpecified = window.matchMedia("(prefers-color-scheme: no-preference)").matches - const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified; - - window.matchMedia("(prefers-color-scheme: dark)").addListener(e => e.matches && activateDarkMode()) - window.matchMedia("(prefers-color-scheme: light)").addListener(e => e.matches && activateLightMode()) - - if(isDarkMode) activateDarkMode() - if(isLightMode) activateLightMode() - if(isNotSpecified || hasNoSupport) { - console.log('You specified no preference for a color scheme or your browser does not support it. I schedule dark mode during night time.') - now = new Date(); - hour = now.getHours(); - if (hour < 4 || hour >= 16) { - activateDarkMode(); - } - } -} - -function onToggleMode() { - activateMode(CURRENT_MODE === MODE_LIGHT ? MODE_DARK : MODE_LIGHT); -} - -function activateLightMode() { - activateMode(MODE_LIGHT); -} - -function activateDarkMode() { - activateMode(MODE_DARK); -} - -function activateMode(mode) { - CURRENT_MODE = mode; - - window.localStorage.setItem('theme', mode); - - document.querySelector('.theme-switcher__light').style.display = mode === MODE_LIGHT ? 'none' : 'flex'; - document.querySelector('.theme-switcher__dark').style.display = mode === MODE_DARK ? 'none' : 'flex'; - const rootElement = document.querySelector(':root'); - - Object.entries(MODE_COLORS[mode]).forEach(([ k, v ]) => { - rootElement.style.setProperty(k, v); - }); -} \ No newline at end of file diff --git a/app/assets/v2/js/theme_switcher.js b/app/assets/v2/js/theme_switcher.js new file mode 100644 index 00000000000..1a8f6341898 --- /dev/null +++ b/app/assets/v2/js/theme_switcher.js @@ -0,0 +1,53 @@ +let CURRENT_MODE; +const LIGHT_MODE = 'light'; +const DARK_MODE = 'dark'; + +const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches; +const theme = window.localStorage.getItem('theme'); +if (theme === 'dark' || (!theme && window.matchMedia("(prefers-color-scheme: dark)"))) { + document.documentElement.classList.add('dark-mode'); +} + +document.addEventListener('DOMContentLoaded', subscribe, false); + +function subscribe() { + // Handle preferred user theme mode + document.getElementById('theme-switcher').addEventListener("click", onToggleMode); + + // Load theme if persisted + const mode = window.localStorage.getItem('theme'); + if (mode) { + return activateMode(mode); + } + + // Attempt to detect theme mode + const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches + const isLightMode = window.matchMedia("(prefers-color-scheme: light)").matches + + window.matchMedia("(prefers-color-scheme: dark)").addListener(e => e.matches && activateDarkMode()) + window.matchMedia("(prefers-color-scheme: light)").addListener(e => e.matches && activateLightMode()) + + if(isDarkMode) activateDarkMode() + if(isLightMode) activateLightMode() +} + +function onToggleMode() { + const mode = CURRENT_MODE === LIGHT_MODE ? DARK_MODE : LIGHT_MODE; + window.localStorage.setItem('theme', mode); + activateMode(mode); +} + +function activateLightMode() { + activateMode(LIGHT_MODE); +} + +function activateDarkMode() { + activateMode(DARK_MODE); +} + +function activateMode(mode) { + CURRENT_MODE = mode; + + // Toggle root dark-mode class + document.documentElement.classList.toggle('dark-mode', mode === DARK_MODE); +} \ No newline at end of file diff --git a/app/dashboard/templates/shared/theme_switcher.html b/app/dashboard/templates/shared/theme_switcher.html index ccec42c1bb3..9a87f3a0f13 100644 --- a/app/dashboard/templates/shared/theme_switcher.html +++ b/app/dashboard/templates/shared/theme_switcher.html @@ -1,5 +1,5 @@ \ No newline at end of file diff --git a/app/townsquare/templates/townsquare/index.html b/app/townsquare/templates/townsquare/index.html index 27f0d2a44fd..8d31ad93b12 100644 --- a/app/townsquare/templates/townsquare/index.html +++ b/app/townsquare/templates/townsquare/index.html @@ -28,6 +28,7 @@ + @@ -177,6 +178,5 @@ -