Gruvbox Light

[robrecord]

A work in progress

.theme-light.theme-light {
	--color-red: rgb(157, 0, 6);
	--color-green: rgb(121, 116, 14);
	--color-yellow: rgb(181, 118, 20);
	--color-blue: rgb(7, 102, 120);
	--color-purple: rgb(143, 63, 113);
	--color-cyan: rgb(66, 123, 88);
	--color-orange: rgb(175, 58, 3);
	--color-red-rgb: 157, 0, 6;
	--color-green-rgb: 121, 116, 14;
	--color-yellow-rgb: 181, 118, 20;
	--color-blue-rgb: 7, 02, 120;
	--color-purple-rgb: 143, 63, 113;
	--color-cyan-rgb: 66, 123, 88;
	--color-orange-rgb: 175, 58, 3;
	--color-pink: var(--color-purple);
	--color-pink-rgb: var(--color-purple-rgb);
	--color-base-00: #fbf1c7;
	--color-base-05: #f2e5bc;
	--color-base-10: #ebdbb2;
	--color-base-20: #d5c4a1;
	--color-base-25: #c9b99a;
	--color-base-30: #bdae93;
	--color-base-35: #b2a48c;
	--color-base-40: #a89984;
	--color-base-50: #928374;
	--color-base-60: #7c6f64;
	--color-base-70: #665c54;
	--color-base-80: #504945;
	--color-base-85: #46403e;
	--color-base-90: #3c3836;
	--color-base-95: #32302f;
	--color-base-100: #282828;

	--bg-hue: 39;
	--bg-sat: 0%;

	--bg2: var(--color-base-05);
	--bg3: var(--color-base-10);
	--bg4: var(--color-base-20);
	--bg5: var(--color-base-25);
	--bg6: var(--color-base-30);
	/* red */
	--color-accent: var(--color-red);
	--color-accent-hsl: 358 100% 31%;
	/* orange */
	--interactive-accent: var(--color-orange);

	/* blue */
	--secondary-accent: var(--color-blue);
	/* orange strong */
	--hover-accent: hsl(24 88% 45%);
	/* aqua */
	--link-unresolved-color: var(--color-cyan);
}

[leowucn]

Expecting a corresponding dark background.

[robrecord]

Thanks for reminder; will adapt + submit when I get a chance.

[NachiketNamjoshi]

@leowucn Here is what i came up with based on this just in case anyone wants the dark version

.theme-dark.theme-dark {
	--color-red: rgb(204, 36, 29);
	--color-green: rgb(152, 151, 26);
	--color-yellow: rgb(215, 153, 33);
	--color-blue: rgb(69, 133, 136);
	--color-purple: rgb(177, 98, 34);
	--color-cyan: rgb(66, 123, 88);
	--color-orange: rgb(254, 128, 25);
	--color-red-rgb: 204, 36, 29;
	--color-green-rgb: 152, 151, 26;
	--color-yellow-rgb: 215, 153, 33;
	--color-blue-rgb: 69, 133, 136;
	--color-purple-rgb: 177, 98, 34;
	--color-cyan-rgb: 66, 123, 88;
	--color-orange-rgb: 254, 128, 25;
	--color-pink: var(--color-purple);
	--color-pink-rgb: var(--color-purple-rgb);
	--color-base-00: #1d2021;
	--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;

	--bg-hue: 0;
	--bg-sat: 17%;

	--bg2: var(--color-base-00);
	--bg3: var(--color-base-05);
	--bg4: var(--color-base-10);
	--bg5: var(--color-base-20);
	--bg6: var(--color-base-35);
	/* red */
	--color-accent: var(--color-red);
	--color-accent-hsl: 358 100% 31%;
	/* orange */
	--interactive-accent: var(--color-orange);

	/* blue */
	--secondary-accent: var(--color-blue);
	/* orange strong */
	--hover-accent: hsl(24 88% 45%);
	/* aqua */
	--link-unresolved-color: var(--color-cyan);
}

[Noep2404]

Just noticed that you didn't set the text color, I believe it should be --text-normal: var(--color-base-90). Otherwise it looks purplish and a bit weird.

[stervel]

On my end, text has no highlight color when selected. I added ::selection { background: var(color) }; myself, but I think there must be a better way to do this.

[kndewa]

This is what I added:

::selection {
        background-color: #a89984; /* Gruvbox light theme selection background color */
        color: #282828; /* Gruvbox light theme selection text color */
    }
::selection {
        background-color: #a89984; /* Gruvbox dark theme selection background color */
        color: #fbf1c7; /* Gruvbox dark theme selection text color */
    }

[robrecord]

@chrisgrieser would you like me to incorporate this before you feature it? Otherwise happy for you to alter the original.

[robrecord]

Thank you @kndewa ! 🙌🏼

[chrisgrieser]

@robrecord

I started adding community-made colorschemes directly into Shimmering Focus, so people can select them conveniently from the style settings. Considering that I recently added a community-submitted Gruvbox Dark, would you be interested to you have your Gruvbox Light theme added to Shimmering Focus as well to complement it?

[robrecord]

Thank you Chris, please feel free to free to use and adapt the theme - since I discovered Gruvbox I’ve been wishing it were seen in more places! Many thanks.

[chrisgrieser]

great, thank you! added in the latest release; and also credited you in the readme 🙂