diff --git a/README.md b/README.md index 5e7c114..38b6627 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) + +### kanagawa wave + +based on the neovim theme [kanagawa.nvim](https://github.com/rebelot/kanagawa.nvim). + +[theme file](https://github.com/refact0r/system24/blob/main/theme/flavors/kanagawa-wave.theme.css) + +![image](/assets/kanagawa-wave.png) diff --git a/assets/kanagawa-wave.png b/assets/kanagawa-wave.png new file mode 100644 index 0000000..7c7134b Binary files /dev/null and b/assets/kanagawa-wave.png differ diff --git a/src/panel-labels.css b/src/panel-labels.css index c32ecbd..b03367a 100644 --- a/src/panel-labels.css +++ b/src/panel-labels.css @@ -17,6 +17,7 @@ body { .subtitleContainer_f75fb0::after, .messagesWrapper__36d07::after, .channelTextArea_f75fb0::after, + div.membersWrap_c8ffbb::after, .container_c8ffbb::after, .container__133bf > .container__9293f:after, .peopleColumn__133bf::after, @@ -51,6 +52,7 @@ body { .channelTextArea_f75fb0::after { content: 'input'; } + div.membersWrap_c8ffbb::after, .container_c8ffbb::after { content: 'members'; } @@ -64,6 +66,7 @@ body { content: 'activity'; } + .content_f75fb0 > .membersWrap_c8ffbb, .panels_c48ade, .sidebar_c48ade, .sidebarList_c48ade, diff --git a/theme/flavors/kanagawa-wave.theme.css b/theme/flavors/kanagawa-wave.theme.css new file mode 100644 index 0000000..b5467ff --- /dev/null +++ b/theme/flavors/kanagawa-wave.theme.css @@ -0,0 +1,85 @@ +/** + * @name system24 (kanagawa wave) + * @description A tui-style discord theme. + * @author refact0r + * @version 1.0.0 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/system24 + * @source https://github.com/refact0r/system24/blob/master/system24.theme.css + * @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. + +/* 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: 300; /* UI font weight. */ + --label-font-weight: 500; /* font weight for panel labels. */ + --corner-text: 'system24'; /* custom text to display in the corner. only works on windows. */ + --pad: 18px; /* padding between panels. */ + --txt-pad: 10px; /* padding inside panels to prevent labels from clipping */ + --panel-roundness: 4px; /* corner roundness of panels. ONLY WORKS IF unrounding.css IS REMOVED (see above). */ + + /* background colors */ + --bg-0: oklch(24.33% 0.017 285.06); /* main background color. */ + --bg-1: oklch(24.33% 0.017 285.06); /* background color for secondary elements like code blocks, embeds, etc. */ + --bg-2: oklch(29.07% 0.0236 284.84); /* color of neutral buttons. */ + --bg-3: oklch(33.96% 0.0279 284.82); /* color of neutral buttons when hovered. */ + + /* state modifiers */ + --hover: oklch(54% 0 0 / 0.1); /* color of hovered elements. */ + --active: oklch(54% 0 0 / 0.2); /* color of elements when clicked. */ + --selected: var(--active); /* color of selected elements. */ + + /* text colors */ + --txt-dark: var(--bg-2); /* color of dark text on colored backgrounds. */ + --txt-link: oklch(69.93% 0.122 245.55); /* color of links. */ + --txt-0: oklch(100% 0 0); /* color of bright/white text. */ + --txt-1: oklch(87.55% 0.0391 99.09); /* main text color. */ + --txt-2: oklch(74% 0.048 264.82); /* color of secondary text like channel list. */ + --txt-3: oklch(54.7% 0.0122 100.99); /* color of muted text. */ + + /* accent colors */ + --acc-0: var(--purple); /* main accent color. */ + --acc-1: var(--purple-1); /* color of accent buttons when hovered. */ + --acc-2: var(--purple-2); /* color of accent buttons when clicked. */ + + /* borders */ + --border-width: 2px; /* panel border thickness. */ + --border-color: oklch(45.58% 0.0405 284.68); /* panel border color. */ + --border-hover-color: oklch(69.37% 0.0951 263.66); /* panel border color when hovered. */ + --border-transition: 0.2s ease; /* panel border transition. */ + + /* status dot colors */ + --online-dot: oklch(63.22% 0.0698 136.92); /* color of online dot. */ + --dnd-dot: oklch(55.94% 0.167 23.09); /* color of do not disturb dot. */ + --idle-dot: oklch(75.94% 0.1073 70.87); /* color of idle dot. */ + --streaming-dot: oklch(65.19% 0.0466 298.38); /* color of streaming dot. */ + + /* mention/ping and message colors */ + --mention-txt: oklch(77.67% 0.07 202.81); /* color of mention text. */ + --mention-bg: oklch(29.07% 0.0236 284.84); /* background highlight of mention text. */ + --mention-overlay: oklch(38.9% 0.0148 79.68); /* overlay color of messages that mention you. */ + --mention-hover-overlay: var(--hover); /* overlay color of messages that mention you when hovered. */ + --reply-overlay: oklch(31.43% 0.0467 257.43); /* overlay color of message you are replying to. */ + --reply-hover-overlay: oklch(41.25% 0.0566 240.78); /* overlay color of message you are replying to when hovered. */ + + /* color shades */ + --pink: oklch(69.31% 0.1971 22.11); + --pink-1: oklch(63% 0.12 0); + --pink-2: oklch(53% 0.12 0); + --purple: oklch(69.37% 0.0951 263.66); /* new messages bar color. */ + --purple-1: oklch(74.07% 0.064 225.72); /* color of selected elements. */ + --purple-2: oklch(53% 0.12 300); + --cyan: oklch(73% 0.12 200); + --yellow: oklch(78% 0.12 80); + --green: oklch(74.77% 0.1125 128.36); + --green-1: hsl(141, 73%, 42%); + --green-2: hsl(141, 73%, 36%); +} +