From 8ce71b3a84dca1ba4f5d1449ed72cfea6ef8ea19 Mon Sep 17 00:00:00 2001 From: Alexander Popov Date: Fri, 3 Apr 2020 06:09:49 +0300 Subject: [PATCH 1/2] Leave red header for dark theme --- theme.config.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/theme.config.js b/theme.config.js index 145f9cd0e..ea1162908 100644 --- a/theme.config.js +++ b/theme.config.js @@ -113,7 +113,6 @@ const darkTheme = new Theme() 'background':'#2d3748', 'body': '#cbd5e0', - 'home-container-background': '#4a5568', 'github-links-hover': '#cbd5e0', 'github-links': '#cbd5e0', 'github-links-background': '#1a202c', @@ -126,8 +125,6 @@ const darkTheme = new Theme() 'core-class-border': '#4a5568', 'core-class-title': '#edf2f7', 'core-class': '#a0aec0', - 'header-background': '#4a5568', - 'header-autocomplete-background': '#2d3748', 'header-github-link-hover': '#cbd5e0', 'header-github-links': '#cbd5e0', 'header-github-links-background': '#1a202c', From eb425f6425e4beb00d7684114583d1f10d92d69c Mon Sep 17 00:00:00 2001 From: Alexander Popov Date: Fri, 3 Apr 2020 06:58:46 +0300 Subject: [PATCH 2/2] Replace Unicode symbols with Font Awesome icons Use Moon Regular for Light theme and Filled for Dark. --- .../controllers/theme-switch_controller.js | 34 +++++++------------ app/javascript/packs/app/application.scss | 27 ++++++++------- app/javascript/packs/app/icons.js | 7 ++-- .../application/_darkmode_toggle.html.slim | 3 ++ app/views/home/index.html.slim | 3 +- app/views/layouts/_header.html.slim | 3 +- 6 files changed, 35 insertions(+), 42 deletions(-) create mode 100644 app/views/application/_darkmode_toggle.html.slim diff --git a/app/javascript/controllers/theme-switch_controller.js b/app/javascript/controllers/theme-switch_controller.js index 2a66325be..b8e716d1e 100644 --- a/app/javascript/controllers/theme-switch_controller.js +++ b/app/javascript/controllers/theme-switch_controller.js @@ -1,40 +1,32 @@ import { Controller } from "stimulus" -function setLightMode(target) { - target.classList.replace("dark-switch", "light-switch") - document.body.dataset.theme = 'light' -} - -function setDarkMode(target) { - target.classList.replace("light-switch", "dark-switch") - document.body.dataset.theme = 'dark' +function setDarkMode(value) { + if (value == null) value = document.body.dataset.theme == 'light' + document.body.dataset.theme = value ? 'dark' : 'light' } export default class extends Controller { - static targets = ["switch"] - connect() { const osDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches const supportsLocalStorage = 'localStorage' in window if (supportsLocalStorage) { const darkMode = localStorage.getItem('rubyapi-darkMode') + console.debug(darkMode) - if (darkMode !== null && darkMode === '1') { - setDarkMode(this.switchTarget) - } else if (osDarkMode && darkMode === null) { - setDarkMode(this.switchTarget) + if ( + (darkMode !== null && darkMode == 'true') || + (osDarkMode && darkMode == null) + ) { + setDarkMode(true) } } } toggle() { - if (this.switchTarget.classList.contains('light-switch')) { - setDarkMode(this.switchTarget) - localStorage.setItem('rubyapi-darkMode', '1') - } else { - setLightMode(this.switchTarget) - localStorage.setItem('rubyapi-darkMode', '0') - } + setDarkMode() + localStorage.setItem( + 'rubyapi-darkMode', document.body.dataset.theme == 'dark' + ) } } diff --git a/app/javascript/packs/app/application.scss b/app/javascript/packs/app/application.scss index 049cba017..f86310605 100644 --- a/app/javascript/packs/app/application.scss +++ b/app/javascript/packs/app/application.scss @@ -53,6 +53,10 @@ pre:not(.ruby) { } } +.switch-in-dark { + display: none; +} + [data-theme="dark"] { code { @apply bg-gray-700 text-gray-400; } @@ -63,6 +67,16 @@ pre:not(.ruby) { .page a, .next a, .prev a, .last a, .first a, .current { &:hover { @apply bg-gray-900 text-gray-200; } } + + #darkmode-toggle { + .switch-in-dark { + display: initial; + } + + .switch-in-light { + display: none; + } + } } .ruby-documentation pre { @@ -71,17 +85,4 @@ pre:not(.ruby) { } } -.light-switch:before { - content: '☾'; -} - -.dark-switch:before { - content: '☼'; -} - -.dev-search-query { - @apply bg-gray-900 border-gray-800; - color: #5FB3B3; -} - /* purgecss end ignore */ diff --git a/app/javascript/packs/app/icons.js b/app/javascript/packs/app/icons.js index 19886eede..0f24691ff 100644 --- a/app/javascript/packs/app/icons.js +++ b/app/javascript/packs/app/icons.js @@ -1,9 +1,8 @@ import { library, dom } from '@fortawesome/fontawesome-svg-core' -import { faSearch, faCaretDown, faLink, faFastForward, faFastBackward, faForward, faBackward, faHistory, faCheck } from '@fortawesome/free-solid-svg-icons' -import { faPlay, faSync, faInfoCircle } from '@fortawesome/free-solid-svg-icons' -import { faCopy } from '@fortawesome/free-regular-svg-icons' +import { faSearch, faCaretDown, faLink, faFastForward, faFastBackward, faForward, faBackward, faHistory, faCheck, faPlay, faSync, faInfoCircle, faMoon as faMoonSolid } from '@fortawesome/free-solid-svg-icons' +import { faCopy, faMoon as faMoonRegular } from '@fortawesome/free-regular-svg-icons' import { faGithub, faTwitter } from '@fortawesome/free-brands-svg-icons' -library.add(faSearch, faCaretDown, faLink, faFastForward, faFastBackward, faForward, faBackward, faGithub, faTwitter, faHistory, faPlay, faCopy, faCheck, faSync, faInfoCircle) +library.add(faSearch, faCaretDown, faLink, faFastForward, faFastBackward, faForward, faBackward, faGithub, faTwitter, faHistory, faPlay, faCopy, faCheck, faSync, faInfoCircle, faMoonSolid, faMoonRegular) dom.watch() diff --git a/app/views/application/_darkmode_toggle.html.slim b/app/views/application/_darkmode_toggle.html.slim new file mode 100644 index 000000000..cc2bb26c4 --- /dev/null +++ b/app/views/application/_darkmode_toggle.html.slim @@ -0,0 +1,3 @@ +button id="darkmode-toggle" class="relative z-20 text-xl" data-action="theme-switch#toggle" aria-label="Toggle theme" title="Toggle theme" + i class="far fa-moon switch-in-light" + i class="fas fa-moon switch-in-dark" diff --git a/app/views/home/index.html.slim b/app/views/home/index.html.slim index d09e3cc18..8b2e472fe 100644 --- a/app/views/home/index.html.slim +++ b/app/views/home/index.html.slim @@ -24,8 +24,7 @@ div class="bg-home-container-background text-white md:pt-3 md:pb-6" div class="md:w-2/12 w-6/12" div class="flex flex-row-reverse" div class="block relative ml-4" data-controller="theme-switch" - button id="darkmode-toggle" class="relative z-20 text-xl" data-action="theme-switch#toggle" aria-label="Toggle theme" title="Toggle theme" - div.light-switch data-target="theme-switch.switch" + = render "darkmode_toggle" div class="block relative ml-4" data-controller="github-links" button class="relative z-20 text-xl hover:text-github-links-hover" data-action="click->github-links#toggle" i class="fab fa-github hover:fill-current" diff --git a/app/views/layouts/_header.html.slim b/app/views/layouts/_header.html.slim index 94a49f0c7..848bce082 100644 --- a/app/views/layouts/_header.html.slim +++ b/app/views/layouts/_header.html.slim @@ -16,8 +16,7 @@ header id="header" class="text-white bg-header-background flex items-center fixe div class="w-2/12" div class="flex flex-row-reverse" div class="block relative ml-4" data-controller="theme-switch" - button id="darkmode-toggle" class="relative z-20 text-xl" data-action="theme-switch#toggle" aria-label="Toggle theme" title="Toggle theme" - div.light-switch data-target="theme-switch.switch" + = render "darkmode_toggle" div class="hidden md:block relative ml-4" data-controller="github-links" button class="relative z-20 text-xl hover:text-header-github-link-hover" data-action="click->github-links#toggle" i class="fab fa-github hover:fill-current"