gruvbox-material.theme.css

/**
* @name yari's system24 gruvbox theme
* @description a rework of the system24 theme, designed to be more efficient
* @author yari :3, (refact0r, Sophed)
* @version 1.0.0
*/

@import url('https://raw.githubusercontent.com/yari-dog/system24/main/src/main.css');
/* main theme css. DO NOT REMOVE */
@import url('https://raw.githubusercontent.com/yari-dog/system24/main/src/unrounding.css');
/* gets rid of all rounded corners. remove if you want rounded corners. */
@import url('https://raw.githubusercontent.com/yari-dog/system24/main/src/autohide.css');
/* hides sidebars etc until shit is hovered w/ ur mouse. has media rules built in. */

/* customize things here */
:root {
	--font: 'DM Mono';
	/* UI font name. it must be installed on your system. */
	letter-spacing: -0.05ch;
	/* decreases letter spacing for better readability. */
	font-weight: 400;
	/* UI font weight. */
	--label-font-weight: 500;
	/* font weight for panel labels. */
	--corner-text: 'catppuccin24';
	/* custom text to display in the corner. only works on windows. */
	--pad: 16px;
	/* padding between panels. */
	--txt-pad: 10px;
	/* padding inside panels to prevent labels from clipping */
	--panel-roundness: 0px;
	/* corner roundness of panels. ONLY WORKS IF unrounding.css IS REMOVED (see above). */

	/* background colors */
	--bg-0: #282828;
	/* main background color. */
	--bg-1: #1d2021;
	/* background color for secondary elements like code blocks, embeds, etc. */
	--bg-2: #3c3836;
	/* color of neutral buttons. */
	--bg-3: #504945;
	/* color of neutral buttons when hovered. */

	/* state modifiers */
	--hover: color-mix(in oklch, var(--txt-3), transparent 80%);
	/* color of hovered elements. */
	--active: color-mix(in oklch, var(--txt-3), transparent 60%);
	/* color of elements when clicked. */
	--selected: var(--active);
	/* color of selected elements. */

	/* text colors */
	--txt-dark: var(--bg-0);
	/* color of dark text on colored backgrounds. */
	--txt-link: var(--aqua);
	/* color of links. */
	--txt-0: #d4be98;
	/* color of bright/white text. */
	--txt-1: #ddc7a1;
	/* main text color. */
	--txt-2: #d4be98;
	/* color of secondary text like channel list. */
	--txt-3: #928374;
	/* color of muted text. */

	/* accent colors */
	--acc-0: var(--aqua);
	/* main accent color. */
	--acc-1: var(--green);
	/* color of accent buttons when hovered. */
	--acc-2: var(--blue);
	/* color of accent buttons when clicked. */

	/* borders */
	--border-width: 2px;
	/* panel border thickness. */
	--border-color: var(--bg-2);
	/* panel border color. */
	--border-hover-color: var(--acc-0);
	/* panel border color when hovered. */
	--border-transition: 0.2s ease;
	/* panel border transition. */

	/* status dot colors */
	--online-dot: var(--green);
	/* color of online dot. */
	--dnd-dot: var(--red);
	/* color of do not disturb dot. */
	--idle-dot: var(--yellow);
	/* color of idle dot. */
	--streaming-dot: var(--purple);
	/* color of streaming dot. */

	/* mention/ping and message colors */
	--mention-txt: var(--acc-0);
	/* color of mention text. */
	--mention-bg: color-mix(in oklch, var(--acc-0), transparent 90%);
	/* background highlight of mention text. */
	--mention-overlay: color-mix(in oklch, var(--acc-0), transparent 90%);
	/* overlay color of messages that mention you. */
	--mention-hover-overlay: color-mix(in oklch, var(--acc-0), transparent 95%);
	/* overlay color of messages that mention you when hovered. */
	--reply-overlay: var(--active);
	/* overlay color of message you are replying to. */
	--reply-hover-overlay: var(--hover);
	/* overlay color of message you are replying to when hovered. */

	/* color shades */
	--red: #ea6962;
	--purple: #d3869b;
	--yellow: #f9e2af;
	--aqua: #89b482;
	--blue: #7daea3;
	--green: #a9b665;
	--background-primary: var(--bg-0);
	--background-tertiary: var(--bg-2);
	--background-deep: var(--bg-0);
}