diff --git a/_includes/head.html b/_includes/head.html index 7db3357497..9e54206b4e 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -6,6 +6,7 @@ + diff --git a/_includes/header/header-de.html b/_includes/header/header-de.html index 84beb5a2ed..5b48573c7f 100644 --- a/_includes/header/header-de.html +++ b/_includes/header/header-de.html @@ -124,5 +124,8 @@ +
+ +
diff --git a/_includes/header/header-en.html b/_includes/header/header-en.html index a8b93f3477..c1ffb8bf77 100644 --- a/_includes/header/header-en.html +++ b/_includes/header/header-en.html @@ -157,5 +157,8 @@ --> +
+ +
diff --git a/_includes/header/header-es.html b/_includes/header/header-es.html index 3a5eb959a9..25911459af 100644 --- a/_includes/header/header-es.html +++ b/_includes/header/header-es.html @@ -124,5 +124,8 @@ +
+ +
diff --git a/_includes/header/header-fr.html b/_includes/header/header-fr.html index d19a2f111d..c8e8827dd1 100644 --- a/_includes/header/header-fr.html +++ b/_includes/header/header-fr.html @@ -124,5 +124,8 @@ +
+ +
diff --git a/_includes/header/header-it.html b/_includes/header/header-it.html index d3843efbcc..399baaec1d 100644 --- a/_includes/header/header-it.html +++ b/_includes/header/header-it.html @@ -121,5 +121,8 @@ +
+ +
diff --git a/_includes/header/header-ja.html b/_includes/header/header-ja.html index f53fac1110..ad185f0881 100644 --- a/_includes/header/header-ja.html +++ b/_includes/header/header-ja.html @@ -124,5 +124,8 @@ +
+ +
diff --git a/_includes/header/header-ko.html b/_includes/header/header-ko.html index f9cfd02aa4..f7fb34c4e9 100644 --- a/_includes/header/header-ko.html +++ b/_includes/header/header-ko.html @@ -124,5 +124,8 @@ +
+ +
diff --git a/_includes/header/header-pt-br.html b/_includes/header/header-pt-br.html index 8ea2ee5753..cbc7c784a8 100644 --- a/_includes/header/header-pt-br.html +++ b/_includes/header/header-pt-br.html @@ -124,5 +124,8 @@ +
+ +
diff --git a/_includes/header/header-ru.html b/_includes/header/header-ru.html index 2e2b5da84f..e7c09067ce 100644 --- a/_includes/header/header-ru.html +++ b/_includes/header/header-ru.html @@ -124,5 +124,8 @@ +
+ +
diff --git a/_includes/header/header-sk.html b/_includes/header/header-sk.html index 459b446b5c..9737ff6c87 100644 --- a/_includes/header/header-sk.html +++ b/_includes/header/header-sk.html @@ -123,5 +123,8 @@ +
+ +
diff --git a/_includes/header/header-th.html b/_includes/header/header-th.html index 9f998b2352..908a1e6aef 100644 --- a/_includes/header/header-th.html +++ b/_includes/header/header-th.html @@ -146,5 +146,8 @@ --> +
+ +
diff --git a/_includes/header/header-tr.html b/_includes/header/header-tr.html index c8326c2467..35677a9a67 100644 --- a/_includes/header/header-tr.html +++ b/_includes/header/header-tr.html @@ -146,5 +146,8 @@ --> +
+ +
diff --git a/_includes/header/header-uk.html b/_includes/header/header-uk.html index 0ba2ca8d26..c20002609b 100644 --- a/_includes/header/header-uk.html +++ b/_includes/header/header-uk.html @@ -121,5 +121,8 @@ +
+ +
diff --git a/_includes/header/header-uz.html b/_includes/header/header-uz.html index 6c848fa344..4666ded933 100644 --- a/_includes/header/header-uz.html +++ b/_includes/header/header-uz.html @@ -124,5 +124,8 @@ +
+ +
diff --git a/_includes/header/header-zh-cn.html b/_includes/header/header-zh-cn.html index f8cb73d96c..9327b36522 100644 --- a/_includes/header/header-zh-cn.html +++ b/_includes/header/header-zh-cn.html @@ -124,5 +124,8 @@ +
+ +
diff --git a/_includes/header/header-zh-tw.html b/_includes/header/header-zh-tw.html index 39594601e3..6bd51a1874 100644 --- a/_includes/header/header-zh-tw.html +++ b/_includes/header/header-zh-tw.html @@ -123,5 +123,8 @@ +
+ +
diff --git a/_layouts/3x-api.html b/_layouts/3x-api.html index d990ca5648..eb4841d4f7 100644 --- a/_layouts/3x-api.html +++ b/_layouts/3x-api.html @@ -22,6 +22,8 @@ {% include footer/footer-{{ page.lang }}.html %} + + diff --git a/_layouts/4x-api.html b/_layouts/4x-api.html index 788a944aea..dd546bfe2c 100644 --- a/_layouts/4x-api.html +++ b/_layouts/4x-api.html @@ -22,6 +22,7 @@ {% include footer/footer-{{ page.lang }}.html %} + diff --git a/_layouts/5x-api.html b/_layouts/5x-api.html index 8f8ff01342..14051ce766 100644 --- a/_layouts/5x-api.html +++ b/_layouts/5x-api.html @@ -22,6 +22,7 @@ {% include footer/footer-{{ page.lang }}.html %} + diff --git a/_layouts/home.html b/_layouts/home.html index 49e7d64263..2d18d238fa 100644 --- a/_layouts/home.html +++ b/_layouts/home.html @@ -19,7 +19,7 @@ {{ content }} {% include footer/footer-{{ page.lang }}.html %} - + diff --git a/_layouts/middleware.html b/_layouts/middleware.html index a64121de4a..e07602aa60 100644 --- a/_layouts/middleware.html +++ b/_layouts/middleware.html @@ -26,5 +26,7 @@ {% else %}

ERROR: No source specified for README {{page.module}}

{% endif %} + + diff --git a/_layouts/page.html b/_layouts/page.html index a760250451..ca5daf4227 100644 --- a/_layouts/page.html +++ b/_layouts/page.html @@ -31,6 +31,7 @@ {% include footer/footer-{{ page.lang }}.html %} + diff --git a/css/style.css b/css/style.css index 436f87c642..f3d3203fe3 100644 --- a/css/style.css +++ b/css/style.css @@ -722,9 +722,7 @@ footer { .menu ul.dropit-submenu { background-color: #fcfcfa; border: 1px solid #b2b2b2; - padding: 6px 0; margin: 0 0 0 1px; - border-radius: 3px; box-shadow: 0px 1px 3px rgba(0,0,0,0.15); } diff --git a/css/theme.css b/css/theme.css new file mode 100644 index 0000000000..77e66ace79 --- /dev/null +++ b/css/theme.css @@ -0,0 +1,225 @@ +:root { + --main_dark_bg: #010409; + --second_dark_bg: #0d1117; + --dark_hover: #383838; + --second_dark_hover: #484848; + --dark_text: #e6edf3; + --dark_header_text: silver; + --dark_inner_text: grey; + --link: #259dff; +} +#theme-icon-container { + position: relative; + float: right; + color: white; + min-width: 50px; + color: black; +} +body.dark-mode #theme-icon-container { + color: var(--dark_text); + background-color: var(--second_dark_bg); +} +body.dark-mode { + background: var(--main_dark_bg); + color: var(--dark_text); +} +body.dark-mode #blm-banner { + background-color: var(--main_dark_bg); + color: var(--dark _text); +} +body.dark-mode header { + background-color: var(--second_dark_bg); + color: var(--dark_text); +} +body.dark-mode #logo > a { + color: var(--dark_text); +} +/* navbar links/drop down menu links */ +body.dark-mode #navbar ul#navmenu li a, +body.dark-mode #navbar ul#navmenu li.dropit-trigger a { + color: var(--dark_text); +} +/* first drop down link - some js is adding current class */ +body.dark-mode #navbar ul#navmenu li a.current { + background: transparent; +} +body.dark-mode #navbar ul#navmenu li a.current:hover { + background: var(--dark_hover); +} +body.dark-mode .menu ul.dropit-submenu { + background: var(--dark_bg); +} +/* drop down menu links */ +body.dark-mode #navbar .menu ul.dropit-submenu a:hover { + background: var(--dark_hover); +} +body.dark-mode #navbar #navmenu li { + background: var(--second_dark_bg); +} +/* search bar */ +body.dark-mode #navbar > span.algolia-autocomplete > input { + background-color: var(--second_dark_bg); +} +body.dark-mode #navbar > span.algolia-autocomplete > input, +body.dark-mode #navbar > span.algolia-autocomplete > input::placeholder { + color: var(--dark_text); +} +/* search bar french */ +:lang(fr) body.dark-mode #navbar ul#navmenu > span.algolia-autocomplete > input { + background-color: var(--second_dark_bg); + color: var(--dark_text); +} +/* search bar fixes uz, ru, de, fr */ +:lang(uz) span.algolia-autocomplete { + max-width: 8em; + min-width: auto; +} +:lang(ru) span.algolia-autocomplete, +:lang(de) span.algolia-autocomplete, +:lang(fr) span.algolia-autocomplete + { + max-width: 9em; + min-width: auto; +} +:lang(uz) span.algolia-autocomplete > input, +:lang(ru) span.algolia-autocomplete > input, +:lang(de) span.algolia-autocomplete > input, +:lang(fr) span.algolia-autocomplete > input { + max-width: 100%; +} +body.dark-mode #navbar ul#navmenu > span.algolia-autocomplete > input::placeholder { + color: var(--dark_text); +} +body.dark-mode div#overlay { + opacity: 0.5; +} +@media (max-width: 899px) { + #theme-icon-container { + bottom: 35px; + } + /* mobile menu main links hover */ + body.dark-mode div#navbar ul#navmenu .dropit-trigger:hover { + background: var(--dark_hover); + } + /* mobile menu inner links hover */ + body.dark-mode div#navbar .menu ul.dropit-submenu a:hover { + background: var(--second_dark_hover); + color: var(--dark_text) !important; + } +} +body.dark-mode .doc-box.doc-info, +body.dark-mode .doc-box.doc-notice, +body.dark-mode .doc-box.doc-warn { + color: var(--dark_text); + background: var(--main_dark_bg); +} +body.dark-mode .doc-box.doc-info pre.language-javascript { + background: var(--main_dark_bg); +} +body.dark-mode h1, +body.dark-mode h2, +body.dark-mode h3, +body.dark-mode code, +body.dark-mode em, +body.dark-mode strong { + color: var(--dark_text); +} +body.dark-mode pre { + background: var(--second_dark_bg); +} +/* index.html */ +body.dark-mode #description .express > a { + color: var(--dark_text); +} +body.dark-mode #install-command { + background: var(--main_dark_bg); +} +body.dark-mode #announcements { + background: var(--main_dark_bg); +} +body.dark-mode #boxes div > h3 { + color: var(--dark_text); +} +/* basic-routing.htlm */ +body.dark-mode [class*='language-'] { + text-shadow: 0 1px var(--second_dark_bg); +} +/* js fat arrow operator */ +body.dark-mode .token.operator { + background: inherit; +} +/* debugging.htlm */ +body.dark-mode table tr:first-child th { + background-color: var(--second_dark_bg); + color: var(--dark_text); +} +/* api pages */ +body.dark-mode #menu li > * { + color: var(--dark_text); +} +body.dark-mode #menu li ul li > em { + color: var(--dark_header_text); +} +body.dark-mode #menu li ul li > a { + color: var(--dark_inner_text); +} +body.dark-mode #api-doc > h3 { + color: var(--dark_header_text); +} +body.dark-mode #api-doc section h5 { + color: var(--dark_header_text); +} +/* +overriding search-bar results drop down +*/ +body.dark-mode .ds-dropdown-menu .ds-dataset-1 { + background-color: var(--dark_bg); +} +body.dark-mode .ds-dropdown-menu .ds-dataset-1 .ds-suggestion a { + background-color: var(--second_dark_bg); + color: var(--dark_text); +} +body.dark-mode + .ds-dropdown-menu + .ds-dataset-1 + .ds-suggestions + .algolia-docsearch-suggestion--category-header { + color: var(--dark_text); +} +body.dark-mode + .ds-dropdown-menu + .ds-dataset-1 + .ds-suggestions + .algolia-docsearch-suggestion--wrapper + .algolia-docsearch-suggestion--subcategory-column { + color: var(--dark_header_text); +} +body.dark-mode + .ds-dropdown-menu + .ds-dataset-1 + .ds-suggestions + .algolia-docsearch-suggestion--wrapper + .algolia-docsearch-suggestion--title { + color: var(--dark_text); +} +body.dark-mode + .ds-dropdown-menu + .ds-dataset-1 + .ds-suggestions + .algolia-docsearch-suggestion--wrapper + .algolia-docsearch-suggestion--text { + color: var(--dark_text); +} +body.dark-mode + .ds-dropdown-menu + .ds-dataset-1 + .ds-suggestions + .algolia-docsearch-suggestion--wrapper + .algolia-docsearch-suggestion--highlight { + color: var(--link); +} +body.dark-mode .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--title, +body.dark-mode .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content{ + background-color: var(--dark_hover); +} + diff --git a/js/theme.js b/js/theme.js new file mode 100644 index 0000000000..e5707cad57 --- /dev/null +++ b/js/theme.js @@ -0,0 +1,86 @@ +const themeWatcher = watchColorSchemeChange((colorScheme) => { + if (!hasLocalStorage()) { + // remove icon - toggle not supported + document.querySelector('#theme-icon-container').remove() + toggleSystemTheme(colorScheme) + } else { + const systemTheme = localStorage.getItem('system-theme') + const localTheme = localStorage.getItem('local-theme') + // // if no local theme set - system is default + if (localTheme === null) { + toggleSystemTheme(colorScheme) + localStorage.setItem('system-theme', colorScheme || 'light') + } else { + // listen for system changes, update if any + if (colorScheme != systemTheme) { + toggleSystemTheme(colorScheme) + localStorage.setItem('system-theme', colorScheme || 'light') + // override local theme + localStorage.removeItem('local-theme') + } else { + // else load local theme + if (localTheme === 'light') { + lightModeOn() + } else if (localTheme === 'dark') { + darkModeOn() + } + } + } + document + .querySelector('.theme-toggle') + .addEventListener('click', toggleStorageTheme) + } +}) +function toggleSystemTheme(theme) { + // only support dark, else any other defaults to light + if (theme === 'dark') { + darkModeOn() + } else { + lightModeOn() + } +} +function toggleStorageTheme(e) { + const localTheme = localStorage.getItem('local-theme') + if (localTheme === 'light') { + localStorage.setItem('local-theme', 'dark') + darkModeOn() + } else if (localTheme === 'dark') { + localStorage.setItem('local-theme', 'light') + lightModeOn() + // localTheme still null + } else { + // need to check page state then set + if (darkModeState()) { + localStorage.setItem('local-theme', 'light') + lightModeOn() + } else { + localStorage.setItem('local-theme', 'dark') + darkModeOn() + } + } +} +function darkModeOn() { + document.body.classList.add('dark-mode') +} +function lightModeOn() { + document.body.classList.remove('dark-mode') +} +function darkModeState() { + return document.body.classList.contains('dark-mode') +} +function hasLocalStorage() { + return typeof Storage !== 'undefined' +} +function watchColorSchemeChange(callback) { + const darkMediaQuery = window.matchMedia('(prefers-color-scheme: dark)') + + const handleChange = (event) => { + const newColorScheme = event.matches ? 'dark' : 'light' + callback(newColorScheme) + } + darkMediaQuery.addEventListener('change', handleChange) + // handle init load value + callback(darkMediaQuery.matches ? 'dark': 'light') + // Return a function to remove the event listener + return () => darkMediaQuery.removeEventListener('change', handleChange) +}