Skip to content

Commit

Permalink
chore(docs): Change to official auto light/dark mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@gabe565
gabe565 committed Dec 10, 2023
1 parent 17ef548 commit 9968e65
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 143 deletions.
141 changes: 0 additions & 141 deletions docs/docs/stylesheets/extra.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,144 +32,3 @@
.md-typeset img[alt$=" icon"] {
border-radius: 3px;
}

/* Workaround to support auto dark mode */
:root {
--md-default-fg-color: #000000de;
--md-default-fg-color--light: #0000008a;
--md-default-fg-color--lighter: #00000052;
--md-default-fg-color--lightest: #00000012;
--md-default-bg-color: #fff;
--md-default-bg-color--light: #ffffffb3;
--md-default-bg-color--lighter: #ffffff4d;
--md-default-bg-color--lightest: #ffffff1f;
--md-code-fg-color: #36464e;
--md-code-bg-color: #f5f5f5;
--md-code-hl-color: #ffff0080;
--md-code-hl-number-color: #d52a2a;
--md-code-hl-special-color: #db1457;
--md-code-hl-function-color: #a846b9;
--md-code-hl-constant-color: #6e59d9;
--md-code-hl-keyword-color: #3f6ec6;
--md-code-hl-string-color: #1c7d4d;
--md-code-hl-name-color: var(--md-code-fg-color);
--md-code-hl-operator-color: var(--md-default-fg-color--light);
--md-code-hl-punctuation-color: var(--md-default-fg-color--light);
--md-code-hl-comment-color: var(--md-default-fg-color--light);
--md-code-hl-generic-color: var(--md-default-fg-color--light);
--md-code-hl-variable-color: var(--md-default-fg-color--light);
--md-typeset-color: var(--md-default-fg-color);
--md-typeset-a-color: var(--md-primary-fg-color);
--md-typeset-mark-color: #ffff0080;
--md-typeset-del-color: #f5503d26;
--md-typeset-ins-color: #0bd57026;
--md-typeset-kbd-color: #fafafa;
--md-typeset-kbd-accent-color: #fff;
--md-typeset-kbd-border-color: #b8b8b8;
--md-typeset-table-color: #0000001f;
--md-typeset-table-color--light: rgba(0, 0, 0, .035);
--md-admonition-fg-color: var(--md-default-fg-color);
--md-admonition-bg-color: var(--md-default-bg-color);
--md-warning-fg-color: #000000de;
--md-warning-bg-color: #ff9;
--md-footer-fg-color: #fff;
--md-footer-fg-color--light: #ffffffb3;
--md-footer-fg-color--lighter: #ffffff73;
--md-footer-bg-color: #000000de;
--md-footer-bg-color--dark: #00000052;
--md-shadow-z1: 0 0.2rem 0.5rem #0000000d, 0 0 0.05rem #0000001a;
--md-shadow-z2: 0 0.2rem 0.5rem #0000001a, 0 0 0.05rem #00000040;
--md-shadow-z3: 0 0.2rem 0.5rem #0003, 0 0 0.05rem #00000059;
}

@media screen and (prefers-color-scheme: dark) {
:root {
--md-hue: 232;
--md-default-fg-color: hsla(var(--md-hue),75%,95%,1);
--md-default-fg-color--light: hsla(var(--md-hue),75%,90%,0.62);
--md-default-fg-color--lighter: hsla(var(--md-hue),75%,90%,0.32);
--md-default-fg-color--lightest: hsla(var(--md-hue),75%,90%,0.12);
--md-default-bg-color: hsla(var(--md-hue),15%,21%,1);
--md-default-bg-color--light: hsla(var(--md-hue),15%,21%,0.54);
--md-default-bg-color--lighter: hsla(var(--md-hue),15%,21%,0.26);
--md-default-bg-color--lightest: hsla(var(--md-hue),15%,21%,0.07);
--md-code-fg-color: hsla(var(--md-hue),18%,86%,1);
--md-code-bg-color: hsla(var(--md-hue),15%,15%,1);
--md-code-hl-color: #4287ff26;
--md-code-hl-number-color: #e6695b;
--md-code-hl-special-color: #f06090;
--md-code-hl-function-color: #c973d9;
--md-code-hl-constant-color: #9383e2;
--md-code-hl-keyword-color: #6791e0;
--md-code-hl-string-color: #2fb170;
--md-code-hl-name-color: var(--md-code-fg-color);
--md-code-hl-operator-color: var(--md-default-fg-color--light);
--md-code-hl-punctuation-color: var(--md-default-fg-color--light);
--md-code-hl-comment-color: var(--md-default-fg-color--light);
--md-code-hl-generic-color: var(--md-default-fg-color--light);
--md-code-hl-variable-color: var(--md-default-fg-color--light);
--md-typeset-color: var(--md-default-fg-color);
--md-typeset-a-color: var(--md-primary-fg-color);
--md-typeset-mark-color: #4287ff4d;
--md-typeset-kbd-color: hsla(var(--md-hue),15%,94%,0.12);
--md-typeset-kbd-accent-color: hsla(var(--md-hue),15%,94%,0.2);
--md-typeset-kbd-border-color: hsla(var(--md-hue),15%,14%,1);
--md-typeset-table-color: hsla(var(--md-hue),75%,95%,0.12);
--md-typeset-table-color--light: hsla(var(--md-hue),75%,95%,0.035);
--md-admonition-fg-color: var(--md-default-fg-color);
--md-admonition-bg-color: var(--md-default-bg-color);
--md-footer-bg-color: hsla(var(--md-hue),15%,12%,0.87);
--md-footer-bg-color--dark: hsla(var(--md-hue),15%,10%,1);
--md-shadow-z1: 0 0.2rem 0.5rem #0003,0 0 0.05rem #0000001a;
--md-shadow-z2: 0 0.2rem 0.5rem #0000004d,0 0 0.05rem #00000040;
--md-shadow-z3: 0 0.2rem 0.5rem #0006,0 0 0.05rem #00000059;
}

img[src$="#gh-light-mode-only"], img[src$="#only-light"] {
display: none;
}

img[src$="#gh-dark-mode-only"], img[src$="#only-dark"] {
display: initial;
}

[data-md-color-primary=pink] {
--md-typeset-a-color: #ed5487;
}

[data-md-color-primary=purple] {
--md-typeset-a-color: #bd78c9;
}

[data-md-color-primary=deep-purple] {
--md-typeset-a-color: #a682e3;
}

[data-md-color-primary=indigo] {
--md-typeset-a-color: #6c91d5;
}

[data-md-color-primary=teal] {
--md-typeset-a-color: #00ccb8;
}

[data-md-color-primary=green] {
--md-typeset-a-color: #71c174;
}

[data-md-color-primary=deep-orange] {
--md-typeset-a-color: #ff9575;
}

[data-md-color-primary=brown] {
--md-typeset-a-color: #c7846b;
}

[data-md-color-primary=black],[data-md-color-primary=blue-grey],[data-md-color-primary=grey],[data-md-color-primary=white] {
--md-typeset-a-color: #6c91d5;
}

[data-md-color-switching] *,[data-md-color-switching] :after,[data-md-color-switching] :before {
transition-duration: 0ms !important;
}
}
19 changes: 17 additions & 2 deletions docs/mkdocs.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,23 @@ theme:
logo: assets/icons/icon.webp
favicon: assets/icons/favicon.ico
palette:
scheme: disabled
primary: indigo
# Palette toggle for automatic mode
- media: "(prefers-color-scheme)"
toggle:
icon: material/brightness-auto
name: Switch to light mode
# Palette toggle for light mode
- media: "(prefers-color-scheme: light)"
scheme: default
toggle:
icon: material/brightness-7
name: Switch to dark mode
# Palette toggle for dark mode
- media: "(prefers-color-scheme: dark)"
scheme: slate
toggle:
icon: material/brightness-4
name: Switch to system preference
features:
- navigation.tabs
- navigation.instant
Expand Down

0 comments on commit 9968e65

Please sign in to comment.