elars/copnix
1
0 Fork 0
mirror of https://github.com/elwrcl/copnix.git synced 2026-10-31 14:28:02 +03:00
Code Issues Packages Projects Releases Wiki Activity

discord css

Browse Source
This commit is contained in:
elwrcl committed 2026-09-05 03:24:58 +03:00
1 parent 4164e7cbd2
commit b7747ab25a
6 files changed
+266 -5
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

modules/home/theme/discord-system24.css
+115
View File
@@ -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
+144
View File
@@ -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}
'';
};
}