diff --git a/README.md b/README.md index 6fc78d0..91e4657 100644 --- a/README.md +++ b/README.md @@ -70,3 +70,11 @@ based on the main palette of [rose pine](https://rosepinetheme.com/palette/). [theme file](https://github.com/refact0r/system24/blob/main/theme/flavors/rosepine.theme.css) ![image](/assets/rosepine.png) + +### gruvbox light + +based on the [gruvbox light palette](https://github.com/morhetz/gruvbox?tab=readme-ov-file#light-mode-1). + +[theme file](https://github.com/refact0r/system24/blob/main/theme/flavors/gruvbox-light.theme.css) + +![image](/assets/gruvbox-light.png) diff --git a/assets/gruvbox-light.png b/assets/gruvbox-light.png new file mode 100644 index 0000000..68fd24f Binary files /dev/null and b/assets/gruvbox-light.png differ diff --git a/theme/flavors/gruvbox-light.theme.css b/theme/flavors/gruvbox-light.theme.css new file mode 100644 index 0000000..1096c01 --- /dev/null +++ b/theme/flavors/gruvbox-light.theme.css @@ -0,0 +1,78 @@ +/** + * @name system24 (gruvbox light) + * @description A tui-style discord theme. Based on the gruvbox light color palette. + * @author refact0r, Sophed, PixeledBrain + * @version 1.0.0 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/system24 + * @authorId 508863359777505290 + * @authorLink https://www.refact0r.dev +*/ + +/* import theme modules */ +@import url('https://refact0r.github.io/system24/src/main.css'); /* main theme css. DO NOT REMOVE */ +@import url('https://refact0r.github.io/system24/src/unrounding.css'); /* gets rid of all rounded corners. remove if you want rounded corners. */ + +/* copied from gruvbox-material, replacing the background, text and accent colors for gruvbox-light */ +: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: 'gruvbox'; /* 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: #fbf1c7; /* main background color. */ + --bg-1: #ebdbb2; /* background color for secondary elements like code blocks, embeds, etc. */ + --bg-2: #d5c4a1; /* color of neutral buttons. */ + --bg-3: #bdae93; /* 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: #282828; /* color of bright/white text. */ + --txt-1: #3c3836; /* main text color. */ + --txt-2: #504945; /* color of secondary text like channel list. */ + --txt-3: #665c54; /* 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: #cc241d; + --purple: #b16286; + --yellow: #d79921; + --aqua: #689d6a; + --blue: #458588; + --green: #98971a; +}