Gruvbox Dark with Clean blue light mode

[jasht1]

The dark mode matches Gruvbox Dark material, The light mode is clean and professional with blue / coral accents.

.theme-dark.theme-dark {
	--color-red: #f84934;
	--color-green: #B8BB26;
	--color-yellow: #FABD2F;
	--color-blue: #83A598;
	--color-purple: #d3869b;
	--color-cyan: #8ec07c;
	--color-orange: #fe8019;
	--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: #1F1F1F;
	--color-base-05: #282828;
	--color-base-10: #32302f;
	--color-base-20: #3c3836;
	--color-base-25: #504945;
	--color-base-30: #665c54;
	--color-base-35: #7c6f64;
	--color-base-40: #928374;
	--color-base-50: #a89984;
	--color-base-60: #bdae93;
	--color-base-75: #b2a48c;
	--color-base-85: #c9b99a;
	--color-base-85: #d5c4a1;
	--color-base-90: #ebdbb2;
	--color-base-95: #f2e5bc;
	--color-base-100: #fbf1c7;


	/* 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 */ */
            }
        .nav-file-title, .nav-folder-title  {
               color: var(--color-base-85);
               --nav-item-color-hover: var()
        }
}

.theme-light.theme-light {
	
	/* Accent Colours */
	--color-accent-hsl: 184, 79%, 35%;
	--color-accent: hsl(184 79% 35%);
	--secondary-accent: hsl(200 50% 40%);
	--interactive-accent: hsl(200 40% 40%);
	--hover-accent: hsl(200 50% 40%);
	--link-unresolved-color: hsl(200 50% 45%);



	/* Heading Colours */
        --h1-color: hsl(232 20% 20%);
	--h2-color: hsl(232 25% 40%);
	--h3-color: hsl(232 34% 50%);
	--h4-color: hsl(232 40% 55%);
	--h5-color: hsl(232 50% 55%);
	--h6-color: hsl(232 60% 60%);
}

[chrisgrieser]

Nice one! Would it be okay if I included this as an alternative color scheme in the theme's style settings?

[jasht1]

Sure go for it!

[chrisgrieser]

Thank you, added in the latest release! (and credited you in the readme)

Note that I only added the dark mode version, since the light mode version looks still a bit too similar to the default theme and is also not really "gruvboxy". So I paired it up with the light variant from #257 instead.