add nord theme.

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)
+
+### nord 
+based on the nord colour palette [nord](https://www.nordtheme.com/docs/colors-and-palettes).
+
+[theme file](https://raw.githubusercontent.com/gator-git/system24/refs/heads/main/theme/flavors/nord.theme.css)
+
+![image](/assets/nord_theme.png)
+

theme/flavors/nord.theme.css

@@ -0,0 +1,73 @@
+/**
+ * @name system24 (nord dark)
+ * @description A tui-style discord theme. Based on the nord dark colour palette.
+ * @author gator-git
+ * @version 1.0.0
+*/
+
+/* 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: 400; /* UI font weight. */
+	--label-font-weight: 500; /* font weight for panel labels. */
+	--corner-text: 'nord dark'; /* 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 colours */
+	--bg-0: #2e3440; /* Main background colour using nord0 */
+	--bg-1: #333740; /* Background for secondary elements like code blocks, embeds, etc., using nord1 */
+	--bg-2: #4c5661; /* Color of neutral buttons, using nord5 */
+        --bg-3: #616e75; /* Color of neutral buttons when hovered, using nord4 */
+	/* state modifiers */
+	--hover: color-mix(in oklch, var(--txt-3), transparent 80%); /* colour of hovered elements. */
+	--active: color-mix(in oklch, var(--txt-3), transparent 60%); /* colour of elements when clicked. */
+	--selected: var(--active); /* colour of selected elements. */
+
+	/* text colours */
+	--txt-dark: var(--bg-0); /* colour of dark text on coloured backgrounds. */
+	--txt-link: var(--aqua); /* colour of links. */
+	--txt-0: #eceff4; /* colour of bright/white text. */
+	--txt-1: #e5e9f0; /* main text colour. */
+	--txt-2: #d8dee9; /* colour of secondary text like channel list. */
+	--txt-3: #b4c0d4; /* colour of muted text. */
+
+	/* accent colours */
+	--acc-0: var(--aqua); /* main accent colour. */
+	--acc-1: var(--green); /* colour of accent buttons when hovered. */
+	--acc-2: var(--blue); /* colour of accent buttons when clicked. */
+
+	/* borders */
+	--border-width: 2px; /* panel border thickness. */
+	--border-color: var(--bg-2); /* panel border colour. */
+	--border-hover-color: var(--acc-0); /* panel border colour when hovered. */
+	--border-transition: 0.2s ease; /* panel border transition. */
+
+	/* status dot colours */
+	--online-dot: var(--green); /* colour of online dot. */
+	--dnd-dot: var(--red); /* colour of do not disturb dot. */
+	--idle-dot: var(--yellow); /* colour of idle dot. */
+	--streaming-dot: var(--purple); /* colour of streaming dot. */
+
+	/* mention/ping and message colours */
+	--mention-txt: var(--acc-0); /* colour 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 colour of messages that mention you. */
+	--mention-hover-overlay: color-mix(in oklch, var(--acc-0), transparent 95%); /* overlay colour of messages that mention you when hovered. */
+	--reply-overlay: var(--active); /* overlay colour of message you are replying to. */
+	--reply-hover-overlay: var(--hover); /* overlay colour of message you are replying to when hovered. */
+
+	/* colour shades */
+	--red: #bf616a;
+	--purple: #b48ead;
+	--yellow: #ebcb8b;
+	--aqua: #88c0d0;
+	--blue: #5e81ac;
+	--green: #a3be8c;
+}