discord css

.gitignore

@@ -24,3 +24,4 @@
 !*.json
 !*.glsl
 !*.py
+!*.css

flake.lock

@@ -617,11 +617,11 @@
         "nixpkgs": "nixpkgs_5"
       },
       "locked": {
-        "lastModified": 1788368401,
+        "lastModified": 1788555275,
-        "narHash": "sha256-UVlI5OCLEWgzA1h70v4iFLjq36JNEn2pzW4Tn8d+xuM=",
+        "narHash": "sha256-bynD8NCMIV0GskOpX79nSrv482f0As9WHYIzkyVSYj8=",
         "owner": "elwrcl",
         "repo": "scx_soryu",
-        "rev": "b64e40d88d1b9716937721cc73b878fbb52ff57a",
+        "rev": "e07ac4c67eb8dceedb65172d74eb25724cc58d60",
         "type": "github"
       },
       "original": {

hosts/copland.ulu.nix

@@ -56,6 +56,7 @@ in
               config.flake.homeModules.home-theme-helix
               config.flake.homeModules.home-theme-zellij
               config.flake.homeModules.home-theme-nushell
+              config.flake.homeModules.home-theme-discord
               config.flake.homeModules.home-direnv
               config.flake.homeModules.home-jujutsu
               config.flake.homeModules.home-jujutsu-difftastic

modules/home/home-nyi.ulu.nix

@@ -26,7 +26,7 @@
         ];
         labelColor = "white";
         separator = "-";
-        box = true;
+        box = false;
         shading = null;
         shadingMode = "sextants";
         logoOuter = null;

modules/home/theme/discord-system24.css

@@ -0,0 +1,115 @@
+/* import theme modules */
+@import url('https://refact0r.github.io/system24/build/system24.css');
+
+body {
+    /* font, change to '' for default discord font */
+    --font: 'DM Mono';
+    /* change to '' for default discord font */
+    --code-font: 'DM Mono';
+    /* change to '' for default discord font */
+    font-weight: 300;
+    /* text font weight. 300 is light, 400 is normal. DOES NOT AFFECT BOLD TEXT */
+    letter-spacing: -0.05ch;
+    /* decreases letter spacing for better readability. recommended on monospace fonts.*/
+
+    /* sizes */
+    --gap: 12px;
+    /* spacing between panels */
+    --divider-thickness: 4px;
+    /* thickness of unread messages divider and highlighted message borders */
+    --border-thickness: 2px;
+    /* thickness of borders around main panels. DOES NOT AFFECT OTHER BORDERS */
+    --border-hover-transition: 0.2s ease;
+    /* transition for borders when hovered */
+
+    /* animation/transition options */
+    --animations: on;
+    /* off: disable animations/transitions, on: enable animations/transitions */
+    --list-item-transition: 0.2s ease;
+    /* transition for list items */
+    --dms-icon-svg-transition: 0.4s ease;
+    /* transition for the dms icon */
+
+    /* top bar options */
+    --top-bar-height: var(--gap);
+    /* height of the top bar (discord default is 36px, old discord style is 24px, var(--gap) recommended if button position is set to titlebar) */
+    --top-bar-button-position: titlebar;
+    /* off: default position, hide: hide buttons completely, serverlist: move inbox button to server list, titlebar: move inbox button to channel titlebar (will hide title) */
+    --top-bar-title-position: off;
+    /* off: default centered position, hide: hide title completely, left: left align title (like old discord) */
+    --subtle-top-bar-title: off;
+    /* off: default, on: hide the icon and use subtle text color (like old discord) */
+
+    /* window controls */
+    --custom-window-controls: off;
+    /* off: default window controls, on: custom window controls */
+    --window-control-size: 14px;
+    /* size of custom window controls */
+
+    /* dms button options */
+    --custom-dms-icon: off;
+    /* off: use default discord icon, hide: remove icon entirely, custom: use custom icon */
+    --dms-icon-svg-url: url('');
+    /* icon svg url. MUST BE A SVG. */
+    --dms-icon-svg-size: 90%;
+    /* size of the svg (css mask-size property) */
+    --dms-icon-color-before: var(--icon-subtle);
+    /* normal icon color */
+    --dms-icon-color-after: var(--white);
+    /* icon color when button is hovered/selected */
+    --custom-dms-background: off;
+    /* off to disable, image to use a background image (must set url variable below), color to use a custom color/gradient */
+    --dms-background-image-url: url('');
+    /* url of the background image */
+    --dms-background-image-size: cover;
+    /* size of the background image (css background-size property) */
+    --dms-background-color: linear-gradient(70deg, var(--blue-2), var(--purple-2), var(--red-2));
+    /* fixed color/gradient (css background property) */
+
+    /* background image options */
+    --background-image: off;
+    /* off: no background image, on: enable background image (must set url variable below) */
+    --background-image-url: url('');
+    /* url of the background image */
+
+    /* transparency/blur options */
+    /* NOTE: TO USE TRANSPARENCY/BLUR, YOU MUST HAVE TRANSPARENT BG COLORS. FOR EXAMPLE: --bg-4: hsla(220, 15%, 10%, 0.7); */
+    --transparency-tweaks: off;
+    /* off: no changes, on: remove some elements for better transparency */
+    --remove-bg-layer: off;
+    /* off: no changes, on: remove the base --bg-3 layer for use with window transparency (WILL OVERRIDE BACKGROUND IMAGE) */
+    --panel-blur: off;
+    /* off: no changes, on: blur the background of panels */
+    --blur-amount: 12px;
+    /* amount of blur */
+    --bg-floating: var(--bg-3);
+    /* set this to a more opaque color if floating panels look too transparent. only applies if panel blur is on  */
+
+    /* other options */
+    --small-user-panel: on;
+    /* off: default user panel, on: smaller user panel like in old discord */
+
+    /* unrounding options */
+    --unrounding: on;
+    /* off: default, on: remove rounded corners from panels */
+    --round-pfp: off;
+    /* off: square profile pictures, on: rounded profile pictures (Discord default) */
+    --remove-pfp-decor: off;
+    /* off: default, on: remove profile picture decorations */
+
+    /* styling options */
+    --custom-spotify-bar: on;
+    /* off: default, on: custom text-like spotify progress bar */
+    --ascii-titles: on;
+    /* off: default, on: use ascii font for titles at the start of a channel */
+    --ascii-loader: system24;
+    /* off: default, system24: use system24 ascii loader, cats: use cats loader */
+
+    /* panel labels */
+    --panel-labels: on;
+    /* off: default, on: add labels to panels */
+    --label-color: var(--text-muted);
+    /* color of labels */
+    --label-font-weight: 500;
+    /* font weight of labels */
+}

modules/home/theme/home-theme-discord.ulu.nix

@@ -0,0 +1,144 @@
+{ ... }:
+{
+  # system24 kemuri susu generated
+  flake.homeModules.home-theme-discord =
+    { config, lib, ... }:
+    let
+      p = config.elars.theme.palette.withHashtag;
+      lighten = c: pct: "color-mix(in oklab, white ${toString pct}%, ${c})";
+      darken = c: pct: "color-mix(in oklab, black ${toString pct}%, ${c})";
+      ramp =
+        indent: name: base:
+        lib.concatMapStringsSep "\n${indent}" (x: x) [
+          "--${name}-1: ${lighten base 12};"
+          "--${name}-2: ${base};"
+          "--${name}-3: ${darken base 8};"
+          "--${name}-4: ${darken base 16};"
+          "--${name}-5: ${darken base 24};"
+        ];
+
+      rgb = hex: builtins.concatStringsSep " " (map toString (config.elars.theme.hexToRgb hex));
+      accentRgb = rgb (config.elars.theme.palette.accent or config.elars.theme.palette.base06);
+      textRgb = rgb config.elars.theme.palette.base05;
+      light = {
+        surface = "#d4c1a8";
+        surfaceVariant = "#c5b29a";
+        outline = "#a89682";
+        onSurface = "#262524";
+        secondary = "#736c5f";
+        tertiary = "#594f46";
+        error = "#bc4747";
+      };
+
+      colors = ''
+        /* ── generated from elars.theme.palette ─────────────────────── */
+        :root {
+            color-scheme: dark;
+            --colors: on;
+
+            /* text colors */
+            --text-0: var(--bg-4);
+            --text-1: ${p.base05};
+            --text-2: ${darken p.base05 6};
+            --text-3: ${p.base06};
+            --text-4: ${lighten p.base04 18};
+            --text-5: ${p.base04};
+
+            /* background colors */
+            --bg-1: ${lighten p.base02 8};
+            --bg-2: ${p.base02};
+            --bg-3: ${p.base01};
+            --bg-4: ${p.base00};
+            --hover: rgb(${accentRgb} / 0.1);
+            --active: rgb(${accentRgb} / 0.2);
+            --active-2: rgb(${accentRgb} / 0.3);
+            --message-hover: var(--hover);
+
+            /* accent colors */
+            --accent-1: var(--accent-c-1);
+            --accent-2: var(--accent-c-2);
+            --accent-3: var(--accent-c-3);
+            --accent-4: var(--accent-c-4);
+            --accent-5: var(--accent-c-5);
+            --accent-new: var(--red-2);
+            --mention: linear-gradient(to right, color-mix(in hsl, var(--accent-2), transparent 90%) 40%, transparent);
+            --mention-hover: linear-gradient(to right, color-mix(in hsl, var(--accent-2), transparent 95%) 40%, transparent);
+            --reply: linear-gradient(to right, color-mix(in hsl, var(--text-3), transparent 90%) 40%, transparent);
+            --reply-hover: linear-gradient(to right, color-mix(in hsl, var(--text-3), transparent 95%) 40%, transparent);
+
+            /* status indicators */
+            --online: var(--green-2);
+            --dnd: var(--red-2);
+            --idle: var(--yellow-2);
+            --streaming: var(--purple-2);
+            --offline: var(--text-4);
+
+            /* borders */
+            --border-light: var(--hover);
+            --border: var(--active);
+            --border-hover: var(--accent-2);
+            --button-border: rgb(${textRgb} / 0.1);
+
+            /* base ramps */
+            ${ramp "    " "accent-c" (p.accent or p.base06)}
+            ${ramp "    " "red" p.base08}
+            ${ramp "    " "green" p.base0B}
+            ${ramp "    " "blue" p.base0D}
+            ${ramp "    " "yellow" p.base0A}
+            ${ramp "    " "purple" p.base0E}
+            ${ramp "    " "cyan" p.base0C}
+        }
+
+        @media (prefers-color-scheme: light) {
+            :root {
+                color-scheme: light;
+
+                --text-0: var(--bg-4);
+                --text-1: ${light.onSurface};
+                --text-2: ${lighten light.onSurface 6};
+                --text-3: ${lighten light.onSurface 12};
+                --text-4: ${light.secondary};
+                --text-5: ${lighten light.secondary 12};
+
+                --bg-1: ${light.outline};
+                --bg-2: ${darken light.surfaceVariant 6};
+                --bg-3: ${light.surfaceVariant};
+                --bg-4: ${light.surface};
+                --hover: rgb(38 37 36 / 0.08);
+                --active: rgb(38 37 36 / 0.16);
+                --active-2: rgb(38 37 36 / 0.24);
+                --message-hover: var(--hover);
+
+                ${ramp "        " "accent-c" light.tertiary}
+                --accent-1: var(--accent-c-2);
+                --accent-2: var(--accent-c-2);
+                --accent-3: var(--accent-c-2);
+                --accent-4: var(--accent-c-3);
+                --accent-5: var(--accent-c-4);
+                --border-hover: var(--accent-c-2);
+                --button-border: rgb(38 37 36 / 0.12);
+                --mention: linear-gradient(to right, color-mix(in hsl, var(--accent-2), transparent 85%) 40%, transparent);
+                --mention-hover: linear-gradient(to right, color-mix(in hsl, var(--accent-2), transparent 92%) 40%, transparent);
+
+                ${ramp "        " "red" light.error}
+                ${ramp "        " "green" (darken p.base0B 28)}
+                ${ramp "        " "yellow" (darken p.base0A 28)}
+                ${ramp "        " "purple" (darken p.base0E 28)}
+                ${ramp "        " "blue" (darken p.base0D 28)}
+
+                --online: var(--green-3);
+                --dnd: var(--red-3);
+                --idle: var(--yellow-3);
+                --streaming: var(--purple-3);
+                --offline: var(--text-5);
+            }
+        }
+      '';
+    in
+    {
+      xdg.configFile."legcord/quickCss.css".text = ''
+        ${builtins.readFile ./discord-system24.css}
+        ${colors}
+      '';
+    };
+}