Theme tweaks

- Better note color (more vibrant blue)
- Rework dark colors
- Fix KBD color

Author: facelessuser

docs/src/scss/palette/_colors.scss

@@ -75,18 +75,17 @@
     --md-footer-fg-color: var(--md-default-fg-color);
 
     --md-default-bg-color:               var(--md-default-bg-color--darkest);
-    --md-default-bg-color--light:        #{color.adjust(color.adjust(dracula.$drac-default-bg, $lightness: -10%, $space: oklab), $alpha: -0.3)};
-    --md-default-bg-color--lighter:      #{color.adjust(color.adjust(dracula.$drac-default-bg, $lightness: -10%, $space: oklab), $alpha: -0.7)};
-    --md-default-bg-color--lightest:     #{color.adjust(color.adjust(dracula.$drac-default-bg, $lightness: -10%, $space: oklab), $alpha: -0.88)};
-    --md-default-bg-color--trans:        #{color.adjust(color.adjust(dracula.$drac-default-bg, $lightness: -10%, $space: oklab), $alpha: -1)};
+    --md-default-bg-color--light:        #{color.adjust(color.mix(color(srgb 0 0 0), dracula.$drac-bg, 20%, $method: oklab), $alpha: -0.3)};
+    --md-default-bg-color--lighter:      #{color.adjust(color.mix(color(srgb 0 0 0), dracula.$drac-bg, 20%, $method: oklab), $alpha: -0.7)};
+    --md-default-bg-color--lightest:     #{color.adjust(color.mix(color(srgb 0 0 0), dracula.$drac-bg, 20%, $method: oklab), $alpha: -0.88)};
+    --md-default-bg-color--trans:        #{color.adjust(color.mix(color(srgb 0 0 0), dracula.$drac-bg, 20%, $method: oklab), $alpha: -1)};
 
     --md-tab-control-bg: var(--md-default-bg-color--dark);
 
     // Dark specific colors
-    --md-default-bg-color--dark:         #{color.adjust(dracula.$drac-default-bg, $lightness: -3%, $space: oklab)};
-    --md-default-bg-color--darker:       #{color.adjust(dracula.$drac-default-bg, $lightness: -6%, $space: oklab)};
-    --md-default-bg-color--darkest:      #{color.adjust(dracula.$drac-default-bg, $lightness: -10%, $space: oklab)};
-    --md-default-bg-color--ultra-dark:   #{color.adjust(dracula.$drac-default-bg, $lightness: -15%, $space: oklab)};
+    --md-default-bg-color--dark:         #{color.mix(color(srgb 0 0 0), dracula.$drac-bg, 5%, $method: oklab)};
+    --md-default-bg-color--darker:       #{color.mix(color(srgb 0 0 0), dracula.$drac-bg, 10%, $method: oklab)};
+    --md-default-bg-color--darkest:      #{color.mix(color(srgb 0 0 0), dracula.$drac-bg, 20%, $method: oklab)};
 
     // General text
     --md-text-color: var(--md-default-fg-color);
@@ -99,7 +98,7 @@
     --md-code-fg-color: #{dracula.$drac-fg};
     --md-code-bg-color: #{dracula.$drac-bg};
     --md-code-title-bg-color: #{dracula.$drac-bg};
-    --md-code-inline-bg-color: #{color.adjust(dracula.$drac-bg, $lightness: 5%, $space: oklab)};
+    --md-code-inline-bg-color: #{dracula.$drac-bg};
     --md-code-hl-operator-color: #{dracula.$drac-pink};
     --md-code-hl-punctuation-color: #{dracula.$drac-fg};
     --md-code-hl-string-color: #{dracula.$drac-yellow};
@@ -145,7 +144,7 @@
 
     // Keys colors
     --md-typeset-kbd-color: var(--md-default-fg-color--lightest);
-    --md-typeset-kbd-border-color: var(--md-default-bg-color--ultra-dark);
+    --md-typeset-kbd-border-color: var(--md-default-bg-color--dark);
     --md-typeset-kbd-accent-color: var(--md-default-fg-color--lighter);
   }
 }

docs/src/scss/palette/_dracula.scss

@@ -1,36 +1,32 @@
 @use "sass:color";
 
-$drac-fg: #f8f8f2;
-$drac-bg: #22212c;
-$drac-comment: #6272a4;
-$drac-bg: hsl(231, 15%, 18%);
-$drac-highlight: hsl(231, 25%, 25%) ;
-$drac-selection: hsl(231, 15%, 30%);
-$drac-blue: hsl(225, 27%, 51%);
-$drac-cyan: hsl(191, 97%, 77%);
-$drac-green: hsl(135, 94%, 65%);
-$drac-orange: hsl(31, 100%, 71%);
-$drac-pink: hsl(326, 100%, 74%);
-$drac-purple: hsl(265, 89%, 78%);
-$drac-red: hsl(0, 100%, 67%);
-$drac-yellow: hsl(65, 92%, 76%);
-// Non-standard Dracula colors
-$drac-grey: hsl(225, 8%, 51%);
-$drac-default-bg: color.adjust($drac-bg, $lightness: 5%);
+$drac-fg: hsl(60 30% 96.078%);
+$drac-bg: hsl(231 15% 18%);
+$drac-comment: hsl(225 27% 51%);
+$drac-highlight: hsl(231 25% 25%) ;
+$drac-selection: hsl(231 15% 30%);
+$drac-blue: hsl(225 100% 75%);
+$drac-cyan: hsl(191 97% 77%);
+$drac-green: hsl(135 94% 65%);
+$drac-orange: hsl(31 100% 71%);
+$drac-pink: hsl(326 100% 74%);
+$drac-purple: hsl(265 89% 78%);
+$drac-red: hsl(0 100% 67%);
+$drac-yellow: hsl(65 92% 76%);
+
+$drac-grey: hsl(225 8% 51%);
 
 // An approximation of the Alucard theme
 $alucard-fg: #1F1F1F;
 $alucard-bg: #F5F5F5;
 $alucard-comment: #635D97;
 $alucard-highlight: #DCDEEF;
 $alucard-selection: #CFCFDE;
-$alucard-blue: #4b5e9e;
+$alucard-blue: #3654c2;
 $alucard-cyan: #036A96;
 $alucard-green: #14720A;
 $alucard-orange: #A34D14;
 $alucard-pink: #A3134D;
 $alucard-purple: #644AC9;
 $alucard-red: #CB3A2A;
 $alucard-yellow: #836E15;
-// Non-standard Dracula colors
-$alucard-default-bg: color.adjust($alucard-bg, $lightness: 5%);

docs/theme/assets/pymdownx-extras/extra-14483b58e0.css

@@ -262,7 +262,7 @@ extra:
 
 extra_css:
   # - https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css
-  - assets/pymdownx-extras/extra-14483b58e0.css
+  - assets/pymdownx-extras/extra-9fc5a66018.css
 extra_javascript:
   - assets/pymdownx-extras/extra-loader-Ccztcqfq.js
   - https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js