From 9968e65b130cf10065ed6f9a2c4e03fc5836dd3f Mon Sep 17 00:00:00 2001 From: Gabe Cook Date: Sun, 10 Dec 2023 03:45:30 -0600 Subject: [PATCH] chore(docs): Change to official auto light/dark mode --- docs/docs/stylesheets/extra.css | 141 -------------------------------- docs/mkdocs.yml | 19 ++++- 2 files changed, 17 insertions(+), 143 deletions(-) diff --git a/docs/docs/stylesheets/extra.css b/docs/docs/stylesheets/extra.css index 4457d2a4d..9492a170e 100644 --- a/docs/docs/stylesheets/extra.css +++ b/docs/docs/stylesheets/extra.css @@ -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; - } -} diff --git a/docs/mkdocs.yml b/docs/mkdocs.yml index 041f1e049..d14460e99 100644 --- a/docs/mkdocs.yml +++ b/docs/mkdocs.yml @@ -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