feat: new colorscheme Gruvbox Dark

README.md

@@ -123,7 +123,7 @@ The theme is written completely dependency-free in vanilla CSS.
 ## Licenses
 - This theme is licensed under the [MIT
   License](https://github.com/chrisgrieser/shimmering-focus/blob/main/LICENSE).
-- The two embedded fonts *iA Writer Quattro* and *Recursive* are licensed under
+- The two embedded fonts `iA Writer Quattro` and `Recursive` are licensed under
   the [SIL Open Font License](https://www.wikiwand.com/en/SIL_Open_Font_License).
 - The embedded *Material Icon* font is licensed under the [Apache License](https://developers.google.com/fonts/docs/material_icons#licensing).
 
@@ -157,6 +157,7 @@ __Thanks__
 	  [@keara](https://github.com/chrisgrieser/shimmering-focus/discussions/274)
 	  and inspired by the [Primary
 	  theme](https://github.com/primary-theme/obsidian).
+	+ `Gruvbox Dark` by [@jasht1](https://github.com/chrisgrieser/shimmering-focus/discussions/311).
 
 __About the developer__  
 In my day job, I am a sociologist studying the social mechanisms underlying the

source/1-colorschemes/Coffee.css

@@ -1,5 +1,4 @@
-/* 
-* Credits: https://github.com/chrisgrieser/shimmering-focus/discussions/274
+/* Credits: https://github.com/chrisgrieser/shimmering-focus/discussions/274
 * adapted from original Primary theme by `@cecilamay` https://github.com/primary-theme/obsidian
 ────────────────────────────────────────────────────────────────────────────── */
 .colorscheme-coffee {

source/1-colorschemes/Everforest.css

@@ -1,5 +1,4 @@
-/* 
-* Credits: https://github.com/chrisgrieser/shimmering-focus/discussions/291
+/* Credits: https://github.com/chrisgrieser/shimmering-focus/discussions/291
 ────────────────────────────────────────────────────────────────────────────── */
 
 .colorscheme-everforest {

source/1-colorschemes/Gruvbox Dark.css

@@ -0,0 +1,99 @@
+/* Credits: https://github.com/chrisgrieser/shimmering-focus/discussions/311
+────────────────────────────────────────────────────────────────────────────── */
+
+.colorscheme-grubox-dark {
+	&.theme-dark {
+		--color-red: hsl(6 93% 59%);
+		--color-green: hsl(61 66% 44%);
+		--color-yellow: hsl(42 95% 58%);
+		--color-blue: hsl(157 16% 58%);
+		--color-purple: hsl(344 47% 68%);
+		--color-cyan: hsl(104 35% 62%);
+		--color-orange: hsl(27 99% 55%);
+		--color-pink: var(--color-purple);
+		--color-pink-rgb: 211, 134, 155;
+		--color-red-rgb: 248, 73, 52;
+		--color-green-rgb: 184, 187, 38;
+		--color-yellow-rgb: 250, 189, 47;
+		--color-blue-rgb: 131, 165, 152;
+		--color-purple-rgb: 211, 134, 155;
+		--color-cyan-rgb: 142, 192, 124;
+		--color-orange-rgb: 254, 128, 25;
+		--color-base-00: hsl(0 0% 12%);
+		--color-base-05: hsl(0 0% 16%);
+		--color-base-10: hsl(20 3% 19%);
+		--color-base-20: hsl(20 5% 22%);
+		--color-base-25: hsl(22 7% 29%);
+		--color-base-30: hsl(27 10% 36%);
+		--color-base-35: hsl(28 11% 44%);
+		--color-base-40: hsl(30 12% 51%);
+		--color-base-50: hsl(35 17% 59%);
+		--color-base-60: hsl(39 24% 66%);
+		--color-base-75: hsl(38 20% 62%);
+		--color-base-85: hsl(40 30% 70%);
+		--color-base-90: hsl(43 59% 81%);
+		--color-base-95: hsl(46 67% 84%);
+		--color-base-100: hsl(48 87% 88%);
+
+		/* Background Colours */
+		--bg1: var(--color-base-05);
+		--bg2: var(--color-base-10);
+		--bg3: var(--color-base-05);
+		--bg4: var(--color-base-10);
+		--bg5: var(--color-base-10);
+		--bg6: var(--color-base-05);
+		--background-primary: var(--color-base-05); /* Primary background */
+		--background-primary-alt: var(--color-base-10); /* Background for surfaces on top of primary background */
+		--background-secondary: var(--color-base-05); /* Secondary background */
+		--background-secondary-alt: var(--color-base-25); /* Background for surfaces on top of secondary background */
+		--background-modifier-hover: var(--color-base-10); /* Hovered elements */
+		--background-modifier-active-hover: var(--color-base-20); /* Active hovered elements */
+		--background-modifier-border: var(--color-base-25); /* Border color */
+		--background-modifier-border-hover: var(--color-base-30); /* Border color (hover) */
+		--background-modifier-border-focus: var(--color-base-20); /* Border color (focus) */
+		--background-modifier-error-rgb: 248, 73, 52; /* Error background, RGB value */
+		--background-modifier-error: var(--color-red); /* Error background */
+		--background-modifier-error-hover: var(--color-red-rgb); /* Error background (hover) */
+		--background-modifier-success-rgb: 184, 187, 38; /* Success background, RGB value */
+		--background-modifier-success: var(--color-green); /* Success background */
+		--background-modifier-message: var(--color-base-10); /* Messages background */
+		--background-modifier-form-field: var(--color-base-20); /* Form field background */
+
+		/* Heading Colours */
+		--h1-color: var(--color-orange);
+		--h2-color: var(--color-green);
+		--h3-color: var(--color-yellow);
+		--h4-color: var(--color-red);
+		--h5-color: var(--color-cyan);
+		--h6-color: var(--color-blue);
+		--alt-heading-color: var(--color-green);
+
+		/* Text Colours */
+		--text-normal: var(--color-base-90);
+		/* --text-faint: var(--color-base-20) */
+		--icon-color: var(--color-red);
+
+		/* Interactive Colours */
+		/* red */
+		--color-accent: var(--color-red);
+		--color-accent-hsl: 358 100% 31%;
+		/* orange */
+		--interactive-accent: var(--color-orange);
+
+		/* blue */
+		--secondary-accent: var(--color-green);
+		/* orange strong */
+		--hover-accent: hsl(24 88% 45%);
+		/* aqua */
+		--link-unresolved-color: var(--color-cyan);
+
+		& ::selection {
+			background-color: var(--color-base-20); /* Gruvbox dark theme selection background color */
+			color: var(--color-base-100); /* Gruvbox dark theme selection text color  */
+		}
+
+		& :is(.nav-file-title, .nav-folder-title) {
+			color: var(--color-base-85);
+		}
+	}
+}

source/4-user-interface/sidebars.css

@@ -2,7 +2,7 @@
 /** Sidebars
 ──────────────────────────────────────────────────── */
 
-/* do not trim filenames while renaming */ 
+/* do not trim filenames while renaming */
 .tree-item-self.is-being-renamed .tree-item-inner {
 	white-space: normal;
 }

source/style-settings.yaml

@@ -275,14 +275,16 @@ settings:
     allowEmpty: false
     default: colorscheme-gamma
     options:
-      - label: Gamma
+      - label: Gamma (default)
         value: colorscheme-gamma
       - label: macOS native
         value: colorscheme-macos-native
       - label: Coffee
         value: colorscheme-coffee
       - label: Everforest
         value: colorscheme-everforest
+      - label: Gruvbox Dark (dark mode only)
+        value: colorscheme-grubox-dark
   #─────────────────────────────────────────────────────────────────────────────
 
   - id: bg-hue-light