style: Make the picture not glare in dark theme (krahets#741)

* style: Make the picture not glare in dark theme * Update extra.css --------- Co-authored-by: Yudong Jin <[email protected]>
kjiwu · Sep 11, 2023 · 76e953a · 76e953a
1 parent 5f814d6
commit 76e953a
Showing 1 changed file with 37 additions and 15 deletions.
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
@@ -1,30 +1,43 @@
-
 /* Color Settings */
 /* https://github.com/squidfunk/mkdocs-material/blob/6b5035f5580f97532d664e3d1babf5f320e88ee9/src/assets/stylesheets/main/_colors.scss */
 /* https://squidfunk.github.io/mkdocs-material/setup/changing-the-colors/#custom-colors */
 :root > * {
-    --md-primary-fg-color: #FFFFFF;
-    --md-primary-bg-color: #1D1D20;
+  --md-primary-fg-color: #ffffff;
+  --md-primary-bg-color: #1d1d20;
+
+  --md-default-fg-color: #1d1d20;
+  --md-default-bg-color: #ffffff;
+
+  --md-accent-fg-color: #999;
 
-    --md-accent-fg-color: #999;
+  --md-admonition-fg-color: #1d1d20;
 
-    --md-typeset-color: #1D1D20;
-    --md-typeset-a-color: #2AA996;
+  --md-typeset-color: #1d1d20;
+  --md-typeset-a-color: #2aa996;
 }
 
 [data-md-color-scheme="slate"] {
-    --md-primary-fg-color: #2E303E;
-    --md-primary-bg-color: #FEFEFE;
+  --md-primary-fg-color: #22272e;
+  --md-primary-bg-color: #adbac7;
+
+  --md-default-fg-color: #adbac7;
+  --md-default-bg-color: #22272e;
+
+  --md-code-bg-color: #1c2329;
 
-    --md-accent-fg-color: #999;
+  --md-accent-fg-color: #999;
 
-    --md-typeset-color: #FEFEFE;
-    --md-typeset-a-color: #21C8B8 !important;
+  --md-admonition-fg-color: #adbac7;
+
+  --md-footer-fg-color: #adbac7;
+
+  --md-typeset-color: #adbac7;
+  --md-typeset-a-color: #21c8b8 !important;
 }
 
 /* https://github.com/squidfunk/mkdocs-material/issues/4832#issuecomment-1374891676 */
 .md-nav__link[for] {
-  color: var(--md-default-fg-color) !important
+  color: var(--md-default-fg-color) !important;
 }
 
 /* Center Markdown Tables (requires md_in_html extension) */
@@ -33,7 +46,7 @@
 }
 
 /* Reset alignment for table cells */
-.md-typeset .center-table :is(td,th):not([align]) {
+.md-typeset .center-table :is(td, th):not([align]) {
   text-align: initial;
 }
 
@@ -70,12 +83,21 @@
 
 /* font-family setting for Win10 */
 body {
-  --md-text-font-family: -apple-system,BlinkMacSystemFont,var(--md-text-font,_),Helvetica,Arial,sans-serif;
-  --md-code-font-family: var(--md-code-font,_),SFMono-Regular,Consolas,Menlo,-apple-system,BlinkMacSystemFont,var(--md-text-font,_),monospace;
+  --md-text-font-family: -apple-system, BlinkMacSystemFont,
+    var(--md-text-font, _), Helvetica, Arial, sans-serif;
+  --md-code-font-family: var(--md-code-font, _), SFMono-Regular, Consolas, Menlo,
+    -apple-system, BlinkMacSystemFont, var(--md-text-font, _), monospace;
 }
 
 /* max height of code block */
 /* https://github.com/squidfunk/mkdocs-material/issues/3444 */
 .md-typeset pre > code {
   max-height: 25rem;
 }
+
+/* Make the picture not glare in dark theme */
+[data-md-color-scheme="slate"] .md-typeset img,
+[data-md-color-scheme="slate"] .md-typeset svg,
+[data-md-color-scheme="slate"] .md-typeset video {
+  filter: brightness(0.85) invert(0.05);
+}