docker
/
docs
mirror of https://github.com/docker/docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Enable dark mode in browser UI (#16025)

This commit is contained in:
Alexey Pyltsyn 2022-10-31 17:29:01 +03:00 committed by GitHub
parent 86659ea8a9
commit 41b42d94fe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 29 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
_scss/_base.scss
View File

@ -4,6 +4,7 @@ html {
-ms-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
color-scheme: light;
} }
body { body {

32
_scss/_night-mode.scss
View File

@ -1,18 +1,22 @@
body.night { html.night {
background-color: $bg-body-night; color-scheme: dark;
color: $body-text-night;
body {
background-color: $bg-body-night;
color: $body-text-night;
&.landing { &.landing {
background-color: $bg-body-landing-night; background-color: $bg-body-landing-night;
.header > .container { .header > .container {
background-color: $bg-header-night; background-color: $bg-header-night;
} }
.card, .cardlet { .card, .cardlet {
color: inherit; color: inherit;
background-color: $bg-card-night; background-color: $bg-card-night;
} }
footer { footer {
background-color: $bg-footer-landing-night; background-color: $bg-footer-landing-night;
}
} }
} }

4
_scss/_notes.scss
View File

@ -53,7 +53,7 @@ The available classes are:
blockquote { blockquote {
body.night & { html.night & {
// DARK THEME // DARK THEME
&:not(.important):not(.warning):not(.restricted):not(.experimental) { &:not(.important):not(.warning):not(.restricted):not(.experimental) {
@ -102,7 +102,7 @@ blockquote {
} }
} }
body:not(.night) & { html:not(.night) & {
// LIGHT THEME // LIGHT THEME
&:not(.important):not(.warning):not(.restricted):not(.experimental) { &:not(.important):not(.warning):not(.restricted):not(.experimental) {

4
_scss/_upgrade-cta.scss
View File

@ -1,11 +1,11 @@
.docker-upgrade-cta { .docker-upgrade-cta {
body.night & { html.night & {
background-color: change-color($orange-10, $alpha: 0.3); background-color: change-color($orange-10, $alpha: 0.3);
border: 1px solid $orange-10; border: 1px solid $orange-10;
p, .docker-upgrade-cta__heading { color: $white-0; } p, .docker-upgrade-cta__heading { color: $white-0; }
} }
body:not(.night) & { html:not(.night) & {
background-color: $orange-10; background-color: $orange-10;
border: 1px solid $orange-20; border: 1px solid $orange-20;
p, .docker-upgrade-cta__heading { color: inherit; } p, .docker-upgrade-cta__heading { color: inherit; }

12
assets/js/theme-switcher.js
View File

@ -22,17 +22,17 @@ const darkMode = window.matchMedia && window.matchMedia("(prefers-color-scheme:
const selectedTheme = window.localStorage ? localStorage.getItem("theme") : null; const selectedTheme = window.localStorage ? localStorage.getItem("theme") : null;
if (selectedTheme !== null) { if (selectedTheme !== null) {
if (selectedTheme === "night") _("body").classList.add("night"); if (selectedTheme === "night") _("html").classList.add("night");
} else if (darkMode) { } else if (darkMode) {
_("body").classList.add("night"); _("html").classList.add("night");
} }
function themeToggler() { function themeToggler() {
const sw = _("#switch-style"), b = _("body"); const sw = _("#switch-style"), h = _("html");
if (sw && b) { if (sw && h) {
sw.checked = b.classList.contains("night") sw.checked = h.classList.contains("night")
sw.addEventListener("change", function (){ sw.addEventListener("change", function (){
b.classList.toggle("night", this.checked) h.classList.toggle("night", this.checked)
if (window.localStorage) { if (window.localStorage) {
this.checked ? localStorage.setItem("theme", "night") : localStorage.setItem("theme", "day") this.checked ? localStorage.setItem("theme", "night") : localStorage.setItem("theme", "day")
} }