add monochrome

README.md

@@ -50,4 +50,12 @@ based on the vim theme [gruvbox material](https://github.com/sainnhe/gruvbox-mat
 
 [theme file](https://github.com/refact0r/system24/blob/main/theme/flavors/gruvbox-material.theme.css)
 
-![image](/assets/gruv-material.png)
+![image](/assets/gruv-material.png)
+
+### monochrome
+
+A monochrome version of the default theme with mostly neutral colors.
+
+[theme file](https://github.com/refact0r/system24/blob/main/theme/flavors/monochrome.theme.css)
+
+![image](/assets/monochrome.png)

theme/flavors/monochrome.theme.css

@@ -0,0 +1,86 @@
+/**
+ * @name system24 (monochrome)
+ * @description A tui-style discord theme. Has less colors and more neutral greys and whites.
+ * @author refact0r, DeadGrip
+ * @version 1.0.0
+ * @invite nz87hXyvcy
+ * @website https://github.com/refact0r/system24
+ * @authorId 508863359777505290
+ * @authorLink https://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: 'monochrome'; /* 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: oklch(19% 0 0); /* main background color. */
+	--bg-1: oklch(23% 0 0); /* background color for secondary elements like code blocks, embeds, etc. */
+	--bg-2: oklch(27% 0 0); /* color of neutral buttons. */
+	--bg-3: oklch(31% 0 0); /* 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-0); /* color of dark text on colored backgrounds. */
+	--txt-link: var(--shade-0); /* color of links. */
+	--txt-0: oklch(90% 0 0); /* color of bright/white text. */
+	--txt-1: oklch(80% 0 0); /* main text color. */
+	--txt-2: oklch(60% 0 0); /* color of secondary text like channel list. */
+	--txt-3: oklch(40% 0 0); /* color of muted text. */
+
+	/* accent colors */
+	--acc-0: var(--shade-0); /* main accent color. */
+	--acc-1: var(--shade-1); /* color of accent buttons when hovered. */
+	--acc-2: var(--shade-2); /* color of accent buttons when clicked. */
+
+	/* borders */
+	--border-width: 2px; /* panel border thickness. */
+	--border-color: var(--bg-3); /* panel border color. */
+	--border-hover-color: var(--acc-1); /* panel border color when hovered. */
+	--border-transition: 0.2s ease; /* panel border transition. */
+
+	/* status dot colors */
+	--online-dot: var(--shade-0); /* color of online dot. */
+	--dnd-dot: oklch(80% 0.08 0); /* color of do not disturb dot. */
+	--idle-dot: oklch(80% 0.08 100); /* color of idle dot. */
+	--streaming-dot: oklch(80% 0.08 300); /* 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 */
+	--pink: oklch(90% 0 0);
+	--pink-1: oklch(70% 0 0);
+	--pink-2: oklch(50% 0 0);
+	--purple: oklch(90% 0 0);
+	--purple-1: oklch(70% 0 0);
+	--purple-2: oklch(50% 0 0);
+	--cyan: oklch(90% 0 0);
+	--yellow: oklch(90% 0 0);
+	--green: oklch(90% 0 0);
+	--green-1: oklch(70% 0 0);
+	--green-2: oklch(50% 0 0);
+	--shade-0: oklch(90% 0 0);
+	--shade-1: oklch(70% 0 0);
+	--shade-2: oklch(50% 0 0);
+}