├── .github └── workflows │ └── classUpdate.yml ├── .gitignore ├── .prettierrc ├── LICENSE ├── README.md ├── archive ├── flavors │ ├── catppuccin-macchiato.theme.css │ ├── catppuccin-mocha.theme.css │ ├── gruvbox-material.theme.css │ ├── light.theme.css │ ├── monochrome.theme.css │ ├── rosepine.theme.css │ ├── spotify-text.theme.css │ ├── templates │ │ └── pywal16.theme.css │ └── vencord.theme.css ├── main.css ├── system24.theme.css └── unrounding.css ├── assets ├── cats.gif ├── old │ ├── gruv-material.png │ ├── monochrome.png │ ├── rosepine.png │ ├── screenshot.png │ ├── screenshot2.png │ └── screenshot3.png ├── preview.png └── screenshot.png ├── benchmark ├── benchmark.js ├── benchmarkresults.csv ├── benchmarkresults2.csv └── benchmarkresults3.csv ├── build └── system24.css ├── package-lock.json ├── package.json ├── scripts └── dev.js ├── src ├── ascii.css ├── colors.css ├── main.css ├── panel-labels.css ├── spotify-bar.css └── unrounding.css └── theme ├── README.md ├── flavors ├── system24-catppuccin-macchiato.theme.css ├── system24-catppuccin-mocha.theme.css ├── system24-everforest.theme.css ├── system24-nord.theme.css ├── system24-rose-pine-moon.theme.css ├── system24-rose-pine.theme.css ├── system24-tokyo-night.theme.css └── system24-vencord.theme.css └── system24.theme.css /.github/workflows/classUpdate.yml: -------------------------------------------------------------------------------- 1 | name: Update Classes 2 | 3 | on: 4 | schedule: 5 | - cron: "0 */12 * * *" # every 12 hours 6 | workflow_dispatch: 7 | repository_dispatch: #webhook trigger 8 | types: [update_class] 9 | 10 | jobs: 11 | classUpdate: 12 | runs-on: ubuntu-latest 13 | 14 | steps: 15 | - uses: actions/checkout@v4 16 | - id: update 17 | uses: metro420yt/class-update@v1-rc 18 | with: 19 | folder: src 20 | ext: css 21 | diff: "https://raw.githubusercontent.com/SyndiShanX/Update-Classes/main/Changes.txt" 22 | - uses: EndBug/add-and-commit@v9 23 | if: ${{steps.update.outputs.totalChanges > 0}} 24 | with: 25 | default_author: github_actions 26 | message: "chore: update classes >_<" 27 | fetch: true 28 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .env 3 | prepros.config 4 | /.vscode/ 5 | sass.txt 6 | .prettierignore 7 | CHECKUP.txt 8 | node_modules 9 | dist 10 | .parcel-cache 11 | package-lock.json 12 | *.pyc -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 200, 3 | "tabWidth": 4, 4 | "useTabs": false, 5 | "singleQuote": true 6 | } 7 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 refact0r 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | # system24 5 | 6 | a customizable, tui-like discord theme. inspired by [spicetify text theme](https://github.com/spicetify/spicetify-themes/tree/master/text). 7 | 8 | 9 | 10 | ## discord server 11 | 12 | need help? want to get notified about updates? have feedback? join 13 | 14 | ## install 15 | 16 | ### vencord/betterdiscord (or any client that supports theme files) 17 | 18 | 1. download the theme file, [`system24.theme.css`](https://github.com/refact0r/system24/blob/main/theme/system24.theme.css). (there should be a download button at the top right of the page) 19 | 2. drag the file into your theme folder. (there should be a button to open the theme folder in theme settings) 20 | 3. (optional) customize the theme by editing the options in `midnight.theme.css`. 21 | 22 | ### install through link 23 | 24 | add `https://refact0r.github.io/system24/build/system24.css` to your theme import links. you will need to copy the theme variables to your quickcss in order to customize the theme. 25 | 26 | ## flavors 27 | 28 | customized variants of the theme. 29 | 30 | - [catppuccin mocha](https://github.com/refact0r/system24/blob/main/theme/flavors/system24-catppuccin-mocha.theme.css) 31 | - [catppuccin macchiato](https://github.com/refact0r/system24/blob/main/theme/flavors/system24-catppuccin-macchiato.theme.css) 32 | - [everforest](https://github.com/refact0r/system24/blob/main/theme/flavors/system24-everforest.theme.css) 33 | - [rosé pine](https://github.com/refact0r/system24/blob/main/theme/flavors/system24-rose-pine.theme.css) 34 | - [rose pine moon](https://github.com/refact0r/system24/blob/main/theme/flavors/system24-rose-pine-moon.theme.css) 35 | - [tokyo night](https://github.com/refact0r/system24/blob/main/theme/flavors/system24-tokyo-night.theme.css) 36 | - [nord](https://github.com/refact0r/system24/blob/main/theme/flavors/system24-nord.theme.css) 37 | - [vencord](https://github.com/refact0r/system24/blob/main/theme/flavors/system24-vencord.theme.css) 38 | 39 | ## contributing 40 | 41 | this theme depends on [midnight](https://github.com/refact0r/midnight-discord) for its core styles. if you're looking to contribute, please consider which theme you actually want to work on. feel free to open an issue and ask if you're unsure. 42 | 43 | this theme uses a dev script to check for changes in the source css files and combine them into a build file. to run locally: 44 | 45 | 1. clone the repository. 46 | 2. run `npm i`. 47 | 3. create a `.env` file in the project root with the paths of any local theme files you want to update (comma separated) 48 | 49 | ``` 50 | DEV_OUTPUT_PATH=C:\Users\USERNAME\AppData\Roaming\Vencord\themes\system24-dev.theme.css 51 | ``` 52 | 53 | 4. run `npm run dev`. 54 | 5. make changes to any file in `/src` or the main theme file. the local theme files you listed will automatically be updated, along with the build file in `/build`. 55 | 6. make a pull request with your changes! 56 | 57 | ## credits 58 | 59 | [spicetify text theme](https://github.com/spicetify/spicetify-themes/tree/master/text) for primary design inspiration. 60 | 61 | thanks to all the [contributors](https://github.com/refact0r/system24/graphs/contributors)! 62 | -------------------------------------------------------------------------------- /archive/flavors/catppuccin-macchiato.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name system24 (catppuccin macchiato lavender) 3 | * @description A tui-style discord theme. Based on the catppuccin maccchiato color palette. 4 | * @author refact0r, bean 5 | * @version 1.0.0 6 | * @invite nz87hXyvcy 7 | * @website https://github.com/refact0r/system24 8 | * @source https://github.com/refact0r/system24/blob/master/flavors/catppuccin-mocha.theme.css 9 | * @authorId 508863359777505290 10 | * @authorLink https://www.refact0r.dev 11 | */ 12 | 13 | /* import theme modules */ 14 | @import url('https://refact0r.github.io/system24/src/main.css'); /* main theme css. DO NOT REMOVE */ 15 | @import url('https://refact0r.github.io/system24/src/unrounding.css'); /* gets rid of all rounded corners. remove if you want rounded corners. */ 16 | 17 | /* customize things here */ 18 | :root { 19 | --font: 'DM Mono'; /* UI font name. it must be installed on your system. */ 20 | letter-spacing: -0.05ch; /* decreases letter spacing for better readability. */ 21 | font-weight: 300; /* UI font weight. */ 22 | --label-font-weight: 500; /* font weight for panel labels. */ 23 | --corner-text: 'macchiato24'; /* custom text to display in the corner. only works on windows. */ 24 | --pad: 16px; /* padding between panels. */ 25 | --txt-pad: 10px; /* padding inside panels to prevent labels from clipping */ 26 | --panel-roundness: 0px; /* corner roundness of panels. ONLY WORKS IF unrounding.css IS REMOVED (see above). */ 27 | 28 | /* background colors */ 29 | --bg-0: #24273a; /* main background color. */ 30 | --bg-1: #1e2030; /* background color for secondary elements like code blocks, embeds, etc. */ 31 | --bg-2: #363a4f; /* color of neutral buttons. */ 32 | --bg-3: #494d64; /* color of neutral buttons when hovered. */ 33 | 34 | /* state modifiers */ 35 | --hover: color-mix(in oklch, var(--txt-3), transparent 80%); /* color of hovered elements. */ 36 | --active: color-mix(in oklch, var(--txt-3), transparent 60%); /* color of elements when clicked. */ 37 | --selected: var(--active); /* color of selected elements. */ 38 | 39 | /* text colors */ 40 | --txt-dark: var(--bg-0); /* color of dark text on colored backgrounds. */ 41 | --txt-link: var(--cyan); /* color of links. */ 42 | --txt-0: #eaeefa; /* color of bright/white text. */ 43 | --txt-1: #cad3f5; /* main text color. */ 44 | --txt-2: #939ab7; /* color of secondary text like channel list. */ 45 | --txt-3: #5b6078; /* color of muted text. */ 46 | 47 | /* accent colors */ 48 | --acc-0: var(--lavender); /* main accent color. */ 49 | --acc-1: var(--lavender-1); /* color of accent buttons when hovered. */ 50 | --acc-2: var(--lavender-2); /* color of accent buttons when clicked. */ 51 | 52 | /* borders */ 53 | --border-width: 2px; /* panel border thickness. */ 54 | --border-color: var(--bg-2); /* panel border color. */ 55 | --border-hover-color: var(--acc-0); /* panel border color when hovered. */ 56 | --border-transition: 0.2s ease; /* panel border transition. */ 57 | 58 | /* status dot colors */ 59 | --online-dot: var(--cyan); /* color of online dot. */ 60 | --dnd-dot: var(--pink); /* color of do not disturb dot. */ 61 | --idle-dot: var(--yellow); /* color of idle dot. */ 62 | --streaming-dot: var(--purple); /* color of streaming dot. */ 63 | 64 | /* mention/ping and message colors */ 65 | --mention-txt: var(--acc-0); /* color of mention text. */ 66 | --mention-bg: color-mix(in oklch, var(--acc-0), transparent 90%); /* background highlight of mention text. */ 67 | --mention-overlay: color-mix(in oklch, var(--acc-0), transparent 90%); /* overlay color of messages that mention you. */ 68 | --mention-hover-overlay: color-mix(in oklch, var(--acc-0), transparent 95%); /* overlay color of messages that mention you when hovered. */ 69 | --reply-overlay: var(--active); /* overlay color of message you are replying to. */ 70 | --reply-hover-overlay: var(--hover); /* overlay color of message you are replying to when hovered. */ 71 | 72 | /* color shades */ 73 | --pink: oklch(73.7% 0.125 11.19); 74 | --pink-1: oklch(63.7% 0.125 11.19); 75 | --pink-2: oklch(53.7% 0.125 11.19); 76 | --purple: oklch(77.15% 0.126 303.9); 77 | --purple-1: oklch(67.15% 0.126 303.9); 78 | --purple-2: oklch(57.15% 0.126 303.9); 79 | --cyan: oklch(78.51% 0.085 228.38); 80 | --yellow: oklch(87.9% 0.074 84.75); 81 | --green: oklch(83.5% 0.108 138.15); 82 | --green-1: oklch(73.5% 0.108 138.15); 83 | --green-2: oklch(63.5% 0.108 138.15); 84 | --lavender: oklch(81.66% 0.091 277.31); 85 | --lavender-1: oklch(71.66% 0.091 277.31); 86 | --lavender-2: oklch(61.66% 0.091 277.31); 87 | } 88 | -------------------------------------------------------------------------------- /archive/flavors/catppuccin-mocha.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name system24 (catppuccin mocha) 3 | * @description A tui-style discord theme. Based on the catppuccin mocha color palette. 4 | * @author refact0r 5 | * @version 1.0.0 6 | * @invite nz87hXyvcy 7 | * @website https://github.com/refact0r/system24 8 | * @source https://github.com/refact0r/system24/blob/master/flavors/catppuccin-mocha.theme.css 9 | * @authorId 508863359777505290 10 | * @authorLink https://www.refact0r.dev 11 | */ 12 | 13 | /* import theme modules */ 14 | @import url('https://refact0r.github.io/system24/src/main.css'); /* main theme css. DO NOT REMOVE */ 15 | @import url('https://refact0r.github.io/system24/src/unrounding.css'); /* gets rid of all rounded corners. remove if you want rounded corners. */ 16 | 17 | /* customize things here */ 18 | :root { 19 | --font: 'DM Mono'; /* UI font name. it must be installed on your system. */ 20 | letter-spacing: -0.05ch; /* decreases letter spacing for better readability. */ 21 | font-weight: 300; /* UI font weight. */ 22 | --label-font-weight: 500; /* font weight for panel labels. */ 23 | --corner-text: 'catppuccin24'; /* custom text to display in the corner. only works on windows. */ 24 | --pad: 16px; /* padding between panels. */ 25 | --txt-pad: 10px; /* padding inside panels to prevent labels from clipping */ 26 | --panel-roundness: 0px; /* corner roundness of panels. ONLY WORKS IF unrounding.css IS REMOVED (see above). */ 27 | 28 | /* background colors */ 29 | --bg-0: #1e1e2e; /* main background color. */ 30 | --bg-1: #181825; /* background color for secondary elements like code blocks, embeds, etc. */ 31 | --bg-2: #313244; /* color of neutral buttons. */ 32 | --bg-3: #45475a; /* color of neutral buttons when hovered. */ 33 | 34 | /* state modifiers */ 35 | --hover: color-mix(in oklch, var(--txt-3), transparent 80%); /* color of hovered elements. */ 36 | --active: color-mix(in oklch, var(--txt-3), transparent 60%); /* color of elements when clicked. */ 37 | --selected: var(--active); /* color of selected elements. */ 38 | 39 | /* text colors */ 40 | --txt-dark: var(--bg-0); /* color of dark text on colored backgrounds. */ 41 | --txt-link: var(--cyan); /* color of links. */ 42 | --txt-0: #eaeefa; /* color of bright/white text. */ 43 | --txt-1: #cdd6f4; /* main text color. */ 44 | --txt-2: #9399b2; /* color of secondary text like channel list. */ 45 | --txt-3: #585b70; /* color of muted text. */ 46 | 47 | /* accent colors */ 48 | --acc-0: var(--purple); /* main accent color. */ 49 | --acc-1: var(--purple-1); /* color of accent buttons when hovered. */ 50 | --acc-2: var(--purple-2); /* color of accent buttons when clicked. */ 51 | 52 | /* borders */ 53 | --border-width: 2px; /* panel border thickness. */ 54 | --border-color: var(--bg-2); /* panel border color. */ 55 | --border-hover-color: var(--acc-0); /* panel border color when hovered. */ 56 | --border-transition: 0.2s ease; /* panel border transition. */ 57 | 58 | /* status dot colors */ 59 | --online-dot: var(--green); /* color of online dot. */ 60 | --dnd-dot: var(--pink); /* color of do not disturb dot. */ 61 | --idle-dot: var(--yellow); /* color of idle dot. */ 62 | --streaming-dot: var(--purple); /* color of streaming dot. */ 63 | 64 | /* mention/ping and message colors */ 65 | --mention-txt: var(--acc-0); /* color of mention text. */ 66 | --mention-bg: color-mix(in oklch, var(--acc-0), transparent 90%); /* background highlight of mention text. */ 67 | --mention-overlay: color-mix(in oklch, var(--acc-0), transparent 90%); /* overlay color of messages that mention you. */ 68 | --mention-hover-overlay: color-mix(in oklch, var(--acc-0), transparent 95%); /* overlay color of messages that mention you when hovered. */ 69 | --reply-overlay: var(--active); /* overlay color of message you are replying to. */ 70 | --reply-hover-overlay: var(--hover); /* overlay color of message you are replying to when hovered. */ 71 | 72 | /* color shades */ 73 | --pink: #f38ba8; 74 | --pink-1: #d16c89; 75 | --pink-2: #af4e6c; 76 | --purple: #cba6f7; 77 | --purple-1: #ab87d6; 78 | --purple-2: #8d69b5; 79 | --cyan: #74c7ec; 80 | --yellow: #f9e2af; 81 | --green: #a6e3a1; 82 | --green-1: #87c282; 83 | --green-2: #68a364; 84 | } 85 | -------------------------------------------------------------------------------- /archive/flavors/gruvbox-material.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name system24 (gruvbox material) 3 | * @description A tui-style discord theme. Based on the gruvbox material color palette. 4 | * @author refact0r, Sophed 5 | * @version 1.0.0 6 | * @invite nz87hXyvcy 7 | * @website https://github.com/refact0r/system24 8 | * @authorId 508863359777505290 9 | * @authorLink https://www.refact0r.dev 10 | */ 11 | 12 | /* import theme modules */ 13 | @import url('https://refact0r.github.io/system24/src/main.css'); /* main theme css. DO NOT REMOVE */ 14 | @import url('https://refact0r.github.io/system24/src/unrounding.css'); /* gets rid of all rounded corners. remove if you want rounded corners. */ 15 | 16 | /* customize things here */ 17 | :root { 18 | --font: 'DM Mono'; /* UI font name. it must be installed on your system. */ 19 | letter-spacing: -0.05ch; /* decreases letter spacing for better readability. */ 20 | font-weight: 400; /* UI font weight. */ 21 | --label-font-weight: 500; /* font weight for panel labels. */ 22 | --corner-text: 'gruvbox material'; /* custom text to display in the corner. only works on windows. */ 23 | --pad: 16px; /* padding between panels. */ 24 | --txt-pad: 10px; /* padding inside panels to prevent labels from clipping */ 25 | --panel-roundness: 0px; /* corner roundness of panels. ONLY WORKS IF unrounding.css IS REMOVED (see above). */ 26 | 27 | /* background colors */ 28 | --bg-0: #282828; /* main background color. */ 29 | --bg-1: #1d2021; /* background color for secondary elements like code blocks, embeds, etc. */ 30 | --bg-2: #3c3836; /* color of neutral buttons. */ 31 | --bg-3: #504945; /* color of neutral buttons when hovered. */ 32 | 33 | /* state modifiers */ 34 | --hover: color-mix(in oklch, var(--txt-3), transparent 80%); /* color of hovered elements. */ 35 | --active: color-mix(in oklch, var(--txt-3), transparent 60%); /* color of elements when clicked. */ 36 | --selected: var(--active); /* color of selected elements. */ 37 | 38 | /* text colors */ 39 | --txt-dark: var(--bg-0); /* color of dark text on colored backgrounds. */ 40 | --txt-link: var(--aqua); /* color of links. */ 41 | --txt-0: #d4be98; /* color of bright/white text. */ 42 | --txt-1: #ddc7a1; /* main text color. */ 43 | --txt-2: #d4be98; /* color of secondary text like channel list. */ 44 | --txt-3: #928374; /* color of muted text. */ 45 | 46 | /* accent colors */ 47 | --acc-0: var(--aqua); /* main accent color. */ 48 | --acc-1: var(--green); /* color of accent buttons when hovered. */ 49 | --acc-2: var(--blue); /* color of accent buttons when clicked. */ 50 | 51 | /* borders */ 52 | --border-width: 2px; /* panel border thickness. */ 53 | --border-color: var(--bg-2); /* panel border color. */ 54 | --border-hover-color: var(--acc-0); /* panel border color when hovered. */ 55 | --border-transition: 0.2s ease; /* panel border transition. */ 56 | 57 | /* status dot colors */ 58 | --online-dot: var(--green); /* color of online dot. */ 59 | --dnd-dot: var(--red); /* color of do not disturb dot. */ 60 | --idle-dot: var(--yellow); /* color of idle dot. */ 61 | --streaming-dot: var(--purple); /* color of streaming dot. */ 62 | 63 | /* mention/ping and message colors */ 64 | --mention-txt: var(--acc-0); /* color of mention text. */ 65 | --mention-bg: color-mix(in oklch, var(--acc-0), transparent 90%); /* background highlight of mention text. */ 66 | --mention-overlay: color-mix(in oklch, var(--acc-0), transparent 90%); /* overlay color of messages that mention you. */ 67 | --mention-hover-overlay: color-mix(in oklch, var(--acc-0), transparent 95%); /* overlay color of messages that mention you when hovered. */ 68 | --reply-overlay: var(--active); /* overlay color of message you are replying to. */ 69 | --reply-hover-overlay: var(--hover); /* overlay color of message you are replying to when hovered. */ 70 | 71 | /* color shades */ 72 | --red: #ea6962; 73 | --purple: #d3869b; 74 | --yellow: #f9e2af; 75 | --aqua: #89b482; 76 | --blue: #7daea3; 77 | --green: #a9b665; 78 | } 79 | -------------------------------------------------------------------------------- /archive/flavors/light.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name system24 (light) 3 | * @description A tui-style discord theme. light mode. 4 | * @author refact0r 5 | * @version 1.0.0 6 | * @invite nz87hXyvcy 7 | * @website https://github.com/refact0r/system24 8 | * @source https://github.com/refact0r/system24/blob/master/flavors/light.theme.css 9 | * @authorId 508863359777505290 10 | * @authorLink https://www.refact0r.dev 11 | */ 12 | 13 | /* import theme modules */ 14 | @import url('https://refact0r.github.io/system24/src/main.css'); /* main theme css. DO NOT REMOVE */ 15 | @import url('https://refact0r.github.io/system24/src/unrounding.css'); /* gets rid of all rounded corners. remove if you want rounded corners. */ 16 | 17 | /* customize things here */ 18 | :root { 19 | --font: 'DM Mono'; /* UI font name. it must be installed on your system. */ 20 | letter-spacing: -0.05ch; /* decreases letter spacing for better readability. */ 21 | font-weight: 300; /* UI font weight. */ 22 | --label-font-weight: 500; /* font weight for panel labels. */ 23 | --corner-text: 'system24'; /* custom text to display in the corner. only works on windows. */ 24 | --pad: 16px; /* padding between panels. */ 25 | --txt-pad: 10px; /* padding inside panels to prevent labels from clipping */ 26 | --panel-roundness: 0px; /* corner roundness of panels. ONLY WORKS IF unrounding.css IS REMOVED (see above). */ 27 | 28 | /* background colors */ 29 | --bg-0: oklch(97.6% 0 0); /* main background color. */ 30 | --bg-1: oklch(92.6% 0 0); /* background color for secondary elements like code blocks, embeds, etc. */ 31 | --bg-2: oklch(87.6% 0 0); /* color of neutral buttons. */ 32 | --bg-3: oklch(82.6% 0 0); /* color of neutral buttons when hovered. */ 33 | 34 | /* state modifiers */ 35 | --hover: oklch(40% 0 0 / 0.1); /* color of hovered elements. */ 36 | --active: oklch(40% 0 0 / 0.2); /* color of elements when clicked. */ 37 | --selected: var(--active); /* color of selected elements. */ 38 | 39 | /* text colors */ 40 | --txt-dark: var(--bg-0); /* color of dark text on colored backgrounds. */ 41 | --txt-link: var(--cyan); /* color of links. */ 42 | --txt-0: oklch(100% 0 0); /* color of bright/white text. */ 43 | --txt-1: oklch(30% 0 0); /* main text color. */ 44 | --txt-2: oklch(50% 0 0); /* color of secondary text like channel list. */ 45 | --txt-3: oklch(70% 0 0); /* color of muted text. */ 46 | 47 | /* accent colors */ 48 | --acc-0: var(--purple); /* main accent color. */ 49 | --acc-1: var(--purple-1); /* color of accent buttons when hovered. */ 50 | --acc-2: var(--purple-2); /* color of accent buttons when clicked. */ 51 | 52 | /* borders */ 53 | --border-width: 2px; /* panel border thickness. */ 54 | --border-color: var(--bg-2); /* panel border color. */ 55 | --border-hover-color: var(--acc-0); /* panel border color when hovered. */ 56 | --border-transition: 0.2s ease; /* panel border transition. */ 57 | 58 | /* status dot colors */ 59 | --online-dot: var(--green); /* color of online dot. */ 60 | --dnd-dot: var(--pink); /* color of do not disturb dot. */ 61 | --idle-dot: var(--yellow); /* color of idle dot. */ 62 | --streaming-dot: var(--purple); /* color of streaming dot. */ 63 | 64 | /* mention/ping and message colors */ 65 | --mention-txt: var(--acc-0); /* color of mention text. */ 66 | --mention-bg: color-mix(in oklch, var(--acc-0), transparent 85%); /* background highlight of mention text. */ 67 | --mention-overlay: color-mix(in oklch, var(--acc-0), transparent 85%); /* overlay color of messages that mention you. */ 68 | --mention-hover-overlay: color-mix(in oklch, var(--acc-0), transparent 90%); /* overlay color of messages that mention you when hovered. */ 69 | --reply-overlay: var(--active); /* overlay color of message you are replying to. */ 70 | --reply-hover-overlay: var(--hover); /* overlay color of message you are replying to when hovered. */ 71 | 72 | /* color shades */ 73 | --pink: oklch(57% 0.13 0); 74 | --pink-1: oklch(50% 0.13 0); 75 | --pink-2: oklch(43% 0.13 0); 76 | --purple: oklch(57% 0.13 300); 77 | --purple-1: oklch(50% 0.13 300); 78 | --purple-2: oklch(43% 0.13 300); 79 | --cyan: oklch(57% 0.13 200); 80 | --yellow: oklch(71% 0.13 80); 81 | --green: oklch(57% 0.13 160); 82 | --green-1: oklch(50% 0.13 160); 83 | --green-2: oklch(43% 0.13 160); 84 | } 85 | 86 | [class^=jumpToPresentBar_] > button { 87 | color: var(--txt-1); 88 | } 89 | -------------------------------------------------------------------------------- /archive/flavors/monochrome.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name system24 (monochrome) 3 | * @description A tui-style discord theme. Has less colors and more neutral greys and whites. 4 | * @author refact0r, DeadGrip 5 | * @version 1.0.0 6 | * @invite nz87hXyvcy 7 | * @website https://github.com/refact0r/system24 8 | * @authorId 508863359777505290 9 | * @authorLink https://refact0r.dev/ 10 | */ 11 | 12 | /* import theme modules */ 13 | @import url('https://refact0r.github.io/system24/src/main.css'); /* main theme css. DO NOT REMOVE */ 14 | @import url('https://refact0r.github.io/system24/src/unrounding.css'); /* gets rid of all rounded corners. remove if you want rounded corners. */ 15 | 16 | /* customize things here */ 17 | :root { 18 | --font: 'DM Mono'; /* UI font name. it must be installed on your system. */ 19 | letter-spacing: -0.05ch; /* decreases letter spacing for better readability. */ 20 | font-weight: 300; /* UI font weight. */ 21 | --label-font-weight: 500; /* font weight for panel labels. */ 22 | --corner-text: 'monochrome'; /* custom text to display in the corner. only works on windows. */ 23 | --pad: 16px; /* padding between panels. */ 24 | --txt-pad: 10px; /* padding inside panels to prevent labels from clipping */ 25 | --panel-roundness: 0px; /* corner roundness of panels. ONLY WORKS IF unrounding.css IS REMOVED (see above). */ 26 | 27 | /* background colors */ 28 | --bg-0: oklch(19% 0 0); /* main background color. */ 29 | --bg-1: oklch(23% 0 0); /* background color for secondary elements like code blocks, embeds, etc. */ 30 | --bg-2: oklch(27% 0 0); /* color of neutral buttons. */ 31 | --bg-3: oklch(31% 0 0); /* color of neutral buttons when hovered. */ 32 | 33 | /* state modifiers */ 34 | --hover: oklch(54% 0 0 / 0.1); /* color of hovered elements. */ 35 | --active: oklch(54% 0 0 / 0.2); /* color of elements when clicked. */ 36 | --selected: var(--active); /* color of selected elements. */ 37 | 38 | /* text colors */ 39 | --txt-dark: var(--bg-0); /* color of dark text on colored backgrounds. */ 40 | --txt-link: var(--shade-0); /* color of links. */ 41 | --txt-0: oklch(90% 0 0); /* color of bright/white text. */ 42 | --txt-1: oklch(80% 0 0); /* main text color. */ 43 | --txt-2: oklch(60% 0 0); /* color of secondary text like channel list. */ 44 | --txt-3: oklch(40% 0 0); /* color of muted text. */ 45 | 46 | /* accent colors */ 47 | --acc-0: var(--shade-0); /* main accent color. */ 48 | --acc-1: var(--shade-1); /* color of accent buttons when hovered. */ 49 | --acc-2: var(--shade-2); /* color of accent buttons when clicked. */ 50 | 51 | /* borders */ 52 | --border-width: 2px; /* panel border thickness. */ 53 | --border-color: var(--bg-3); /* panel border color. */ 54 | --border-hover-color: var(--acc-1); /* panel border color when hovered. */ 55 | --border-transition: 0.2s ease; /* panel border transition. */ 56 | 57 | /* status dot colors */ 58 | --online-dot: var(--shade-0); /* color of online dot. */ 59 | --dnd-dot: oklch(80% 0.08 0); /* color of do not disturb dot. */ 60 | --idle-dot: oklch(80% 0.08 100); /* color of idle dot. */ 61 | --streaming-dot: oklch(80% 0.08 300); /* color of streaming dot. */ 62 | 63 | /* mention/ping and message colors */ 64 | --mention-txt: var(--acc-0); /* color of mention text. */ 65 | --mention-bg: color-mix(in oklch, var(--acc-0), transparent 90%); /* background highlight of mention text. */ 66 | --mention-overlay: color-mix(in oklch, var(--acc-0), transparent 90%); /* overlay color of messages that mention you. */ 67 | --mention-hover-overlay: color-mix(in oklch, var(--acc-0), transparent 95%); /* overlay color of messages that mention you when hovered. */ 68 | --reply-overlay: var(--active); /* overlay color of message you are replying to. */ 69 | --reply-hover-overlay: var(--hover); /* overlay color of message you are replying to when hovered. */ 70 | 71 | /* color shades */ 72 | --pink: oklch(90% 0 0); 73 | --pink-1: oklch(70% 0 0); 74 | --pink-2: oklch(50% 0 0); 75 | --purple: oklch(90% 0 0); 76 | --purple-1: oklch(70% 0 0); 77 | --purple-2: oklch(50% 0 0); 78 | --cyan: oklch(90% 0 0); 79 | --yellow: oklch(90% 0 0); 80 | --green: oklch(90% 0 0); 81 | --green-1: oklch(70% 0 0); 82 | --green-2: oklch(50% 0 0); 83 | --shade-0: oklch(90% 0 0); 84 | --shade-1: oklch(70% 0 0); 85 | --shade-2: oklch(50% 0 0); 86 | } 87 | -------------------------------------------------------------------------------- /archive/flavors/rosepine.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name system24 3 | * @description A tui-style discord theme. 4 | * @author refact0r 5 | * @version 1.0.0 6 | * @invite nz87hXyvcy 7 | * @website https://github.com/refact0r/system24 8 | * @source https://github.com/refact0r/system24/blob/master/system24.theme.css 9 | * @authorId 508863359777505290 10 | * @authorLink https://www.refact0r.dev 11 | */ 12 | 13 | /* import theme modules */ 14 | @import url('https://refact0r.github.io/system24/src/main.css'); /* main theme css. DO NOT REMOVE */ 15 | @import url('https://refact0r.github.io/system24/src/unrounding.css'); /* gets rid of all rounded corners. remove if you want rounded corners. */ 16 | 17 | /* customize things here */ 18 | :root { 19 | --font: 'DM Mono'; /* UI font name. it must be installed on your system. */ 20 | letter-spacing: 0; /* decreases letter spacing for better readability. */ 21 | font-weight: 400; /* UI font weight. */ 22 | --label-font-weight: 400; /* font weight for panel labels. */ 23 | --corner-text: 'system24'; /* custom text to display in the corner. only works on windows. */ 24 | --pad: 16px; /* padding between panels. */ 25 | --txt-pad: 10px; /* padding inside panels to prevent labels from clipping */ 26 | --panel-roundness: 0px; /* corner roundness of panels. ONLY WORKS IF unrounding.css IS REMOVED (see above). */ 27 | 28 | /* background colors */ 29 | --bg-0: #191724; /* main background color. */ 30 | --bg-1: #1f1d2e; /* background color for secondary elements like code blocks, embeds, etc. */ 31 | --bg-2: #26233a; /* color of neutral buttons. */ 32 | --bg-3: #403d52; /* color of neutral buttons when hovered. */ 33 | 34 | /* state modifiers */ 35 | --hover: color-mix(in srgb, var(--bg-3), transparent 60%); /* color of hovered elements. */ 36 | --active: color-mix(in srgb, var(--bg-3), transparent 80%); /* color of elements when clicked. */ 37 | --selected: var(--active); /* color of selected elements. */ 38 | 39 | /* text colors */ 40 | --txt-dark: var(--bg-0); /* color of dark text on colored backgrounds. */ 41 | --txt-link: var(--rose); /* color of links. */ 42 | --txt-0: #ffffff; /* color of bright/white text. */ 43 | --txt-1: #e0def4; /* main text color. */ 44 | --txt-2: #908caa; /* color of secondary text like channel list. */ 45 | --txt-3: #6e6a86; /* color of muted text. */ 46 | 47 | /* accent colors */ 48 | --acc-0: var(--rose); /* main accent color. */ 49 | --acc-1: var(--rose-1); /* color of accent buttons when hovered. */ 50 | --acc-2: var(--rose-2); /* color of accent buttons when clicked. */ 51 | 52 | /* borders */ 53 | --border-width: 2px; /* panel border thickness. */ 54 | --border-color: var(--bg-2); /* panel border color. */ 55 | --border-hover-color: var(--acc-0); /* panel border color when hovered. */ 56 | --border-transition: 0.2s ease; /* panel border transition. */ 57 | 58 | /* status dot colors */ 59 | --online-dot: var(--green); /* color of online dot. */ 60 | --dnd-dot: var(--pink); /* color of do not disturb dot. */ 61 | --idle-dot: var(--yellow); /* color of idle dot. */ 62 | --streaming-dot: var(--purple); /* color of streaming dot. */ 63 | 64 | /* mention/ping and message colors */ 65 | --mention-txt: var(--acc-0); /* color of mention text. */ 66 | --mention-bg: color-mix(in oklch, var(--acc-0), transparent 90%); /* background highlight of mention text. */ 67 | --mention-overlay: color-mix(in oklch, var(--acc-0), transparent 90%); /* overlay color of messages that mention you. */ 68 | --mention-hover-overlay: color-mix(in oklch, var(--acc-0), transparent 95%); /* overlay color of messages that mention you when hovered. */ 69 | --reply-overlay: var(--active); /* overlay color of message you are replying to. */ 70 | --reply-hover-overlay: var(--hover); /* overlay color of message you are replying to when hovered. */ 71 | 72 | /* color shades */ 73 | --pink: oklch(69.77% 0.1565 4.22); 74 | --pink-1: oklch(59.77% 0.1565 4.22); 75 | --pink-2: oklch(49.77% 0.1565 4.22); 76 | --purple: oklch(77.6% 0.0945 304.99); 77 | --purple-1: oklch(67.6% 0.0945 304.99); 78 | --purple-2: oklch(57.6% 0.0945 304.99); 79 | --cyan: oklch(52.77% 0.0793 227.72); 80 | --yellow: oklch(84.29% 0.11 74.6); 81 | --green: oklch(82.19% 0.0543 209.56); 82 | --green-1: oklch(72.19% 0.0543 209.56); 83 | --green-2: oklch(62.19% 0.0543 209.56); 84 | --rose: oklch(83.63% 0.0544 21.14); 85 | --rose-1: oklch(73.63% 0.0544 21.14); 86 | --rose-2: oklch(63.63% 0.0544 21.14); 87 | } 88 | -------------------------------------------------------------------------------- /archive/flavors/spotify-text.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name system24 3 | * @description A tui-style discord theme. 4 | * @author refact0r 5 | * @version 1.0.0 6 | * @invite nz87hXyvcy 7 | * @website https://github.com/refact0r/system24 8 | * @source https://github.com/refact0r/system24/blob/master/system24.theme.css 9 | * @authorId 508863359777505290 10 | * @authorLink https://www.refact0r.dev 11 | */ 12 | 13 | /* import theme modules */ 14 | @import url('https://refact0r.github.io/system24/src/main.css'); /* main theme css. DO NOT REMOVE */ 15 | @import url('https://refact0r.github.io/system24/src/unrounding.css'); /* gets rid of all rounded corners. remove if you want rounded corners. */ 16 | 17 | /* customize things here */ 18 | :root { 19 | --font: 'DM Mono'; /* UI font name. it must be installed on your system. */ 20 | letter-spacing: 0; /* decreases letter spacing for better readability. */ 21 | font-weight: 400; /* UI font weight. */ 22 | --label-font-weight: 400; /* font weight for panel labels. */ 23 | --corner-text: 'system24'; /* custom text to display in the corner. only works on windows. */ 24 | --pad: 18px; /* padding between panels. */ 25 | --txt-pad: 10px; /* padding inside panels to prevent labels from clipping */ 26 | --panel-roundness: 0px; /* corner roundness of panels. ONLY WORKS IF unrounding.css IS REMOVED (see above). */ 27 | 28 | /* background colors */ 29 | --bg-0: hsl(0, 0%, 7%); /* main background color. */ 30 | --bg-1: hsl(0, 0%, 10%); /* background color for secondary elements like code blocks, embeds, etc. */ 31 | --bg-2: hsl(0, 0%, 13%); /* color of neutral buttons. */ 32 | --bg-3: hsl(0, 0%, 16%); /* color of neutral buttons when hovered. */ 33 | 34 | /* state modifiers */ 35 | --hover: hsla(0, 0%, 40%, 0.1); /* color of hovered elements. */ 36 | --active: hsla(0, 0%, 40%, 0.2); /* color of elements when clicked. */ 37 | --selected: var(--active); /* color of selected elements. */ 38 | 39 | /* text colors */ 40 | --txt-dark: var(--bg-0); /* color of dark text on colored backgrounds. */ 41 | --txt-link: var(--cyan); /* color of links. */ 42 | --txt-0: hsl(0, 0%, 100%); /* color of bright/white text. */ 43 | --txt-1: hsl(0, 0%, 70%); /* main text color. */ 44 | --txt-2: hsl(0, 0%, 50%); /* color of secondary text like channel list. */ 45 | --txt-3: hsl(0, 0%, 30%); /* color of muted text. */ 46 | 47 | /* accent colors */ 48 | --acc-0: var(--green); /* main accent color. */ 49 | --acc-1: var(--green-1); /* color of accent buttons when hovered. */ 50 | --acc-2: var(--green-2); /* color of accent buttons when clicked. */ 51 | 52 | /* borders */ 53 | --border-width: 1px; /* panel border thickness. */ 54 | --border-color: #535353; /* panel border color. */ 55 | --border-hover-color: #1ed760; /* panel border color when hovered. */ 56 | --border-transition: 0.2s ease; /* panel border transition. */ 57 | 58 | /* status dot colors */ 59 | --online-dot: var(--green); /* color of online dot. */ 60 | --dnd-dot: var(--pink); /* color of do not disturb dot. */ 61 | --idle-dot: var(--yellow); /* color of idle dot. */ 62 | --streaming-dot: var(--purple); /* color of streaming dot. */ 63 | 64 | /* mention/ping and message colors */ 65 | --mention-txt: var(--acc-0); /* color of mention text. */ 66 | --mention-bg: color-mix(in oklch, var(--acc-0), transparent 90%); /* background highlight of mention text. */ 67 | --mention-overlay: color-mix(in oklch, var(--acc-0), transparent 90%); /* overlay color of messages that mention you. */ 68 | --mention-hover-overlay: color-mix(in oklch, var(--acc-0), transparent 95%); /* overlay color of messages that mention you when hovered. */ 69 | --reply-overlay: var(--active); /* overlay color of message you are replying to. */ 70 | --reply-hover-overlay: var(--hover); /* overlay color of message you are replying to when hovered. */ 71 | 72 | /* color shades */ 73 | --pink: oklch(73% 0.12 0); 74 | --pink-1: oklch(63% 0.12 0); 75 | --pink-2: oklch(53% 0.12 0); 76 | --purple: oklch(73% 0.12 300); 77 | --purple-1: oklch(63% 0.12 300); 78 | --purple-2: oklch(53% 0.12 300); 79 | --cyan: oklch(73% 0.12 200); 80 | --yellow: oklch(78% 0.12 80); 81 | --green: hsl(141, 76%, 48%); 82 | --green-1: hsl(141, 73%, 42%); 83 | --green-2: hsl(141, 73%, 36%); 84 | } 85 | -------------------------------------------------------------------------------- /archive/flavors/templates/pywal16.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name system24 3 | * @description A tui-style discord theme. 4 | * @author refact0r, Liyua 5 | * @version 1.0.0 6 | * @invite nz87hXyvcy 7 | * @website https://github.com/refact0r/system24 8 | * @source https://github.com/refact0r/system24/blob/master/system24.theme.css 9 | * @authorId 508863359777505290 10 | * @authorLink https://www.refact0r.dev 11 | */ 12 | 13 | /* import theme modules */ 14 | @import url('https://refact0r.github.io/system24/src/main.css'); /* main theme css. DO NOT REMOVE */ 15 | @import url('https://refact0r.github.io/system24/src/unrounding.css'); /* gets rid of all rounded corners. remove if you want rounded corners. */ 16 | 17 | /* customize things here */ 18 | :root {{ 19 | --font: 'DM Mono'; /* UI font name. it must be installed on your system. */ 20 | letter-spacing: -0.05ch; /* decreases letter spacing for better readability. */ 21 | font-weight: 300; /* UI font weight. */ 22 | --label-font-weight: 500; /* font weight for panel labels. */ 23 | --corner-text: 'system24'; /* custom text to display in the corner. only works on windows. */ 24 | --pad: 16px; /* padding between panels. */ 25 | --txt-pad: 10px; /* padding inside panels to prevent labels from clipping */ 26 | --panel-roundness: 0px; /* corner roundness of panels. ONLY WORKS IF unrounding.css IS REMOVED (see above). */ 27 | 28 | /* background colors */ 29 | --bg-0: oklch(from {background} l c h); /* main background color. */ 30 | --bg-1: oklch(from {background} calc(l + 0.04) c h); /* background color for secondary elements like code blocks, embeds, etc. */ 31 | --bg-2: oklch(from {background} calc(l + 0.08) c h); /* color of neutral buttons. */ 32 | --bg-3: oklch(from {background} calc(l + 0.12) c h); /* color of neutral buttons when hovered. */ 33 | 34 | /* state modifiers */ 35 | --hover: oklch(54% 0 0 / 0.1); /* color of hovered elements. */ 36 | --active: oklch(54% 0 0 / 0.2); /* color of elements when clicked. */ 37 | --selected: var(--active); /* color of selected elements. */ 38 | 39 | /* text colors */ 40 | --txt-dark: var(--bg-0); /* color of dark text on colored backgrounds. */ 41 | --txt-link: var(--cyan); /* color of links. */ 42 | --txt-0: oklch(from {foreground} 100% c h); /* color of bright/white text. */ 43 | --txt-1: oklch(from {foreground} 80% c h); /* main text color. */ 44 | --txt-2: oklch(from {foreground} 60% c h); /* color of secondary text like channel list. */ 45 | --txt-3: oklch(from {foreground} 40% c h); /* color of muted text. */ 46 | 47 | /* accent colors */ 48 | --acc-0: var(--purple); /* main accent color. */ 49 | --acc-1: var(--purple-1); /* color of accent buttons when hovered. */ 50 | --acc-2: var(--purple-2); /* color of accent buttons when clicked. */ 51 | 52 | /* borders */ 53 | --border-width: 2px; /* panel border thickness. */ 54 | --border-color: var(--bg-3); /* panel border color. */ 55 | --border-hover-color: var(--acc-0); /* panel border color when hovered. */ 56 | --border-transition: 0.2s ease; /* panel border transition. */ 57 | 58 | /* status dot colors */ 59 | --online-dot: var(--green); /* color of online dot. */ 60 | --dnd-dot: var(--pink); /* color of do not disturb dot. */ 61 | --idle-dot: var(--yellow); /* color of idle dot. */ 62 | --streaming-dot: var(--purple); /* color of streaming dot. */ 63 | 64 | /* mention/ping and message colors */ 65 | --mention-txt: var(--acc-0); /* color of mention text. */ 66 | --mention-bg: color-mix(in oklch, var(--acc-0), transparent 90%); /* background highlight of mention text. */ 67 | --mention-overlay: color-mix(in oklch, var(--acc-0), transparent 90%); /* overlay color of messages that mention you. */ 68 | --mention-hover-overlay: color-mix(in oklch, var(--acc-0), transparent 95%); /* overlay color of messages that mention you when hovered. */ 69 | --reply-overlay: var(--active); /* overlay color of message you are replying to. */ 70 | --reply-hover-overlay: var(--hover); /* overlay color of message you are replying to when hovered. */ 71 | 72 | /* color shades */ 73 | --pink: oklch(from {color0} l c h); 74 | --pink-1: oklch(from var(--pink) calc(l - 0.1) c h); 75 | --pink-2: oklch(from var(--pink) calc(l - 0.2) c h); 76 | --purple: oklch(from {color1} l c h); 77 | --purple-1: oklch(from var(--purple) calc(l - 0.1) c h); 78 | --purple-2: oklch(from var(--purple) calc(l - 0.2) c h); 79 | --cyan: oklch(from {color2} l c h); 80 | --yellow: oklch(from {color3} l c h); 81 | --green: oklch(from {color4} l c h); 82 | --green-1: oklch(from var(--green) calc(l - 0.1) c h); 83 | --green-2: oklch(from var(--green) calc(l - 0.2) c h); 84 | }} -------------------------------------------------------------------------------- /archive/flavors/vencord.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name system24 (vencord) 3 | * @description A tui-style discord theme. Based on Vencord's color palette. (https://vencord.dev/) 4 | * @author refact0r, makimwah 5 | * @version 1.0.0 6 | * @invite nz87hXyvcy 7 | * @website https://github.com/refact0r/system24 8 | * @source https://github.com/refact0r/system24/blob/master/system24.theme.css 9 | * @authorId 508863359777505290 10 | * @authorLink https://www.refact0r.dev 11 | */ 12 | 13 | /* import theme modules */ 14 | @import url('https://refact0r.github.io/system24/src/main.css'); /* main theme css. DO NOT REMOVE */ 15 | @import url('https://refact0r.github.io/system24/src/unrounding.css'); /* gets rid of all rounded corners. remove if you want rounded corners. */ 16 | 17 | /* customize things here */ 18 | :root { 19 | --font: 'DM Mono'; /* UI font name. it must be installed on your system. */ 20 | letter-spacing: -0.05ch; /* decreases letter spacing for better readability. */ 21 | font-weight: 300; /* UI font weight. */ 22 | --label-font-weight: 500; /* font weight for panel labels. */ 23 | --corner-text: 'vencord24'; /* custom text to display in the corner. only works on windows. */ 24 | --pad: 16px; /* padding between panels. */ 25 | --txt-pad: 10px; /* padding inside panels to prevent labels from clipping */ 26 | --panel-roundness: 0px; /* corner roundness of panels. ONLY WORKS IF unrounding.css IS REMOVED (see above). */ 27 | 28 | /* background colors */ 29 | --bg-0: oklch(28% 0.002 48); /* main background color. */ 30 | --bg-1: oklch(25% 0.001 48); /* background color for secondary elements like code blocks, embeds, etc. */ 31 | --bg-2: oklch(34% 0.004 48); /* color of neutral buttons. */ 32 | --bg-3: oklch(38% 0.006 48); /* color of neutral buttons when hovered. */ 33 | 34 | /* state modifiers */ 35 | --hover: oklch(54% 0.006 48 / 0.1); /* color of hovered elements. */ 36 | --active: oklch(54% 0.006 48 / 0.2); /* color of elements when clicked. */ 37 | --selected: var(--active); /* color of selected elements. */ 38 | 39 | /* text colors */ 40 | --txt-dark: var(--bg-0); /* color of dark text on colored backgrounds. */ 41 | --txt-link: var(--cyan); /* color of links. */ 42 | --txt-0: oklch(90% 0 0); /* color of bright/white text. */ 43 | --txt-1: #ddc7a0; /* main text color. */ 44 | --txt-2: #918274; /* color of secondary text like channel list. */ 45 | --txt-3: #918274; /* color of muted text. */ 46 | 47 | /* accent colors */ 48 | --acc-0: var(--purple); /* main accent color. */ 49 | --acc-1: var(--purple-1); /* color of accent buttons when hovered. */ 50 | --acc-2: var(--purple-1); /* color of accent buttons when clicked. */ 51 | 52 | /* borders */ 53 | --border-width: 2px; /* panel border thickness. */ 54 | --border-color: var(--bg-2); /* panel border color. */ 55 | --border-hover-color: var(--acc-0); /* panel border color when hovered. */ 56 | --border-transition: 0.2s ease; /* panel border transition. */ 57 | 58 | /* status dot colors */ 59 | --online-dot: var(--green); /* color of online dot. */ 60 | --dnd-dot: var(--pink); /* color of do not disturb dot. */ 61 | --idle-dot: var(--yellow); /* color of idle dot. */ 62 | --streaming-dot: var(--purple); /* color of streaming dot. */ 63 | 64 | /* mention/ping and message colors */ 65 | --mention-txt: var(--acc-0); /* color of mention text. */ 66 | --mention-bg: color-mix(in oklch, var(--acc-0), transparent 90%); /* background highlight of mention text. */ 67 | --mention-overlay: color-mix(in oklch, var(--acc-0), transparent 90%); /* overlay color of messages that mention you. */ 68 | --mention-hover-overlay: color-mix(in oklch, var(--acc-0), transparent 95%); /* overlay color of messages that mention you when hovered. */ 69 | --reply-overlay: var(--active); /* overlay color of message you are replying to. */ 70 | --reply-hover-overlay: var(--hover); /* overlay color of message you are replying to when hovered. */ 71 | 72 | /* color shades */ 73 | --pink: #ea6962; 74 | --pink-1: oklch(63% 0.12 0); 75 | --pink-2: oklch(53% 0.12 0); 76 | --purple: #d3869b; 77 | --purple-1: #d27390; 78 | --cyan: #7caea3; 79 | --yellow: #d8a656; 80 | --green: #a8b665; 81 | --green-1: oklch(63% 0.12 160); 82 | --green-2: oklch(53% 0.12 160); 83 | } -------------------------------------------------------------------------------- /archive/system24.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name system24 3 | * @description A tui-style discord theme. 4 | * @author refact0r 5 | * @version 1.0.0 6 | * @invite nz87hXyvcy 7 | * @website https://github.com/refact0r/system24 8 | * @source https://github.com/refact0r/system24/blob/master/system24.theme.css 9 | * @authorId 508863359777505290 10 | * @authorLink https://www.refact0r.dev 11 | */ 12 | 13 | /* import theme modules */ 14 | @import url('https://refact0r.github.io/system24/src/main.css'); /* main theme css. DO NOT REMOVE */ 15 | @import url('https://refact0r.github.io/system24/src/unrounding.css'); /* gets rid of all rounded corners. remove if you want rounded corners. */ 16 | 17 | /* customize things here */ 18 | :root { 19 | --font: 'DM Mono'; /* UI font name. it must be installed on your system. */ 20 | letter-spacing: -0.05ch; /* decreases letter spacing for better readability. */ 21 | font-weight: 300; /* UI font weight. */ 22 | --label-font-weight: 500; /* font weight for panel labels. */ 23 | --corner-text: 'system24'; /* custom text to display in the corner. only works on windows. */ 24 | --pad: 16px; /* padding between panels. */ 25 | --txt-pad: 10px; /* padding inside panels to prevent labels from clipping */ 26 | --panel-roundness: 0px; /* corner roundness of panels. ONLY WORKS IF unrounding.css IS REMOVED (see above). */ 27 | 28 | /* background colors */ 29 | --bg-0: oklch(19% 0 0); /* main background color. */ 30 | --bg-1: oklch(23% 0 0); /* background color for secondary elements like code blocks, embeds, etc. */ 31 | --bg-2: oklch(27% 0 0); /* color of neutral buttons. */ 32 | --bg-3: oklch(31% 0 0); /* color of neutral buttons when hovered. */ 33 | 34 | /* state modifiers */ 35 | --hover: oklch(54% 0 0 / 0.1); /* color of hovered elements. */ 36 | --active: oklch(54% 0 0 / 0.2); /* color of elements when clicked. */ 37 | --selected: var(--active); /* color of selected elements. */ 38 | 39 | /* text colors */ 40 | --txt-dark: var(--bg-0); /* color of dark text on colored backgrounds. */ 41 | --txt-link: var(--cyan); /* color of links. */ 42 | --txt-0: oklch(90% 0 0); /* color of bright/white text. */ 43 | --txt-1: oklch(80% 0 0); /* main text color. */ 44 | --txt-2: oklch(60% 0 0); /* color of secondary text like channel list. */ 45 | --txt-3: oklch(40% 0 0); /* color of muted text. */ 46 | 47 | /* accent colors */ 48 | --acc-0: var(--purple); /* main accent color. */ 49 | --acc-1: var(--purple-1); /* color of accent buttons when hovered. */ 50 | --acc-2: var(--purple-2); /* color of accent buttons when clicked. */ 51 | 52 | /* borders */ 53 | --border-width: 2px; /* panel border thickness. */ 54 | --border-color: var(--bg-3); /* panel border color. */ 55 | --border-hover-color: var(--acc-0); /* panel border color when hovered. */ 56 | --border-transition: 0.2s ease; /* panel border transition. */ 57 | 58 | /* status dot colors */ 59 | --online-dot: var(--green); /* color of online dot. */ 60 | --dnd-dot: var(--pink); /* color of do not disturb dot. */ 61 | --idle-dot: var(--yellow); /* color of idle dot. */ 62 | --streaming-dot: var(--purple); /* color of streaming dot. */ 63 | 64 | /* mention/ping and message colors */ 65 | --mention-txt: var(--acc-0); /* color of mention text. */ 66 | --mention-bg: color-mix(in oklch, var(--acc-0), transparent 90%); /* background highlight of mention text. */ 67 | --mention-overlay: color-mix(in oklch, var(--acc-0), transparent 90%); /* overlay color of messages that mention you. */ 68 | --mention-hover-overlay: color-mix(in oklch, var(--acc-0), transparent 95%); /* overlay color of messages that mention you when hovered. */ 69 | --reply-overlay: var(--active); /* overlay color of message you are replying to. */ 70 | --reply-hover-overlay: var(--hover); /* overlay color of message you are replying to when hovered. */ 71 | 72 | /* color shades */ 73 | --pink: oklch(73% 0.12 0); 74 | --pink-1: oklch(63% 0.12 0); 75 | --pink-2: oklch(53% 0.12 0); 76 | --purple: oklch(73% 0.12 300); 77 | --purple-1: oklch(63% 0.12 300); 78 | --purple-2: oklch(53% 0.12 300); 79 | --cyan: oklch(73% 0.12 200); 80 | --yellow: oklch(78% 0.12 80); 81 | --green: oklch(73% 0.12 160); 82 | --green-1: oklch(63% 0.12 160); 83 | --green-2: oklch(53% 0.12 160); 84 | } -------------------------------------------------------------------------------- /archive/unrounding.css: -------------------------------------------------------------------------------- 1 | /* unrounding */ 2 | ::-webkit-scrollbar-thumb, 3 | * { 4 | border-radius: 0 !important; 5 | } 6 | /* hide round masks */ 7 | [class^='listItem_'] [class^='wrapper_'] > [class^='svg_'] > mask, 8 | [class^='bannerSVGWrapper_'] > mask > circle { 9 | display: none; 10 | } 11 | [class^='mask_'] > foreignObject, 12 | [class^='svg_'] > foreignObject { 13 | mask-image: none; 14 | } 15 | 16 | /* fiil circle mask on profile avatar */ 17 | .overlay__75742:after, /* profile popup */ 18 | .overlay_c0bea0:after { 19 | /* user settings */ 20 | border-radius: 0; 21 | } 22 | 23 | /* hide status indicators */ 24 | [class^='mask_'] > rect, 25 | [class^='mask_'] > circle, 26 | [class^='mask_'] > svg { 27 | display: none; 28 | } 29 | 30 | /* re-add status indicators */ 31 | .wrapper__44b0c:has(rect)::after { 32 | content: ''; 33 | display: block; 34 | position: absolute; 35 | height: 8px; 36 | width: 8px; 37 | bottom: -4px; 38 | right: -4px; 39 | border: 2px solid var(--bg-0); 40 | } 41 | .wrapper__44b0c:has(rect[fill='#23a55a'])::after { 42 | background: var(--online-dot) !important; 43 | } 44 | .wrapper__44b0c:has(rect[fill='#f23f43'])::after { 45 | background: var(--dnd-dot) !important; 46 | } 47 | .wrapper__44b0c:has(rect[fill='#f0b232'])::after { 48 | background: var(--idle-dot) !important; 49 | } 50 | .wrapper__44b0c:has(rect[fill='#80848e'])::after { 51 | background: var(--txt-3) !important; 52 | } 53 | .wrapper__44b0c:has(rect[fill='#593695'])::after { 54 | background: var(--streaming-dot); 55 | } 56 | 57 | /* fix server list badges */ 58 | [class^='lowerBadge_'] { 59 | border: 2px solid var(--bg-0); 60 | bottom: -4px; 61 | right: -4px; 62 | } 63 | [class^='upperBadge_'] { 64 | border: 2px solid var(--bg-0); 65 | top: -4px; 66 | right: -4px; 67 | } 68 | -------------------------------------------------------------------------------- /assets/cats.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/refact0r/system24/2e662212b48d29d9e70a5304d66e8ffbc8ca4b0d/assets/cats.gif -------------------------------------------------------------------------------- /assets/old/gruv-material.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/refact0r/system24/2e662212b48d29d9e70a5304d66e8ffbc8ca4b0d/assets/old/gruv-material.png -------------------------------------------------------------------------------- /assets/old/monochrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/refact0r/system24/2e662212b48d29d9e70a5304d66e8ffbc8ca4b0d/assets/old/monochrome.png -------------------------------------------------------------------------------- /assets/old/rosepine.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/refact0r/system24/2e662212b48d29d9e70a5304d66e8ffbc8ca4b0d/assets/old/rosepine.png -------------------------------------------------------------------------------- /assets/old/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/refact0r/system24/2e662212b48d29d9e70a5304d66e8ffbc8ca4b0d/assets/old/screenshot.png -------------------------------------------------------------------------------- /assets/old/screenshot2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/refact0r/system24/2e662212b48d29d9e70a5304d66e8ffbc8ca4b0d/assets/old/screenshot2.png -------------------------------------------------------------------------------- /assets/old/screenshot3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/refact0r/system24/2e662212b48d29d9e70a5304d66e8ffbc8ca4b0d/assets/old/screenshot3.png -------------------------------------------------------------------------------- /assets/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/refact0r/system24/2e662212b48d29d9e70a5304d66e8ffbc8ca4b0d/assets/preview.png -------------------------------------------------------------------------------- /assets/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/refact0r/system24/2e662212b48d29d9e70a5304d66e8ffbc8ca4b0d/assets/screenshot.png -------------------------------------------------------------------------------- /benchmark/benchmark.js: -------------------------------------------------------------------------------- 1 | function benchmarkSelectors(cssString) { 2 | function extractSelectors(cssString) { 3 | cssString = cssString.replace(/\/\*[\s\S]*?\*\//g, '') // remove comments 4 | 5 | // remove nested brackets 6 | let result = '' 7 | let depth = 0 8 | for (let char of cssString) { 9 | if (char === '{') { 10 | depth++ 11 | } else if (char === '}') { 12 | depth-- 13 | } else if (depth === 0) { 14 | result += char 15 | } 16 | } 17 | cssString = result 18 | 19 | let selectors = cssString 20 | .split(/,(?![^(]*\))|[\n\r]+/) // split by commas or newline 21 | .map((s) => s.trim().replace(/::(?:before|after)/, '')) // trim pseudo-elements 22 | .filter(Boolean) // remove empty strings 23 | 24 | return selectors 25 | } 26 | 27 | const benchmarkSelector = (selector) => { 28 | const start = performance.now() 29 | let matches = 0 30 | for (let i = 0; i < 1000; i++) { 31 | matches = document.querySelectorAll(selector).length 32 | } 33 | return [(performance.now() - start) / 1000, matches] 34 | } 35 | 36 | return extractSelectors(cssString) 37 | .map((selector) => { 38 | try { 39 | const [time, matches] = benchmarkSelector(selector) 40 | return { selector, time, matches } 41 | } catch (error) { 42 | console.error( 43 | `Error benchmarking "${selector}": ${error.message}` 44 | ) 45 | return null 46 | } 47 | }) 48 | .filter(Boolean) 49 | .sort((a, b) => b.time - a.time) 50 | .map( 51 | ({ selector, time, matches }) => 52 | `"${selector}",${time.toFixed(6)},${matches}` 53 | ) 54 | .join('\n') 55 | .replace(/^/, 'Selector,Time (ms),Matches\n') 56 | } 57 | -------------------------------------------------------------------------------- /benchmark/benchmarkresults.csv: -------------------------------------------------------------------------------- 1 | Selector,Time (ms),Matches 2 | "[class^='chatContent_']:has([class^='messagesWrapper_']:hover)",0.256000,0 3 | "[class^='chatContent_']:has([class^='typing_']) > [class^='messagesWrapper_']",0.252800,0 4 | "[class^=chat_] > [class*=container_]",0.191900,0 5 | "[class*=embedFull_]",0.191100,1 6 | "[class*=lookFilled_][class*=colorPrimary_]",0.187400,0 7 | "#app-mount [class*=lookLink_][class*=colorPrimary_]",0.186500,0 8 | "#app-mount [class*=controlIcon_]",0.180000,0 9 | "[class^=container_] > [class^=wrapper_]",0.134800,1 10 | "[class^=container_] > [class^=wrapper_]",0.133600,1 11 | "[class^=container_] > [class^=wrapper_]",0.132400,1 12 | "[class^=message_][class*=replying_]",0.132300,0 13 | "[class^=embedVideoActions_] > [class^=centerContent_] > [class^=wrapper_]",0.131900,1 14 | "[class^=panels_] > [class^=wrapper_] > [class^=container]",0.131600,0 15 | "[class^=sidebar_] > [class^=container_]",0.131200,1 16 | "[class^=container_] > [class^=wrapper_]",0.131200,1 17 | "[class^='form_'] > [class^='wrapper_']",0.131000,0 18 | "[class^=chat_] > [class^=content_] > [class^=container_]",0.130700,1 19 | "[class^=message_][class*=mentioned_]",0.130200,0 20 | "[class^=container_] > [class^=wrapper_]",0.130000,1 21 | "[class^=panels_] > [class^=container_]",0.129600,1 22 | "#app-mount [class^=sidebar_] > [class^=container_]",0.128500,1 23 | "[class^='sidebar_'] > [class^='container_']",0.128500,1 24 | "[class^=member_]",0.126500,28 25 | "[class^=panels_]",0.126500,1 26 | "[class^='membersWrap_']",0.126400,1 27 | "[class^=navButton_][class*=navButtonActive_]",0.126000,0 28 | "[class^='sidebar_'] > [class^='container_']",0.125800,1 29 | "[class^='dot_'][class*='maskSecondary_']",0.125800,0 30 | "[class^='membersWrap_']",0.125600,1 31 | "[class^=panels_]",0.125600,1 32 | "[class^=sidebar_]",0.125500,1 33 | "[class^=centerContent_] > [class^=wrapper_] > [class^=anchor_]",0.125300,1 34 | "[class^=privateChannels_] > [class^=scroller_]",0.125200,0 35 | "[class^=childWrapper_]",0.125200,9 36 | "#app-mount [class^=partyStatus_] [class^=anchor_]",0.125200,0 37 | "[class^=iconBadge_]:not([class*=isCurrentUserConnected_])",0.125200,1 38 | "[class^='toolbar_'] > [class^='search_']",0.125100,1 39 | "[class^=container_] > [class^=base_]",0.125100,1 40 | "[class^='panels_']",0.125000,1 41 | "[class^='status_'][style='background-color: rgb(242, 63, 67);']",0.124900,0 42 | "[class^=chatContent_] > [class^=messagesWrapper_]",0.124800,1 43 | "[class^='form_'] [class^='channelTextArea_']",0.124700,1 44 | "#app-mount [class^=sidebar_]",0.124700,1 45 | "[class^=members_]",0.124500,1 46 | "[class*=bannerVisible_] [class^=headerContent_]",0.124500,0 47 | "[class^=form_] [class^=channelTextArea_]",0.124500,1 48 | "[class^='typing_']",0.124500,0 49 | "[class^='upperBadge_']",0.124500,1 50 | "[class^=tabBody_]",0.124400,0 51 | "[class^=resizeHandle_]",0.124200,0 52 | "[class^='userPanelInner_']",0.124200,0 53 | "[class^=attachedBars_]",0.124100,0 54 | "[class^=container_] > [class^=base_]",0.124100,1 55 | "[class^=gifFavoriteButton_]",0.124000,0 56 | "[class^=membersWrap_]",0.124000,1 57 | "[class^=panels_] > [class^=panel_]",0.124000,0 58 | "[class^='searchResultsWrap_']",0.124000,0 59 | "[class^=profilePanel_] > [class^=userPanelOuter_]",0.123900,0 60 | "[class^=chat_]",0.123900,1 61 | "[class^=sidebar_]",0.123900,1 62 | "[class^='form_'] [class^='channelTextArea_']",0.123900,1 63 | "[class^=panels_] > [class^=panel_]",0.123800,0 64 | "[class^='membersWrap_']",0.123800,1 65 | "[class^='nowPlayingColumn_']",0.123800,0 66 | "[class^=replyBar_]",0.123700,0 67 | "[class^=iconWrapper_]",0.123700,7 68 | "[class^='status_'][style='background-color: rgb(35, 165, 90);']",0.123700,0 69 | "[class^=searchResultsWrap_]",0.123700,0 70 | "[class^='unreadPill_'][class*='endCap_']",0.123600,1 71 | "[class^=overlayBottom_] > [class^=text-]",0.123600,0 72 | "[class^=privateChannels_]",0.123600,0 73 | "[class^=categoryText_]",0.123500,0 74 | "[class^=profilePanel_]",0.123500,0 75 | "[class^='searchResultsWrap_']",0.123400,0 76 | "[class^='membersWrap_']",0.123400,1 77 | "[class^='peopleListItem_']",0.123400,0 78 | "[class^='status_'][style='background-color: rgb(240, 178, 50);']",0.123300,0 79 | "[class^=tabBody_]",0.123200,0 80 | "[class^=privateChannels_]",0.123200,0 81 | "[class^='status_'][style='background-color: rgb(128, 132, 142);']",0.123200,0 82 | "[class^='chatContent_'] > [class^='messagesWrapper_']",0.123100,1 83 | "[class^='profilePanel_']",0.123100,0 84 | "[class^=videoControls_]",0.123000,0 85 | "[class^=sidebar_]",0.123000,1 86 | "[class^=searchAnswer_]",0.122800,0 87 | "[class^='profilePanel_']",0.122800,0 88 | "[class^='peopleColumn_']",0.122800,0 89 | "[class^='nowPlayingColumn_']",0.122800,0 90 | "[class^='sectionDivider_']",0.122800,1 91 | "[class^=notAppAsidePanel_] > [class^=layerContainer_]",0.122700,2 92 | "[class^='privateChannels_']",0.122700,0 93 | "[class^=privateChannels_]",0.122500,0 94 | "[class^=container_] > [class^=base_]",0.122500,1 95 | "[class^='lowerBadge_']",0.122400,0 96 | "[class^=searchResultsWrap_]",0.122400,0 97 | "[class^=threadSuggestionBar_]",0.122200,0 98 | "[class^='chatContent_'] > [class^='messagesWrapper_']",0.122200,1 99 | "[class^=searchResultsWrap_]",0.122200,0 100 | "[class^=peopleColumn_]",0.122200,0 101 | "[class^='nowPlayingColumn_']",0.122100,0 102 | "[class^=searchFilter_]",0.122000,0 103 | "[class^=privateChannels_]",0.122000,0 104 | "[class^=nowPlayingColumn_]",0.122000,0 105 | "[class^='folderIconWrapper_'][style='background-color: rgba(88, 101, 242, 0.4);']",0.121900,6 106 | "[class^='container_'] > [class^='base_']",0.121900,1 107 | "[class^='panels_']",0.121800,1 108 | "[class^=friendRequestsButton_] [class^=numberBadge_]",0.121600,0 109 | "[class^=peopleColumn_]",0.121400,0 110 | "#app-mount [class^=partyStatus_]",0.121300,0 111 | "[class^='form_'] [class^='channelTextArea_']",0.121100,1 112 | "[class^='privateChannels_']",0.121100,0 113 | "[class^='peopleColumn_']",0.120900,0 114 | "#app-mount [class^='divider_']",0.120100,3 115 | ".wrapper_c51b4e:has(rect[fill='#593695'])",0.109200,0 116 | ".wrapper_c51b4e:has(rect[fill='#80848e'])",0.107600,0 117 | ".wrapper_c51b4e:has(rect[fill='#23a55a'])",0.096000,18 118 | ".wrapper_c51b4e:has(rect[fill='#f0b232'])",0.095800,4 119 | ".wrapper_c51b4e:has(rect[fill='#f23f43'])",0.089600,8 120 | ".wrapper_c51b4e:has(rect)",0.087900,30 121 | "[style='opacity: 1; background-color: rgb(35, 165, 90);']",0.074800,0 122 | "svg[style='color: rgb(88, 101, 242);']",0.062200,8 123 | "#app-mount button path[fill='var(--white-500)']",0.061600,0 124 | "[role='button'] path[fill='var(--white-500)']",0.060400,0 125 | "[class^='mask_'] > svg",0.060400,2 126 | "[class^='listItem_'] [class^='wrapper_'] > [class^='svg_'] > mask",0.058600,48 127 | "[class^='bannerSVGWrapper_'] > mask > circle",0.056000,1 128 | "svg[class^=slider_] > rect[fill='white']",0.055400,0 129 | "[class^='mask_'] > rect",0.055400,30 130 | ":root",0.055200,1 131 | "[class^='mask_'] > foreignObject",0.055100,32 132 | "[class^='svg_'] > foreignObject",0.054900,70 133 | "[class^='mask_'] > circle",0.054300,1 134 | ":root",0.053800,1 135 | ":root",0.052300,1 136 | "[class^=jumpToPresentBar_] > button",0.051700,0 137 | "aside[class^='profilePanel_']",0.051000,0 138 | ".custom-profile-theme [class*=color_][class*=text_]",0.049900,0 139 | ".horizontal_bba380 > .flex_bba380",0.044800,0 140 | ".container_fb4810",0.044300,0 141 | ".container_a4d4d9",0.043900,1 142 | ".clipContainer_b11c5e",0.043900,0 143 | ".content_a7d72e",0.043600,1 144 | ".container_fc4f04",0.043600,1 145 | ".scroller_e2e187",0.043400,1 146 | "html.theme-light",0.043400,0 147 | ".platform-osx [class^=container_] > [class^=wrapper_]",0.043300,0 148 | ".container_fc4f04",0.043300,1 149 | ".container_fc4f04",0.043300,1 150 | ".container_adcaac",0.043200,0 151 | ".attachButton_f298d4",0.043200,1 152 | ".wrapper_fea3ef",0.043200,1 153 | ".container_d1c246",0.043200,0 154 | ".container_e85446:has(div[style='background-color: rgb(35, 165, 90);'])",0.043100,0 155 | ".textArea_d0696b",0.043000,2 156 | ".chat_a7d72e",0.043000,1 157 | ".wordmarkWindows_a934d8 > svg",0.043000,1 158 | ".vc-spotify-time-right",0.042900,1 159 | ".theme-dark",0.042900,3 160 | ".container_c75f85",0.042800,0 161 | ".form_a7d72e",0.042800,1 162 | ".container_a6d69a",0.042800,0 163 | ".vc-spotify-time-left",0.042800,1 164 | ".form_a7d72e",0.042700,1 165 | ".container_b2ca13",0.042700,1 166 | ".container_a6d69a",0.042700,0 167 | ".container_c2739c",0.042700,0 168 | ".tabBody_c2739c",0.042700,0 169 | ".vc-spotify-time-right",0.042700,1 170 | ".container_e85446 > [class^='svg_'] > foreignObject > [class^='status_']",0.042600,0 171 | ".container_d1c246",0.042600,0 172 | ".panels_a4d4d9",0.042600,1 173 | ".container_adcaac",0.042600,0 174 | ".container_c2739c",0.042500,0 175 | ".scroller_fb4810",0.042500,0 176 | ".form_a7d72e",0.042400,1 177 | ".newMessagesBar_cf58b5",0.042400,1 178 | ".animatedContainer_fd6364",0.042400,1 179 | ".vc-spotify-time-left",0.042400,1 180 | ".scroller_fb4810",0.042300,0 181 | ".wordmarkWindows_a934d8",0.042300,1 182 | ".container_e85446:has(div[style='background-color: rgb(35, 165, 90);'])",0.042300,0 183 | ".grabber_c7a159",0.042200,1 184 | ".container_a6d69a",0.042100,0 185 | ".scroller_fb4810",0.042100,0 186 | ".scroller_fb4810",0.042100,0 187 | ".container_fc4f04",0.041600,1 188 | "*",0.036500,6407 189 | "#vc-spotify-progress-bar [class^='bar_']",0.000300,1 190 | "#app-mount #vc-spotify-player",0.000200,1 191 | "#vc-spotify-player",0.000200,1 192 | "#vc-spotify-player",0.000200,1 193 | "#vc-spotify-progress-bar",0.000200,1 194 | "::-webkit-scrollbar-thumb",0.000200,0 195 | "#vc-spotify-player",0.000100,1 -------------------------------------------------------------------------------- /benchmark/benchmarkresults2.csv: -------------------------------------------------------------------------------- 1 | Selector,Time (ms),Matches,Total 2 | [class*=buttonColor_],0.4697,0,38.4736 3 | [class*=embedFull_],0.446,2, 4 | [class^='chatContent_']:has([class^='typing_']:hover),0.4342,0, 5 | #app-mount [class*=lookLink_][class*=colorPrimary_],0.4331,0, 6 | [class*=lookFilled_][class*=colorPrimary_],0.4315,0, 7 | [class^='chatContent_']:has([class^='messagesWrapper_']:hover),0.4189,0, 8 | [class^='chatContent_']:has([class^='typing_']) > [class^='messagesWrapper_'] > [class^='jumpToPresentBar_'],0.4146,0, 9 | #app-mount [class*=controlIcon_],0.3911,0, 10 | [class^=searchFilter_],0.3541,0, 11 | [class^='newBadge_'],0.3385,0, 12 | [class^=friendRequestsButton_] [class^=numberBadge_],0.3314,0, 13 | [class^=chat_] > [class*=container_],0.32,0, 14 | [class^=videoControls_],0.3099,0, 15 | [class*=backgroundAccent_],0.3097,0, 16 | [class^=searchAnswer_],0.3096,0, 17 | #app-mount [class^=partyStatus_],0.3063,0, 18 | [class^='newChannel_'],0.2995,0, 19 | [class^=iconBadge_]:not([class*=isCurrentUserConnected_]),0.2892,0, 20 | #app-mount [class^=partyStatus_] [class^=anchor_],0.2834,0, 21 | [class^=childWrapper_],0.2817,15, 22 | [class^=overlayBottom_] > [class^=text-],0.2786,0, 23 | [class^=gifFavoriteButton_],0.2739,0, 24 | [class^='form_'] [class^='channelTextArea_'],0.2703,1, 25 | [class^='panels_'],0.2612,1, 26 | [class^=panels_],0.2599,1, 27 | [class^=sidebar_],0.2585,1, 28 | [class^=button_][class*=bannerColor_],0.2576,0, 29 | [class^='content_']>[class^='outer_'],0.2546,0, 30 | [class^=channelTextArea] > [class^=scrollableContainer],0.2527,1, 31 | [class^='content_']>[class^='outer_'],0.2511,0, 32 | [class^=sidebar_] > [class^=container_],0.2439,1, 33 | [class^='channelBottomBarArea_'],0.2423,1, 34 | [class^=panels_] > [class^=wrapper_] > [class^=container],0.2386,0, 35 | [class^='form_'] > [class^='wrapper_'],0.2365,0, 36 | [class^=navButton_][class*=navButtonActive_],0.2356,0, 37 | [class^=sidebar_],0.2315,1, 38 | [class^=membersWrap_],0.2308,1, 39 | [class^=embedVideoActions_] > [class^=centerContent_] > [class^=wrapper_],0.2273,0, 40 | [class^=categoryText_],0.2255,0, 41 | [class^='form_'] > [class^='wrapper_'],0.2233,0, 42 | [class^=sidebar_],0.2232,1, 43 | [class^=members_],0.2213,1, 44 | "[class^='folderIconWrapper_'][style='background-color: rgba(88, 101, 242, 0.4);']",0.2209,0, 45 | [class^=peopleColumn_],0.2206,0, 46 | [class^=nowPlayingColumn_],0.2206,0, 47 | [class^=message_][class*=replying_],0.2181,0, 48 | [class^=message_][class*=mentioned_],0.2175,5, 49 | [class^=bottomControls_],0.2173,0, 50 | [class*=bannerVisible_] [class^=headerContent_],0.2168,0, 51 | [class^=container_] > [class^=base_],0.2148,1, 52 | [class^=tabBody_],0.2147,0, 53 | [class^=privateChannels_],0.2141,0, 54 | [class^='sidebar_'] > [class^='container_'],0.2129,1, 55 | [class^='dot_'][class*='maskSecondary_'],0.2125,0, 56 | "[class^='status_'][style='background-color: rgb(35, 165, 90);']",0.2124,0, 57 | [class^=privateChannels_],0.2119,0, 58 | [class^='sidebar_'] > [class^='container_'],0.2112,1, 59 | [class^='content_']>[class^='outer_'],0.2105,0, 60 | [class^=channelBottomBarArea_],0.2103,1, 61 | [class^='form_'] [class^='channelTextArea_'],0.2101,1, 62 | [class^=privateChannels_],0.21,0, 63 | [class^='channelAppLauncher_'],0.2099,1, 64 | [class^=gradientBottom_],0.2099,0, 65 | [class^=centerContent_] > [class^=wrapper_] > [class^=anchor_],0.2099,0, 66 | [class^='form_'] > [class^='typing_'],0.2095,0, 67 | [class^='content_']>[class^='outer_']>[class^='inner_'],0.2094,0, 68 | #app-mount [class^=sidebar_] > [class^=container_],0.2093,1, 69 | [class^='nowPlayingColumn_'],0.209,0, 70 | "[class^='status_'][style='background-color: rgb(128, 132, 142);']",0.2087,0, 71 | [class^=peopleColumn_],0.2082,0, 72 | [class^='nowPlayingColumn_'],0.2079,0, 73 | [class^=session_],0.2078,0, 74 | [class^='container_'] > [class^='base_'],0.2076,1, 75 | [class^=searchResultsWrap_],0.2076,0, 76 | [class^=panels_] > [class^=panel_],0.2076,0, 77 | [class^='membersWrap_'],0.2076,1, 78 | [class^=searchResultsWrap_],0.2073,0, 79 | [class^=guildSeparator_],0.2072,2, 80 | [class^=tableCell_],0.2072,0, 81 | [class^=chat_] > [class^=content_] > [class^=container_],0.2071,1, 82 | [class^='membersWrap_'],0.207,1, 83 | [class^='sectionDivider_'],0.2069,0, 84 | [class^='privateChannels_'],0.2067,0, 85 | [class^='peopleColumn_'],0.2065,0, 86 | [class^=attachedBars_],0.2061,0, 87 | [class^=searchResultsWrap_],0.206,0, 88 | [class^='callContainer_'],0.2055,0, 89 | [class^='peopleColumn_'],0.2051,0, 90 | [class^='notAppAsidePanel_'] > [class^='layerContainer_'],0.2049,2, 91 | [class^='unreadPill_'][class*='endCap_'],0.2048,0, 92 | [class^='panels_'],0.2047,1, 93 | #app-mount [class^=sidebar_],0.2045,1, 94 | [class^=chat_],0.2044,1, 95 | [class^=panels_],0.2044,1, 96 | [class^=panels_] > [class^=container_],0.2042,1, 97 | [class^='chatContent_'] > [class^='messagesWrapper_'],0.2042,1, 98 | [class^='nowPlayingColumn_'],0.2041,0, 99 | [class^='membersWrap_'],0.2041,1, 100 | [class^=container_] > [class^=base_],0.2039,1, 101 | [class^='toolbar_'] > [class^='search_'],0.2034,1, 102 | "[class^='status_'][style='background-color: rgb(240, 178, 50);']",0.2034,0, 103 | [class^=tabBody_],0.2031,0, 104 | [class^='lowerBadge_'],0.2031,0, 105 | [class^=privateChannels_] > [class^=scroller_],0.2029,0, 106 | [class^='searchResultsWrap_'],0.2028,0, 107 | [class^=customizationSection_],0.2028,0, 108 | [class^=chatContent_] > [class^=messagesWrapper_],0.2027,1, 109 | [class^='upperBadge_'],0.2027,0, 110 | "[class^='status_'][style='background-color: rgb(242, 63, 67);']",0.2025,0, 111 | [class^=threadSuggestionBar_],0.2021,0, 112 | [class^=panels_] > [class^=panel_],0.202,0, 113 | [class^='searchResultsWrap_'],0.202,0, 114 | [class^=columnHeading_],0.2016,0, 115 | #app-mount [class^='divider_'],0.2016,2, 116 | [class^=callContainer_],0.2014,0, 117 | [class^='chatContent_'] > [class^='messagesWrapper_'],0.2011,1, 118 | [class^='channelBottomBarArea_']:hover,0.201,0, 119 | [class^=gradientTop_],0.2009,0, 120 | [class^=iconWrapper_],0.2008,6, 121 | [class^='guildSeparator_'],0.1998,2, 122 | [class^='content_']>[class^='outer_'],0.1998,0, 123 | [class^='privateChannels_'],0.1997,0, 124 | [class^=container_] > [class^=base_],0.1996,1, 125 | [class^=member_],0.1985,25, 126 | [class^='content_']>[class^='outer_'],0.1984,0, 127 | [class^='sectionDivider_'],0.198,0, 128 | [class^=topControls_],0.198,0, 129 | [class^='membersWrap_'],0.1974,1, 130 | [class^=privateChannels_],0.1971,0, 131 | [class^=content_] > [class^=resizeHandle_],0.1969,0, 132 | [class^=replyBar_],0.196,0, 133 | [class^='form_'] [class^='channelTextArea_'],0.1958,1, 134 | [class^='divider_']:not(.isUnread_c2654d),0.194,2, 135 | .wrapper_c51b4e:has(rect[fill='#f0b232']),0.1871,8, 136 | [class^='listItem_'] [class^='wrapper_'] > [class^='svg_'] > mask,0.1624,39, 137 | :root,0.1432,1, 138 | .wrapper_c51b4e:has(rect[fill='#80848e']),0.1408,1, 139 | .wrapper_c51b4e:has(rect[fill='#593695']),0.1371,0, 140 | .wrapper_c51b4e:has(rect[fill='#f23f43']),0.1349,5, 141 | .wrapper_c51b4e:has(rect),0.1342,26, 142 | .wrapper_c51b4e:has(rect[fill='#23a55a']),0.1332,12, 143 | [class^='svg_'] > foreignObject,0.123,99, 144 | [role='button'] path[fill='var(--white-500)'],0.1159,0, 145 | "svg[style='color: rgb(88, 101, 242);']",0.1122,13, 146 | [class^=jumpToPresentBar_] > button,0.1117,2, 147 | "[style='opacity: 1; background-color: rgb(35, 165, 90);']",0.1095,0, 148 | :root,0.1094,1, 149 | [class^='mask_'] > rect,0.1049,26, 150 | [class^='mask_'] > foreignObject,0.1041,26, 151 | [class^='mask_'] > svg,0.1035,1, 152 | #app-mount button path[fill='var(--white-500)'],0.1031,0, 153 | [class^='bannerSVGWrapper_'] > mask > circle,0.102,0, 154 | svg[class^=slider_] > rect[fill='white'],0.1016,0, 155 | :root,0.0946,1, 156 | [class^='mask_'] > circle,0.0937,0, 157 | [class^=callContainer_] [class^=topControls_] section,0.0882,0, 158 | .container_a6d69a,0.0797,0, 159 | .guilds_a4d4d9,0.0771,1, 160 | .container_adcaac,0.0769,0, 161 | .vc-spotify-time-left,0.0766,0, 162 | .vc-spotify-time-right,0.0746,0, 163 | .guilds_a4d4d9,0.0733,1, 164 | .form_a7d72e,0.0731,1, 165 | .container_fc4f04,0.0723,1, 166 | .container_c2739c,0.072,0, 167 | .form_a7d72e,0.0719,1, 168 | *,0.0714,6196, 169 | .timestamp_f9f2ca.latin24CompactTimeStamp_f9f2ca,0.0713,13, 170 | .container_d1c246,0.0713,0, 171 | .vc-ranb-button,0.0709,0, 172 | .container_b2ca13,0.0707,1, 173 | .wrapper_fea3ef,0.0706,1, 174 | .statusBubbleOuter_d0a252,0.0706,0, 175 | .container_fc4f04,0.0704,1, 176 | .scroller_bf550a,0.0703,0, 177 | .guilds_a4d4d9,0.0703,1, 178 | .attachButton_f298d4,0.0702,1, 179 | .container_a6d69a,0.07,0, 180 | .clipContainer_b11c5e,0.0699,0, 181 | .chat_a7d72e,0.0699,1, 182 | .form_a7d72e,0.0698,1, 183 | .panels_a4d4d9,0.0698,1, 184 | ".container_e85446:has(div[style='background-color: rgb(35, 165, 90);'])",0.0698,0, 185 | .textArea_bdf0de,0.0697,1, 186 | .content_a7d72e,0.0695,1, 187 | .container_adcaac,0.0695,0, 188 | .animatedContainer_fd6364,0.0693,1, 189 | .guilds_a4d4d9,0.0692,1, 190 | .container_fb4810,0.0692,0, 191 | .separator_a0,0.0692,0, 192 | ".container_e85446:has(div[style='background-color: rgb(35, 165, 90);'])",0.0692,0, 193 | .scroller_fb4810,0.0691,0, 194 | .wordmarkWindows_a934d8 > svg,0.0691,1, 195 | .wordmarkWindows_a934d8,0.0688,1, 196 | .container_fc4f04,0.0688,1, 197 | .scroller_fb4810,0.0688,0, 198 | .guilds_a4d4d9,0.0687,1, 199 | .container_e85446 > [class^='svg_'] > foreignObject > [class^='status_'],0.0686,0, 200 | .newMessagesBar_cf58b5,0.0685,0, 201 | .container_a4d4d9,0.0684,1, 202 | .scroller_e2e187,0.0684,1, 203 | .platform-osx .guilds_a4d4d9,0.0684,0, 204 | .scroller_fb4810,0.0683,0, 205 | .container_c75f85,0.0683,0, 206 | .container_c2739c,0.0681,0, 207 | html.theme-light,0.0681,0, 208 | .container_a6d69a,0.0681,0, 209 | .grabber_c7a159,0.068,0, 210 | .scroller_fb4810,0.0679,0, 211 | .theme-dark,0.0678,1, 212 | .statusBubbleOuter_d0a252,0.0678,0, 213 | .tabBody_c2739c,0.0677,0, 214 | .container_d1c246,0.0676,0, 215 | .horizontal_dc333f > .flex_dc333f,0.0673,0, 216 | .separator_a0,0.0669,0, 217 | .vc-spotify-time-left,0.0666,0, 218 | .container_fc4f04,0.0662,1, 219 | .vc-spotify-time-right,0.0661,0, 220 | .wrapper_fea3ef.hidden_fea3ef,0.0661,0, 221 | #vc-spotify-player,0.0004,0, 222 | #vc-spotify-progress-bar [class^='bar_'],0.0004,0, 223 | #vc-spotify-player,0.0004,0, 224 | .overlay_f94206:after,0.0004,0, 225 | #app-mount #vc-spotify-player,0.0003,0, 226 | #vc-spotify-player,0.0003,0, 227 | #vc-spotify-progress-bar,0.0003,0, 228 | ::placeholder,0.0003,0, 229 | ::selection,0.0003,0, 230 | ::-webkit-scrollbar-thumb,0.0003,0, 231 | .overlay_f18fcb:after,0.0003,0, 232 | #vc-spotify-player,0.0002,0, 233 | -------------------------------------------------------------------------------- /benchmark/benchmarkresults3.csv: -------------------------------------------------------------------------------- 1 | Selector,Time (ms),Matches,Total 2 | [class^='chatContent_']:has([class^='messagesWrapper_']:hover),0.4053,0,29.2904 3 | [class^='chatContent_']:has([class^='typing_']:hover),0.3815,0, 4 | [class^=chat_] > [class*=container_],0.3098,0, 5 | [class^=chat_] > [class^=content_] > [class^=container_],0.238,0, 6 | [class*=backgroundAccent_],0.2297,0, 7 | [class^='form_'] [class^='channelTextArea_'],0.2236,1, 8 | [class^='membersWrap_'],0.2207,0, 9 | [class^=panels_],0.2156,1, 10 | [class^=centerContent_] > [class^=wrapper_] > [class^=anchor_],0.2081,0, 11 | [class^=searchResultsWrap_],0.1998,0, 12 | [class^='content_']>[class^='outer_'],0.1997,0, 13 | [class^='form_'] > [class^='wrapper_'],0.1982,0, 14 | [class^=videoControls_],0.1967,0, 15 | [class^=sidebar_] > [class^=container_],0.1947,1, 16 | [class^=privateChannels_],0.1911,0, 17 | [class^='content_'] > [class^='outer_'],0.19,0, 18 | "[class^='status_'][style='background-color: rgb(240, 178, 50);']",0.19,0, 19 | [class^='form_'] > [class^='wrapper_'],0.1888,0, 20 | [class^=embedVideoActions_] > [class^=centerContent_] > [class^=wrapper_],0.1887,0, 21 | [class^=iconBadge_]:not([class*=isCurrentUserConnected_]),0.1881,1, 22 | [class^='sidebar_'] > [class^='container_'],0.1842,1, 23 | [class^='peopleColumn_'],0.1839,0, 24 | [class^='lowerBadge_'],0.1839,0, 25 | [class^='gradientBottom_'],0.1836,0, 26 | [class^=overlayBottom_] > [class^=text-],0.1834,0, 27 | "[class^='status_'][style='background-color: rgb(35, 165, 90);']",0.1834,0, 28 | [class^='chatContent_']:has([class^='typing_']) > [class^='messagesWrapper_'] > [class^='jumpToPresentBar_'],0.1834,0, 29 | "[class^='status_'][style='background-color: rgb(128, 132, 142);']",0.1834,0, 30 | "[class^='status_'][style='background-color: rgb(242, 63, 67);']",0.1832,0, 31 | [class^='form_'] > [class^='typing_'],0.183,1, 32 | [class^=panels_],0.1826,1, 33 | [class^='searchResultsWrap_'],0.1826,0, 34 | [class^='callContainer_'],0.182,0, 35 | [class^='upperBadge_'],0.1817,0, 36 | [class^=childWrapper_],0.1817,15, 37 | [class^=members_],0.1815,0, 38 | [class^=button_][class*=bannerColor_],0.181,0, 39 | [class^='gradientTop_'],0.181,0, 40 | [class^='sidebar_'] > [class^='container_'],0.1808,1, 41 | [class^=searchFilter_],0.1807,0, 42 | [class^=privateChannels_],0.1804,0, 43 | [class^='panels_'],0.1794,1, 44 | [class^=member_],0.1791,0, 45 | [class^='membersWrap_'],0.1791,0, 46 | [class^=message_][class*=replying_],0.179,0, 47 | [class^='unreadPill_'][class*='endCap_'],0.1788,0, 48 | [class^='privateChannels_'],0.1787,0, 49 | [class^='bottomControls_'],0.1787,0, 50 | [class^=message_][class*=mentioned_],0.1784,5, 51 | [class^='content_'] > [class^='outer_'],0.1784,0, 52 | #app-mount [class^=partyStatus_],0.1784,0, 53 | [class^=searchAnswer_],0.1781,0, 54 | [class^=panels_] > [class^=wrapper_] > [class^=container],0.178,0, 55 | [class^='peopleColumn_'],0.1779,0, 56 | [class^='form_'] [class^='channelTextArea_'],0.1779,1, 57 | #app-mount [class^=partyStatus_] [class^=anchor_],0.1776,0, 58 | [class^='panels_'],0.1766,1, 59 | [class^='form_'] [class^='channelTextArea_'],0.1766,1, 60 | [class^=replyBar_],0.1765,0, 61 | [class^='privateChannels_'],0.1765,0, 62 | [class^=channelBottomBarArea_],0.1764,1, 63 | [class^='divider_']:not(.isUnread_c2654d),0.1763,2, 64 | [class^=navButton_][class*=navButtonActive_],0.1762,0, 65 | [class^=container_] > [class^=base_],0.1756,1, 66 | [class^='nowPlayingColumn_'],0.1755,0, 67 | [class^='membersWrap_'],0.1755,0, 68 | [class^=sidebar_],0.1753,1, 69 | [class^='newChannel_'],0.1752,0, 70 | [class^=nowPlayingColumn_],0.1752,0, 71 | [class^=guildSeparator_],0.1751,2, 72 | [class^='topControls_'],0.175,0, 73 | [class^='container_'] > [class^='base_'],0.1748,1, 74 | [class^=panels_] > [class^=container_],0.1742,1, 75 | [class^='notAppAsidePanel_'] > [class^='layerContainer_'],0.1742,2, 76 | [class^=columnHeading_],0.174,0, 77 | [class^='channelBottomBarArea_']:hover,0.1739,0, 78 | [class^=attachedBars_],0.1738,0, 79 | [class^='membersWrap_'],0.1738,0, 80 | [class^=searchResultsWrap_],0.1737,0, 81 | [class^=gifFavoriteButton_],0.1736,0, 82 | [class^=membersWrap_],0.1736,0, 83 | [class^=customizationSection_],0.1732,0, 84 | #app-mount [class^=sidebar_] > [class^=container_],0.1727,1, 85 | [class^='newBadge_'],0.1726,0, 86 | [class^='channelBottomBarArea_'],0.1723,1, 87 | [class^=sidebar_],0.1722,1, 88 | [class^=privateChannels_],0.1722,0, 89 | [class^=sidebar_],0.1721,1, 90 | [class^='toolbar_'] > [class^='search_'],0.172,1, 91 | [class^=privateChannels_],0.1713,0, 92 | [class^=friendRequestsButton_] [class^=numberBadge_],0.1713,0, 93 | [class*=bannerVisible_] [class^=headerContent_],0.1712,0, 94 | [class^=iconWrapper_],0.1712,7, 95 | [class^=chatContent_] > [class^=messagesWrapper_],0.1712,1, 96 | [class^='content_']>[class^='outer_']>[class^='inner_'],0.171,0, 97 | [class^='nowPlayingColumn_'],0.1709,0, 98 | [class^=peopleColumn_],0.1709,0, 99 | [class^='content_']>[class^='outer_'],0.1707,0, 100 | [class^=searchResultsWrap_],0.1707,0, 101 | [class^='chatContent_'] > [class^='messagesWrapper_'],0.1707,1, 102 | [class^=tableCell_],0.1707,0, 103 | [class^=tabBody_],0.1706,0, 104 | [class^=peopleColumn_],0.1705,0, 105 | [class^=tabBody_],0.1703,0, 106 | [class^='dot_'][class*='maskSecondary_'],0.1702,0, 107 | [class^='sectionDivider_'],0.1701,1, 108 | [class^='searchResultsWrap_'],0.1701,0, 109 | [class^=privateChannels_] > [class^=scroller_],0.17,0, 110 | [class^=container_] > [class^=base_],0.17,1, 111 | [class^='content_'] > [class^='outer_'],0.1699,0, 112 | [class^=chat_],0.1696,1, 113 | [class^='channelAppLauncher_'],0.1696,1, 114 | [class^='nowPlayingColumn_'],0.1696,0, 115 | #app-mount [class^=sidebar_],0.1689,1, 116 | [class^='guildSeparator_'],0.1688,2, 117 | [class^=panels_] > [class^=panel_],0.1686,0, 118 | [class^=threadSuggestionBar_],0.1685,0, 119 | [class^='chatContent_'] > [class^='messagesWrapper_'],0.1684,1, 120 | [class^=session_],0.1684,0, 121 | [class^=categoryText_],0.1683,0, 122 | [class^=channelTextArea] > [class^=scrollableContainer],0.1679,1, 123 | [class^=panels_] > [class^=panel_],0.1677,0, 124 | "[class^='folderIconWrapper_'][style='background-color: rgba(88, 101, 242, 0.4);']",0.1674,0, 125 | [class^='sectionDivider_'],0.1671,1, 126 | [class^='callContainer_'],0.1669,0, 127 | [class^=content_] > [class^=resizeHandle_],0.1663,0, 128 | [class^=container_] > [class^=base_],0.1661,1, 129 | #app-mount [class^='divider_'],0.1639,2, 130 | [class^='listItem_'] [class^='wrapper_'] > [class^='svg_'] > mask,0.123,45, 131 | *,0.1194,5612, 132 | [class^='mask_'] > foreignObject,0.1165,1, 133 | [class^='bannerSVGWrapper_'] > mask > circle,0.1122,0, 134 | [class^='mask_'] > rect,0.1074,1, 135 | [class^='svg_'] > foreignObject,0.1069,100, 136 | [class^='mask_'] > svg,0.1043,0, 137 | #app-mount .controlIcon_ef18ee,0.1034,0, 138 | #app-mount .lookLink_dd4f85.colorPrimary_dd4f85,0.1023,0, 139 | [class^='mask_'] > circle,0.099,0, 140 | "[style='opacity: 1; background-color: rgb(35, 165, 90);']",0.0979,0, 141 | "svg[style='color: rgb(88, 101, 242);']",0.0884,13, 142 | #app-mount button path[fill='var(--white-500)'],0.087,0, 143 | [role='button'] path[fill='var(--white-500)'],0.083,0, 144 | :root,0.0804,1, 145 | :root,0.0792,1, 146 | [class^='callContainer_'] [class^='topControls_'] section,0.0784,0, 147 | svg[class^=slider_] > rect[fill='white'],0.0784,0, 148 | :root,0.0767,1, 149 | [class^=jumpToPresentBar_] > button,0.0735,0, 150 | .wrapper_c51b4e:has(rect[fill='#80848e']),0.0695,1, 151 | .textArea_bdf0de,0.0636,1, 152 | .attachButton_f298d4,0.0619,1, 153 | .wrapper_c51b4e:has(rect[fill='#593695']),0.0614,0, 154 | .wrapper_c51b4e:has(rect[fill='#f0b232']),0.0609,0, 155 | .guilds_a4d4d9,0.0607,1, 156 | .wrapper_c51b4e:has(rect),0.0607,1, 157 | .wrapper_c51b4e:has(rect[fill='#f23f43']),0.0606,0, 158 | .theme-dark,0.0602,1, 159 | .wrapper_c51b4e:has(rect[fill='#23a55a']),0.0597,0, 160 | .lookFilled_dd4f85.colorPrimary_dd4f85,0.0584,0, 161 | .container_fc4f04,0.0581,1, 162 | .guilds_a4d4d9,0.058,1, 163 | .timestamp_f9f2ca.latin24CompactTimeStamp_f9f2ca,0.0577,32, 164 | .container_c2739c,0.0572,0, 165 | .container_b2ca13,0.0571,1, 166 | ".container_e85446:has(div[style='background-color: rgb(35, 165, 90);'])",0.0568,0, 167 | .embedFull_b0068a,0.0567,1, 168 | .separator_a0,0.0564,0, 169 | .scroller_fb4810,0.0562,0, 170 | .scroller_fb4810,0.0562,0, 171 | .statusBubbleOuter_d0a252,0.056,0, 172 | .statusBubbleOuter_d0a252,0.0559,0, 173 | .container_a4d4d9,0.0558,1, 174 | .container_a6d69a,0.0557,0, 175 | .container_fc4f04,0.0557,1, 176 | .container_a6d69a,0.0557,0, 177 | .form_a7d72e,0.0556,1, 178 | .wrapper_fea3ef.hidden_fea3ef,0.0556,0, 179 | .guilds_a4d4d9,0.0555,1, 180 | .vc-ranb-button,0.0555,0, 181 | .horizontal_dc333f > .flex_dc333f,0.0555,0, 182 | .wordmarkWindows_a934d8 > svg,0.0554,1, 183 | ".container_e85446:has(div[style='background-color: rgb(35, 165, 90);'])",0.0554,0, 184 | .vc-spotify-time-right,0.0553,0, 185 | .newMessagesBar_cf58b5,0.0553,0, 186 | .chat_a7d72e,0.0552,1, 187 | .panels_a4d4d9,0.0552,1, 188 | .container_fb4810,0.0552,0, 189 | .vc-spotify-time-right,0.0552,0, 190 | .content_a7d72e,0.0551,1, 191 | .container_d1c246,0.0551,0, 192 | .form_a7d72e,0.0551,1, 193 | .wordmarkWindows_a934d8,0.0551,1, 194 | .vc-spotify-time-left,0.0551,0, 195 | .scroller_bf550a,0.055,0, 196 | .clipContainer_b11c5e,0.0549,0, 197 | .vc-spotify-time-left,0.0549,0, 198 | .wrapper_fea3ef,0.0549,1, 199 | .grabber_c7a159,0.0549,0, 200 | .platform-osx .guilds_a4d4d9,0.0548,0, 201 | .container_fc4f04,0.0548,1, 202 | .guilds_a4d4d9,0.0547,1, 203 | .container_a6d69a,0.0547,0, 204 | .scroller_e2e187,0.0546,1, 205 | .container_c75f85,0.0546,0, 206 | .container_c2739c,0.0546,0, 207 | .animatedContainer_fd6364,0.0544,0, 208 | .container_e85446 > [class^='svg_'] > foreignObject > [class^='status_'],0.0544,0, 209 | .container_fc4f04,0.0544,1, 210 | .container_d1c246,0.0544,0, 211 | .separator_a0,0.0544,0, 212 | .container_adcaac,0.0542,0, 213 | .guilds_a4d4d9,0.0542,1, 214 | html.theme-light,0.054,0, 215 | .form_a7d72e,0.0539,1, 216 | .tabBody_c2739c,0.0539,0, 217 | .scroller_fb4810,0.0539,0, 218 | .container_adcaac,0.0538,0, 219 | .scroller_fb4810,0.0533,0, 220 | ::selection,0.0028,0, 221 | #vc-spotify-player,0.0003,0, 222 | #vc-spotify-player,0.0003,0, 223 | #vc-spotify-player,0.0003,0, 224 | #vc-spotify-progress-bar,0.0003,0, 225 | #vc-spotify-progress-bar [class^='bar_'],0.0003,0, 226 | .overlay_f94206:after,0.0003,0, 227 | #app-mount #vc-spotify-player,0.0002,0, 228 | #vc-spotify-player,0.0002,0, 229 | .overlay_f18fcb:after,0.0002,0, 230 | ::-webkit-scrollbar-thumb,0.0001,0, 231 | ::placeholder,0.0001,0, 232 | -------------------------------------------------------------------------------- /build/system24.css: -------------------------------------------------------------------------------- 1 | /* main.css */ 2 | @import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); 3 | @import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap'); 4 | @import url('https://fonts.cdnfonts.com/css/asciid'); 5 | 6 | body { 7 | /* font, change to '' for default discord font */ 8 | --font: 'DM Mono'; /* change to '' for default discord font */ 9 | --code-font: 'DM Mono'; /* change to '' for default discord font */ 10 | font-weight: 300; /* text font weight. 300 is light, 400 is normal. DOES NOT AFFECT BOLD TEXT */ 11 | letter-spacing: -0.05ch; /* decreases letter spacing for better readability. recommended on monospace fonts.*/ 12 | 13 | /* sizes */ 14 | --gap: 12px; /* spacing between panels */ 15 | --divider-thickness: 4px; /* thickness of unread messages divider and highlighted message borders */ 16 | --border-thickness: 2px; /* thickness of borders around main panels. DOES NOT AFFECT OTHER BORDERS */ 17 | --border-hover-transition: 0.2s ease; /* transition for borders when hovered */ 18 | 19 | /* animation/transition options */ 20 | --animations: on; /* off: disable animations/transitions, on: enable animations/transitions */ 21 | --list-item-transition: 0.2s ease; /* transition for list items */ 22 | --dms-icon-svg-transition: 0.4s ease; /* transition for the dms icon */ 23 | 24 | /* top bar options */ 25 | --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) */ 26 | --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) */ 27 | --top-bar-title-position: off; /* off: default centered position, hide: hide title completely, left: left align title (like old discord) */ 28 | --subtle-top-bar-title: off; /* off: default, on: hide the icon and use subtle text color (like old discord) */ 29 | 30 | /* window controls */ 31 | --custom-window-controls: off; /* off: default window controls, on: custom window controls */ 32 | --window-control-size: 14px; /* size of custom window controls */ 33 | 34 | /* dms button options */ 35 | --custom-dms-icon: off; /* off: use default discord icon, hide: remove icon entirely, custom: use custom icon */ 36 | --dms-icon-svg-url: url(''); /* icon svg url. MUST BE A SVG. */ 37 | --dms-icon-svg-size: 90%; /* size of the svg (css mask-size property) */ 38 | --dms-icon-color-before: var(--icon-secondary); /* normal icon color */ 39 | --dms-icon-color-after: var(--white); /* icon color when button is hovered/selected */ 40 | --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 */ 41 | --dms-background-image-url: url(''); /* url of the background image */ 42 | --dms-background-image-size: cover; /* size of the background image (css background-size property) */ 43 | --dms-background-color: linear-gradient(70deg, var(--blue-2), var(--purple-2), var(--red-2)); /* fixed color/gradient (css background property) */ 44 | 45 | /* background image options */ 46 | --background-image: off; /* off: no background image, on: enable background image (must set url variable below) */ 47 | --background-image-url: url(''); /* url of the background image */ 48 | 49 | /* transparency/blur options */ 50 | /* NOTE: TO USE TRANSPARENCY/BLUR, YOU MUST HAVE TRANSPARENT BG COLORS. FOR EXAMPLE: --bg-4: hsla(220, 15%, 10%, 0.7); */ 51 | --transparency-tweaks: off; /* off: no changes, on: remove some elements for better transparency */ 52 | --remove-bg-layer: off; /* off: no changes, on: remove the base --bg-3 layer for use with window transparency (WILL OVERRIDE BACKGROUND IMAGE) */ 53 | --panel-blur: off; /* off: no changes, on: blur the background of panels */ 54 | --blur-amount: 12px; /* amount of blur */ 55 | --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 */ 56 | 57 | /* other options */ 58 | --small-user-panel: on; /* off: default user panel, on: smaller user panel like in old discord */ 59 | 60 | /* unrounding options */ 61 | --unrounding: on; /* off: default, on: remove rounded corners from panels */ 62 | 63 | /* styling options */ 64 | --custom-spotify-bar: on; /* off: default, on: custom text-like spotify progress bar */ 65 | --ascii-titles: on; /* off: default, on: use ascii font for titles at the start of a channel */ 66 | --ascii-loader: system24; /* off: default, system24: use system24 ascii loader, cats: use cats loader */ 67 | 68 | /* panel labels */ 69 | --panel-labels: on; /* off: default, on: add labels to panels */ 70 | --label-color: var(--text-muted); /* color of labels */ 71 | --label-font-weight: 500; /* font weight of labels */ 72 | } 73 | 74 | /* color options */ 75 | :root { 76 | --colors: on; /* off: discord default colors, on: midnight custom colors */ 77 | 78 | /* text colors */ 79 | --text-0: var(--bg-4); /* text on colored elements */ 80 | --text-1: oklch(95% 0 0); /* other normally white text */ 81 | --text-2: oklch(85% 0 0); /* headings and important text */ 82 | --text-3: oklch(75% 0 0); /* normal text */ 83 | --text-4: oklch(60% 0 0); /* icon buttons and channels */ 84 | --text-5: oklch(40% 0 0); /* muted channels/chats and timestamps */ 85 | 86 | /* background and dark colors */ 87 | --bg-1: oklch(31% 0 0); /* dark buttons when clicked */ 88 | --bg-2: oklch(27% 0 0); /* dark buttons */ 89 | --bg-3: oklch(23% 0 0); /* spacing, secondary elements */ 90 | --bg-4: oklch(19% 0 0); /* main background color */ 91 | --hover: oklch(54% 0 0 / 0.1); /* channels and buttons when hovered */ 92 | --active: oklch(54% 0 0 / 0.2); /* channels and buttons when clicked or selected */ 93 | --active-2: oklch(54% 0 0 / 0.3); /* extra state for transparent buttons */ 94 | --message-hover: var(--hover); /* messages when hovered */ 95 | 96 | /* accent colors */ 97 | --accent-1: var(--purple-1); /* links and other accent text */ 98 | --accent-2: var(--purple-2); /* small accent elements */ 99 | --accent-3: var(--purple-3); /* accent buttons */ 100 | --accent-4: var(--purple-4); /* accent buttons when hovered */ 101 | --accent-5: var(--purple-5); /* accent buttons when clicked */ 102 | --accent-new: var(--red-2); /* stuff that's normally red like mute/deafen buttons */ 103 | --mention: linear-gradient(to right, color-mix(in hsl, var(--accent-2), transparent 90%) 40%, transparent); /* background of messages that mention you */ 104 | --mention-hover: linear-gradient(to right, color-mix(in hsl, var(--accent-2), transparent 95%) 40%, transparent); /* background of messages that mention you when hovered */ 105 | --reply: linear-gradient(to right, color-mix(in hsl, var(--text-3), transparent 90%) 40%, transparent); /* background of messages that reply to you */ 106 | --reply-hover: linear-gradient(to right, color-mix(in hsl, var(--text-3), transparent 95%) 40%, transparent); /* background of messages that reply to you when hovered */ 107 | 108 | /* status indicator colors */ 109 | --online: var(--green-2); /* change to #40a258 for default */ 110 | --dnd: var(--red-2); /* change to #d83a41 for default */ 111 | --idle: var(--yellow-2); /* change to #cc954c for default */ 112 | --streaming: var(--purple-2); /* change to ##9147ff for default */ 113 | --offline: var(--text-4); /* change to #82838b for default offline color */ 114 | 115 | /* border colors */ 116 | --border-light: var(--hover); /* general light border color */ 117 | --border: var(--active); /* general normal border color */ 118 | --border-hover: var(--accent-2); /* border color of panels when hovered */ 119 | --button-border: hsl(220, 0%, 100%, 0.1); /* neutral border color of buttons */ 120 | 121 | /* base colors */ 122 | --red-1: oklch(75% 0.13 0); 123 | --red-2: oklch(70% 0.13 0); 124 | --red-3: oklch(65% 0.13 0); 125 | --red-4: oklch(60% 0.13 0); 126 | --red-5: oklch(55% 0.13 0); 127 | 128 | --green-1: oklch(75% 0.12 170); 129 | --green-2: oklch(70% 0.12 170); 130 | --green-3: oklch(65% 0.12 170); 131 | --green-4: oklch(60% 0.12 170); 132 | --green-5: oklch(55% 0.12 160); 133 | 134 | --blue-1: oklch(75% 0.11 215); 135 | --blue-2: oklch(70% 0.11 215); 136 | --blue-3: oklch(65% 0.11 215); 137 | --blue-4: oklch(60% 0.11 215); 138 | --blue-5: oklch(55% 0.11 215); 139 | 140 | --yellow-1: oklch(80% 0.12 90); 141 | --yellow-2: oklch(75% 0.12 90); 142 | --yellow-3: oklch(70% 0.12 90); 143 | --yellow-4: oklch(65% 0.12 90); 144 | --yellow-5: oklch(60% 0.12 90); 145 | 146 | --purple-1: oklch(75% 0.12 310); 147 | --purple-2: oklch(70% 0.12 310); 148 | --purple-3: oklch(65% 0.12 310); 149 | --purple-4: oklch(60% 0.12 310); 150 | --purple-5: oklch(55% 0.12 310); 151 | } 152 | 153 | body { 154 | --custom-chatbar: separated !important; /* off: default chatbar, aligned: chatbar aligned with the user panel, separated: chatbar separated from chat */ 155 | --chatbar-height: 56px !important; /* height of the chatbar (52px by default, 47px recommended for aligned, 56px recommended for separated) */ 156 | } 157 | 158 | .visual-refresh { 159 | .bg__960e4 { 160 | background: var(--bg-base-primary); 161 | } 162 | .container__01ae2 { 163 | background-color: var(--bg-base-primary); 164 | } 165 | } 166 | 167 | /* ascii.css */ 168 | @property --ascii-titles { 169 | syntax: 'off | on'; 170 | inherits: false; 171 | initial-value: on; 172 | } 173 | 174 | @container body style(--ascii-titles: on) { 175 | h3[data-text-variant='heading-xxl/extrabold'] { 176 | font-family: 'asciid'; 177 | font-size: 50px; 178 | font-weight: 400; 179 | } 180 | } 181 | 182 | @property --ascii-loader { 183 | syntax: 'off | system24 | cats'; 184 | inherits: false; 185 | initial-value: system24; 186 | } 187 | 188 | @container body style(--ascii-loader: system24) { 189 | .content_a2f514 { 190 | display: flex; 191 | flex-direction: column; 192 | align-items: center; 193 | gap: 20px; 194 | } 195 | .content_a2f514 > .spinner_a2f514 { 196 | display: none; 197 | } 198 | .content_a2f514::before { 199 | display: block; 200 | content: ' __ ___ __ __\A _______ _______/ /____ ____ ___ |__ \\/ // /\A / ___/ / / / ___/ __/ _ \\/ __ `__ \\__/ / // /_\A (__ ) /_/ (__ ) /_/ __/ / / / / / __/__ __/\A/____/\\__, /____/\\__/\\___/_/ /_/ /_/____/ /_/ \A /____/ '; 201 | font-size: 18px; 202 | font-family: monospace; 203 | white-space: pre; 204 | line-height: 1.2; 205 | background: linear-gradient(to right, var(--brand-360) 0%, var(--background-accent) 25%, var(--background-accent) 75%, var(--brand-360) 100%); 206 | -webkit-background-clip: text; 207 | -webkit-text-fill-color: transparent; 208 | background-size: 200% auto; 209 | animation: textShine 1.5s linear infinite reverse; 210 | } 211 | .text_a2f514 { 212 | position: static; 213 | } 214 | 215 | @keyframes textShine { 216 | 0% { 217 | background-position: 0% 50%; 218 | } 219 | 50% { 220 | background-position: 100% 50%; 221 | } 222 | 50.0001% { 223 | background-position: -100%, 50%; 224 | } 225 | 100% { 226 | background-position: 0% 50%; 227 | } 228 | } 229 | } 230 | 231 | @container body style(--ascii-loader: cats) { 232 | .content_a2f514 { 233 | display: flex; 234 | flex-direction: column; 235 | align-items: center; 236 | gap: 32px; 237 | position: static; 238 | } 239 | .content_a2f514 > .spinner_a2f514 { 240 | display: none; 241 | } 242 | .content_a2f514::before { 243 | display: block; 244 | content: url('https://raw.githubusercontent.com/refact0r/system24/refs/heads/main/assets/cats.gif'); 245 | } 246 | .text_a2f514 { 247 | position: static; 248 | } 249 | } 250 | 251 | /* colors.css */ 252 | @container root style(--colors: on) { 253 | #app-mount .wrapper__44b0c, 254 | #app-mount .container__1ce5d { 255 | --online-2: var(--online); 256 | --dnd-2: var(--dnd); 257 | --idle-2: var(--idle); 258 | --offline-2: var(--offline); 259 | --streaming-2: var(--streaming); 260 | } 261 | } 262 | 263 | /* panel-labels.css */ 264 | body { 265 | --label-color: var(--text-muted); 266 | --label-hover-color: var(--brand-360); 267 | --label-font-weight: 500; 268 | } 269 | 270 | @property --panel-labels { 271 | syntax: 'off | on'; 272 | inherits: false; 273 | initial-value: on; 274 | } 275 | 276 | @container body style(--panel-labels: on) { 277 | .visual-refresh { 278 | .guilds_c48ade, 279 | .panels_c48ade, 280 | .sidebarList_c48ade, 281 | .subtitleContainer_f75fb0, 282 | .messagesWrapper__36d07, 283 | .channelTextArea_f75fb0, 284 | .content_f75fb0 > .membersWrap_c8ffbb, 285 | .container_c8ffbb, 286 | .container__133bf > .container__9293f, 287 | .peopleColumn__133bf, 288 | .nowPlayingColumn__133bf, 289 | .container__01ae2 > .container__9293f, 290 | .callContainer_cb9592 { 291 | &::after { 292 | display: block; 293 | color: var(--label-color); 294 | font-weight: var(--label-font-weight); 295 | position: absolute; 296 | top: -10px; 297 | left: 8px; 298 | background-color: var(--bg-base-primary); 299 | padding: 0 4px; 300 | z-index: 100; 301 | font-size: 16px; 302 | transition: color var(--border-hover-transition); 303 | } 304 | 305 | &:hover::after { 306 | color: var(--label-hover-color); 307 | } 308 | } 309 | 310 | .guilds_c48ade::after { 311 | content: 'nav'; 312 | } 313 | .panels_c48ade::after { 314 | content: 'user'; 315 | } 316 | .sidebarList_c48ade::after { 317 | content: 'channels'; 318 | } 319 | .subtitleContainer_f75fb0::after { 320 | content: 'channel'; 321 | } 322 | .messagesWrapper__36d07::after { 323 | content: 'chat'; 324 | } 325 | .channelTextArea_f75fb0::after { 326 | content: 'input'; 327 | } 328 | .container_c8ffbb::after, 329 | .content_f75fb0 > .membersWrap_c8ffbb::after { 330 | content: 'members'; 331 | } 332 | .container__133bf > .container__9293f:after { 333 | content: 'friends'; 334 | } 335 | .peopleColumn__133bf::after { 336 | content: 'list'; 337 | } 338 | .nowPlayingColumn__133bf::after { 339 | content: 'activity'; 340 | } 341 | .container__01ae2 > .container__9293f::after { 342 | content: 'thread'; 343 | } 344 | .callContainer_cb9592::after { 345 | content: 'vc'; 346 | } 347 | 348 | .content_f75fb0 > .membersWrap_c8ffbb, 349 | .panels_c48ade, 350 | .sidebar_c48ade, 351 | .sidebarList_c48ade, 352 | .chat_f75fb0, 353 | .page_c48ade, 354 | .channelTextArea_f75fb0, 355 | .container__133bf, 356 | .container_c8ffbb, 357 | .guilds_c48ade, 358 | .peopleColumn__133bf, 359 | .tabBody__133bf, 360 | .container__01ae2 { 361 | overflow: visible; 362 | } 363 | .page_c48ade, 364 | .tabBody__133bf { 365 | min-height: 0; 366 | } 367 | .peopleColumn__133bf { 368 | min-width: 0; 369 | } 370 | .sidebarList_c48ade, 371 | .container_c8ffbb, 372 | .peopleColumn__133bf, 373 | .nowPlayingColumn__133bf { 374 | position: relative; 375 | } 376 | 377 | .scroller__36d07 { 378 | top: 8px; 379 | } 380 | .membersWrap_c8ffbb, 381 | .guilds_c48ade, 382 | .sidebarList_c48ade { 383 | padding-top: 8px; 384 | } 385 | .membersWrap_c8ffbb { 386 | height: calc(100% - 8px); 387 | } 388 | 389 | .scroller_ef3116 { 390 | padding-top: calc(var(--custom-guild-list-padding) - 8px); 391 | } 392 | 393 | .animatedContainer_f37cb1, 394 | .headerGlass_f37cb1 { 395 | left: 8px; 396 | right: 8px; 397 | width: auto; 398 | } 399 | .header_f37cb1 { 400 | margin: 0 8px; 401 | } 402 | .container__2637a { 403 | overflow: hidden; 404 | } 405 | 406 | .headerEllipseForeground_f37cb1 { 407 | display: none; 408 | } 409 | 410 | .callContainer_cb9592 { 411 | padding: 8px; 412 | } 413 | } 414 | } 415 | 416 | /* spotify-bar.css */ 417 | @property --custom-spotify-bar { 418 | syntax: 'off | on'; 419 | inherits: false; 420 | initial-value: on; 421 | } 422 | 423 | @container body style(--custom-spotify-bar: on) { 424 | .visual-refresh { 425 | /* text-like spotify progress bar */ 426 | #vc-spotify-progress-bar { 427 | margin: 8px 0 0 0; 428 | } 429 | .vc-spotify-button-row { 430 | margin-top: 8px; 431 | } 432 | #app-mount #vc-spotify-progress-bar .bar_a562c8 { 433 | height: 22px !important; 434 | top: 0 !important; 435 | background-color: var(--background-surface-high); 436 | } 437 | #app-mount #vc-spotify-progress-bar .barFill_a562c8 { 438 | height: 22px !important; 439 | } 440 | #vc-spotify-progress-bar .vc-spotify-time-left, 441 | #vc-spotify-progress-bar .vc-spotify-time-right { 442 | z-index: 1; 443 | top: 0; 444 | margin-top: 0; 445 | mix-blend-mode: difference; 446 | font-size: 16px; 447 | line-height: 22px; 448 | pointer-events: none; 449 | } 450 | #vc-spotify-progress-bar .vc-spotify-time-left { 451 | left: 6px; 452 | } 453 | #vc-spotify-progress-bar .vc-spotify-time-right { 454 | right: 6px; 455 | } 456 | #vc-spotify-progress-bar .grabber_a562c8 { 457 | visibility: hidden; 458 | } 459 | } 460 | } 461 | 462 | /* unrounding.css */ 463 | @property --unrounding { 464 | syntax: 'off | on'; 465 | inherits: false; 466 | initial-value: on; 467 | } 468 | 469 | @container body style(--unrounding: on) { 470 | *, 471 | *::before, 472 | *::after { 473 | border-radius: 0 !important; 474 | } 475 | 476 | .svg_cc5dd2 > mask, 477 | .svg__44b0c > rect, 478 | .svg__44b0c > circle, 479 | .svg__44b0c > g, 480 | .svg__44b0c rect[mask='url(#:rhi:)'], 481 | .avatar__20a53 .status_a423bd { 482 | display: none; 483 | } 484 | 485 | .mask__68edb > foreignObject, 486 | .svg__44b0c > foreignObject, 487 | .svg__2338f > foreignObject { 488 | mask: none; 489 | } 490 | 491 | .wrapper__44b0c, 492 | .container__1ce5d { 493 | --online-2: #40a258; 494 | --dnd-2: #d83a41; 495 | --idle-2: #cc954c; 496 | --offline-2: #82838b; 497 | --streaming-2: #9147ff; 498 | } 499 | .wrapper__44b0c:has(rect)::after, 500 | .container__1ce5d:has(.status_a423bd)::after { 501 | content: ''; 502 | display: block; 503 | position: absolute; 504 | height: 8px; 505 | width: 8px; 506 | bottom: -4px; 507 | right: -4px; 508 | border: 2px solid var(--background-base-lower); 509 | } 510 | .wrapper__44b0c:has(rect[fill='#43a25a'])::after, 511 | .container__1ce5d:has(.status_a423bd[style='background-color: rgb(67, 162, 90);'])::after { 512 | background: var(--online-2) !important; 513 | } 514 | .wrapper__44b0c:has(rect[fill='#d83a42'])::after { 515 | background: var(--dnd-2) !important; 516 | } 517 | .wrapper__44b0c:has(rect[fill='#ca9654'])::after { 518 | background: var(--idle-2) !important; 519 | } 520 | .wrapper__44b0c:has(rect[fill='#82838b'])::after { 521 | background: var(--offline-2) !important; 522 | } 523 | .wrapper__44b0c:has(rect[fill='#9147ff'])::after { 524 | background: var(--streaming-2); 525 | } 526 | 527 | .lowerBadge_cc5dd2 { 528 | border: 2px solid var(--background-base-lower); 529 | bottom: -4px; 530 | right: -4px; 531 | } 532 | .upperBadge_cc5dd2 { 533 | border: 2px solid var(--background-base-lower); 534 | top: -4px; 535 | right: -4px; 536 | } 537 | .folderGroup__48112.isExpanded__48112 > .stack_dbd263 { 538 | overflow: visible !important; 539 | } 540 | 541 | .slider__87bf1 > rect[rx='10'] { 542 | rx: 0 !important; 543 | } 544 | 545 | ::-webkit-scrollbar-thumb { 546 | border-radius: 0 !important; 547 | } 548 | } 549 | 550 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "systemtheme", 3 | "version": "1.0.0", 4 | "lockfileVersion": 3, 5 | "requires": true, 6 | "packages": { 7 | "": { 8 | "name": "systemtheme", 9 | "version": "1.0.0", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "chokidar": "^3.6.0", 13 | "dotenv": "^16.4.5" 14 | } 15 | }, 16 | "node_modules/anymatch": { 17 | "version": "3.1.3", 18 | "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", 19 | "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", 20 | "dev": true, 21 | "dependencies": { 22 | "normalize-path": "^3.0.0", 23 | "picomatch": "^2.0.4" 24 | }, 25 | "engines": { 26 | "node": ">= 8" 27 | } 28 | }, 29 | "node_modules/binary-extensions": { 30 | "version": "2.3.0", 31 | "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz", 32 | "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==", 33 | "dev": true, 34 | "engines": { 35 | "node": ">=8" 36 | }, 37 | "funding": { 38 | "url": "https://github.com/sponsors/sindresorhus" 39 | } 40 | }, 41 | "node_modules/braces": { 42 | "version": "3.0.3", 43 | "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", 44 | "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", 45 | "dev": true, 46 | "dependencies": { 47 | "fill-range": "^7.1.1" 48 | }, 49 | "engines": { 50 | "node": ">=8" 51 | } 52 | }, 53 | "node_modules/chokidar": { 54 | "version": "3.6.0", 55 | "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", 56 | "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", 57 | "dev": true, 58 | "dependencies": { 59 | "anymatch": "~3.1.2", 60 | "braces": "~3.0.2", 61 | "glob-parent": "~5.1.2", 62 | "is-binary-path": "~2.1.0", 63 | "is-glob": "~4.0.1", 64 | "normalize-path": "~3.0.0", 65 | "readdirp": "~3.6.0" 66 | }, 67 | "engines": { 68 | "node": ">= 8.10.0" 69 | }, 70 | "funding": { 71 | "url": "https://paulmillr.com/funding/" 72 | }, 73 | "optionalDependencies": { 74 | "fsevents": "~2.3.2" 75 | } 76 | }, 77 | "node_modules/dotenv": { 78 | "version": "16.4.5", 79 | "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz", 80 | "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==", 81 | "dev": true, 82 | "engines": { 83 | "node": ">=12" 84 | }, 85 | "funding": { 86 | "url": "https://dotenvx.com" 87 | } 88 | }, 89 | "node_modules/fill-range": { 90 | "version": "7.1.1", 91 | "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", 92 | "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", 93 | "dev": true, 94 | "dependencies": { 95 | "to-regex-range": "^5.0.1" 96 | }, 97 | "engines": { 98 | "node": ">=8" 99 | } 100 | }, 101 | "node_modules/fsevents": { 102 | "version": "2.3.3", 103 | "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", 104 | "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", 105 | "dev": true, 106 | "hasInstallScript": true, 107 | "optional": true, 108 | "os": [ 109 | "darwin" 110 | ], 111 | "engines": { 112 | "node": "^8.16.0 || ^10.6.0 || >=11.0.0" 113 | } 114 | }, 115 | "node_modules/glob-parent": { 116 | "version": "5.1.2", 117 | "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", 118 | "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", 119 | "dev": true, 120 | "dependencies": { 121 | "is-glob": "^4.0.1" 122 | }, 123 | "engines": { 124 | "node": ">= 6" 125 | } 126 | }, 127 | "node_modules/is-binary-path": { 128 | "version": "2.1.0", 129 | "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", 130 | "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", 131 | "dev": true, 132 | "dependencies": { 133 | "binary-extensions": "^2.0.0" 134 | }, 135 | "engines": { 136 | "node": ">=8" 137 | } 138 | }, 139 | "node_modules/is-extglob": { 140 | "version": "2.1.1", 141 | "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", 142 | "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", 143 | "dev": true, 144 | "engines": { 145 | "node": ">=0.10.0" 146 | } 147 | }, 148 | "node_modules/is-glob": { 149 | "version": "4.0.3", 150 | "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", 151 | "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", 152 | "dev": true, 153 | "dependencies": { 154 | "is-extglob": "^2.1.1" 155 | }, 156 | "engines": { 157 | "node": ">=0.10.0" 158 | } 159 | }, 160 | "node_modules/is-number": { 161 | "version": "7.0.0", 162 | "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", 163 | "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", 164 | "dev": true, 165 | "engines": { 166 | "node": ">=0.12.0" 167 | } 168 | }, 169 | "node_modules/normalize-path": { 170 | "version": "3.0.0", 171 | "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", 172 | "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", 173 | "dev": true, 174 | "engines": { 175 | "node": ">=0.10.0" 176 | } 177 | }, 178 | "node_modules/picomatch": { 179 | "version": "2.3.1", 180 | "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", 181 | "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", 182 | "dev": true, 183 | "engines": { 184 | "node": ">=8.6" 185 | }, 186 | "funding": { 187 | "url": "https://github.com/sponsors/jonschlinkert" 188 | } 189 | }, 190 | "node_modules/readdirp": { 191 | "version": "3.6.0", 192 | "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", 193 | "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", 194 | "dev": true, 195 | "dependencies": { 196 | "picomatch": "^2.2.1" 197 | }, 198 | "engines": { 199 | "node": ">=8.10.0" 200 | } 201 | }, 202 | "node_modules/to-regex-range": { 203 | "version": "5.0.1", 204 | "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", 205 | "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", 206 | "dev": true, 207 | "dependencies": { 208 | "is-number": "^7.0.0" 209 | }, 210 | "engines": { 211 | "node": ">=8.0" 212 | } 213 | } 214 | } 215 | } 216 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "systemtheme", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "dev": "node scripts/dev.js", 6 | "build": "node scripts/build.js" 7 | }, 8 | "author": "refact0r", 9 | "license": "MIT", 10 | "devDependencies": { 11 | "chokidar": "^3.6.0", 12 | "dotenv": "^16.4.5" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /scripts/dev.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const path = require('path'); 3 | const chokidar = require('chokidar'); 4 | 5 | require('dotenv').config({ path: path.join(__dirname, '..', '.env') }); 6 | 7 | // File and directory paths 8 | const baseFile = path.join(__dirname, '..', '/theme/system24.theme.css'); 9 | const buildFile = path.join(__dirname, '..', '/build/system24.css'); 10 | const srcDir = path.join(__dirname, '..', '/src'); 11 | const outputPaths = process.env.DEV_OUTPUT_PATH ? process.env.DEV_OUTPUT_PATH.split(',') : []; 12 | 13 | // Ensure output paths are set 14 | if (outputPaths.length === 0) { 15 | console.error('DEV_OUTPUT_PATH is not set in .env file'); 16 | process.exit(1); 17 | } 18 | 19 | // Combine all CSS files from the source directory 20 | function combineSourceFiles() { 21 | let combinedCSS = ''; 22 | 23 | // Get all CSS files 24 | const allFiles = fs 25 | .readdirSync(srcDir) 26 | .filter((file) => file.endsWith('.css')) 27 | .map((file) => path.join(srcDir, file)); 28 | 29 | // Split into main.css and other files 30 | const mainFile = allFiles.find((file) => path.basename(file) === 'main.css'); 31 | const otherFiles = allFiles.filter((file) => path.basename(file) !== 'main.css'); 32 | 33 | // Process main.css first if it exists 34 | if (mainFile) { 35 | const mainContent = fs.readFileSync(mainFile, 'utf8'); 36 | combinedCSS += `/* ${path.basename(mainFile)} */\n${mainContent}\n`; 37 | } 38 | 39 | // Then process other files 40 | otherFiles.forEach((file) => { 41 | const content = fs.readFileSync(file, 'utf8'); 42 | combinedCSS += `/* ${path.basename(file)} */\n${content}\n`; 43 | }); 44 | 45 | fs.writeFileSync(buildFile, combinedCSS); 46 | return combinedCSS; 47 | } 48 | 49 | // Process the base file and replace imports with actual content 50 | function processBaseFile(compiledCSS) { 51 | const baseContent = fs.readFileSync(baseFile, 'utf8'); 52 | const importRegex = /@import\s+url\(['"]?[^'"]+['"]?\);/g; 53 | 54 | const processedContent = baseContent.replace(importRegex, compiledCSS); 55 | 56 | outputPaths.forEach((outputPath) => { 57 | fs.writeFileSync(outputPath, processedContent); 58 | console.log(`Updated ${outputPath}`); 59 | }); 60 | } 61 | 62 | // Main function to process files 63 | function processFiles() { 64 | try { 65 | const compiledCSS = combineSourceFiles(); 66 | processBaseFile(compiledCSS); 67 | } catch (error) { 68 | console.error('Error processing files:', error); 69 | } 70 | } 71 | 72 | processFiles(); 73 | 74 | // Set up watchers 75 | const watcher = chokidar.watch([baseFile, `${srcDir}/**/*.css`], { 76 | ignoreInitial: true, 77 | }); 78 | 79 | // Watch for changes 80 | watcher 81 | .on('change', (filePath) => { 82 | console.log(`File changed: ${filePath}`); 83 | processFiles(); 84 | }) 85 | .on('add', (filePath) => { 86 | console.log(`New file added: ${filePath}`); 87 | processFiles(); 88 | }) 89 | .on('unlink', (filePath) => { 90 | console.log(`File deleted: ${filePath}`); 91 | processFiles(); 92 | }) 93 | .on('error', (error) => console.error(`Watcher error: ${error}`)); 94 | -------------------------------------------------------------------------------- /src/ascii.css: -------------------------------------------------------------------------------- 1 | @property --ascii-titles { 2 | syntax: 'off | on'; 3 | inherits: false; 4 | initial-value: on; 5 | } 6 | 7 | @container body style(--ascii-titles: on) { 8 | h3[data-text-variant='heading-xxl/extrabold'] { 9 | font-family: 'asciid'; 10 | font-size: 50px; 11 | font-weight: 400; 12 | } 13 | } 14 | 15 | @property --ascii-loader { 16 | syntax: 'off | system24 | cats'; 17 | inherits: false; 18 | initial-value: system24; 19 | } 20 | 21 | @container body style(--ascii-loader: system24) { 22 | .content_a2f514 { 23 | display: flex; 24 | flex-direction: column; 25 | align-items: center; 26 | gap: 20px; 27 | } 28 | .content_a2f514 > .spinner_a2f514 { 29 | display: none; 30 | } 31 | .content_a2f514::before { 32 | display: block; 33 | content: ' __ ___ __ __\A _______ _______/ /____ ____ ___ |__ \\/ // /\A / ___/ / / / ___/ __/ _ \\/ __ `__ \\__/ / // /_\A (__ ) /_/ (__ ) /_/ __/ / / / / / __/__ __/\A/____/\\__, /____/\\__/\\___/_/ /_/ /_/____/ /_/ \A /____/ '; 34 | font-size: 18px; 35 | font-family: monospace; 36 | white-space: pre; 37 | line-height: 1.2; 38 | background: linear-gradient(to right, var(--brand-360) 0%, var(--background-accent) 25%, var(--background-accent) 75%, var(--brand-360) 100%); 39 | -webkit-background-clip: text; 40 | -webkit-text-fill-color: transparent; 41 | background-size: 200% auto; 42 | animation: textShine 1.5s linear infinite reverse; 43 | } 44 | .text_a2f514 { 45 | position: static; 46 | } 47 | 48 | @keyframes textShine { 49 | 0% { 50 | background-position: 0% 50%; 51 | } 52 | 50% { 53 | background-position: 100% 50%; 54 | } 55 | 50.0001% { 56 | background-position: -100%, 50%; 57 | } 58 | 100% { 59 | background-position: 0% 50%; 60 | } 61 | } 62 | } 63 | 64 | @container body style(--ascii-loader: cats) { 65 | .content_a2f514 { 66 | display: flex; 67 | flex-direction: column; 68 | align-items: center; 69 | gap: 32px; 70 | position: static; 71 | } 72 | .content_a2f514 > .spinner_a2f514 { 73 | display: none; 74 | } 75 | .content_a2f514::before { 76 | display: block; 77 | content: url('https://raw.githubusercontent.com/refact0r/system24/refs/heads/main/assets/cats.gif'); 78 | } 79 | .text_a2f514 { 80 | position: static; 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /src/colors.css: -------------------------------------------------------------------------------- 1 | @container root style(--colors: on) { 2 | #app-mount .wrapper__44b0c, 3 | #app-mount .container__1ce5d { 4 | --online-2: var(--online); 5 | --dnd-2: var(--dnd); 6 | --idle-2: var(--idle); 7 | --offline-2: var(--offline); 8 | --streaming-2: var(--streaming); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/main.css: -------------------------------------------------------------------------------- 1 | @import url('https://refact0r.github.io/midnight-discord/build/midnight.css'); 2 | @import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap'); 3 | @import url('https://fonts.cdnfonts.com/css/asciid'); 4 | 5 | body { 6 | /* font, change to '' for default discord font */ 7 | --font: 'DM Mono'; /* change to '' for default discord font */ 8 | --code-font: 'DM Mono'; /* change to '' for default discord font */ 9 | font-weight: 300; /* text font weight. 300 is light, 400 is normal. DOES NOT AFFECT BOLD TEXT */ 10 | letter-spacing: -0.05ch; /* decreases letter spacing for better readability. recommended on monospace fonts.*/ 11 | 12 | /* sizes */ 13 | --gap: 12px; /* spacing between panels */ 14 | --divider-thickness: 4px; /* thickness of unread messages divider and highlighted message borders */ 15 | --border-thickness: 2px; /* thickness of borders around main panels. DOES NOT AFFECT OTHER BORDERS */ 16 | --border-hover-transition: 0.2s ease; /* transition for borders when hovered */ 17 | 18 | /* animation/transition options */ 19 | --animations: on; /* off: disable animations/transitions, on: enable animations/transitions */ 20 | --list-item-transition: 0.2s ease; /* transition for list items */ 21 | --dms-icon-svg-transition: 0.4s ease; /* transition for the dms icon */ 22 | 23 | /* top bar options */ 24 | --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) */ 25 | --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) */ 26 | --top-bar-title-position: off; /* off: default centered position, hide: hide title completely, left: left align title (like old discord) */ 27 | --subtle-top-bar-title: off; /* off: default, on: hide the icon and use subtle text color (like old discord) */ 28 | 29 | /* window controls */ 30 | --custom-window-controls: off; /* off: default window controls, on: custom window controls */ 31 | --window-control-size: 14px; /* size of custom window controls */ 32 | 33 | /* dms button options */ 34 | --custom-dms-icon: off; /* off: use default discord icon, hide: remove icon entirely, custom: use custom icon */ 35 | --dms-icon-svg-url: url(''); /* icon svg url. MUST BE A SVG. */ 36 | --dms-icon-svg-size: 90%; /* size of the svg (css mask-size property) */ 37 | --dms-icon-color-before: var(--icon-secondary); /* normal icon color */ 38 | --dms-icon-color-after: var(--white); /* icon color when button is hovered/selected */ 39 | --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 */ 40 | --dms-background-image-url: url(''); /* url of the background image */ 41 | --dms-background-image-size: cover; /* size of the background image (css background-size property) */ 42 | --dms-background-color: linear-gradient(70deg, var(--blue-2), var(--purple-2), var(--red-2)); /* fixed color/gradient (css background property) */ 43 | 44 | /* background image options */ 45 | --background-image: off; /* off: no background image, on: enable background image (must set url variable below) */ 46 | --background-image-url: url(''); /* url of the background image */ 47 | 48 | /* transparency/blur options */ 49 | /* NOTE: TO USE TRANSPARENCY/BLUR, YOU MUST HAVE TRANSPARENT BG COLORS. FOR EXAMPLE: --bg-4: hsla(220, 15%, 10%, 0.7); */ 50 | --transparency-tweaks: off; /* off: no changes, on: remove some elements for better transparency */ 51 | --remove-bg-layer: off; /* off: no changes, on: remove the base --bg-3 layer for use with window transparency (WILL OVERRIDE BACKGROUND IMAGE) */ 52 | --panel-blur: off; /* off: no changes, on: blur the background of panels */ 53 | --blur-amount: 12px; /* amount of blur */ 54 | --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 */ 55 | 56 | /* other options */ 57 | --small-user-panel: on; /* off: default user panel, on: smaller user panel like in old discord */ 58 | 59 | /* unrounding options */ 60 | --unrounding: on; /* off: default, on: remove rounded corners from panels */ 61 | 62 | /* styling options */ 63 | --custom-spotify-bar: on; /* off: default, on: custom text-like spotify progress bar */ 64 | --ascii-titles: on; /* off: default, on: use ascii font for titles at the start of a channel */ 65 | --ascii-loader: system24; /* off: default, system24: use system24 ascii loader, cats: use cats loader */ 66 | 67 | /* panel labels */ 68 | --panel-labels: on; /* off: default, on: add labels to panels */ 69 | --label-color: var(--text-muted); /* color of labels */ 70 | --label-font-weight: 500; /* font weight of labels */ 71 | } 72 | 73 | /* color options */ 74 | :root { 75 | --colors: on; /* off: discord default colors, on: midnight custom colors */ 76 | 77 | /* text colors */ 78 | --text-0: var(--bg-4); /* text on colored elements */ 79 | --text-1: oklch(95% 0 0); /* other normally white text */ 80 | --text-2: oklch(85% 0 0); /* headings and important text */ 81 | --text-3: oklch(75% 0 0); /* normal text */ 82 | --text-4: oklch(60% 0 0); /* icon buttons and channels */ 83 | --text-5: oklch(40% 0 0); /* muted channels/chats and timestamps */ 84 | 85 | /* background and dark colors */ 86 | --bg-1: oklch(31% 0 0); /* dark buttons when clicked */ 87 | --bg-2: oklch(27% 0 0); /* dark buttons */ 88 | --bg-3: oklch(23% 0 0); /* spacing, secondary elements */ 89 | --bg-4: oklch(19% 0 0); /* main background color */ 90 | --hover: oklch(54% 0 0 / 0.1); /* channels and buttons when hovered */ 91 | --active: oklch(54% 0 0 / 0.2); /* channels and buttons when clicked or selected */ 92 | --active-2: oklch(54% 0 0 / 0.3); /* extra state for transparent buttons */ 93 | --message-hover: var(--hover); /* messages when hovered */ 94 | 95 | /* accent colors */ 96 | --accent-1: var(--purple-1); /* links and other accent text */ 97 | --accent-2: var(--purple-2); /* small accent elements */ 98 | --accent-3: var(--purple-3); /* accent buttons */ 99 | --accent-4: var(--purple-4); /* accent buttons when hovered */ 100 | --accent-5: var(--purple-5); /* accent buttons when clicked */ 101 | --accent-new: var(--red-2); /* stuff that's normally red like mute/deafen buttons */ 102 | --mention: linear-gradient(to right, color-mix(in hsl, var(--accent-2), transparent 90%) 40%, transparent); /* background of messages that mention you */ 103 | --mention-hover: linear-gradient(to right, color-mix(in hsl, var(--accent-2), transparent 95%) 40%, transparent); /* background of messages that mention you when hovered */ 104 | --reply: linear-gradient(to right, color-mix(in hsl, var(--text-3), transparent 90%) 40%, transparent); /* background of messages that reply to you */ 105 | --reply-hover: linear-gradient(to right, color-mix(in hsl, var(--text-3), transparent 95%) 40%, transparent); /* background of messages that reply to you when hovered */ 106 | 107 | /* status indicator colors */ 108 | --online: var(--green-2); /* change to #40a258 for default */ 109 | --dnd: var(--red-2); /* change to #d83a41 for default */ 110 | --idle: var(--yellow-2); /* change to #cc954c for default */ 111 | --streaming: var(--purple-2); /* change to ##9147ff for default */ 112 | --offline: var(--text-4); /* change to #82838b for default offline color */ 113 | 114 | /* border colors */ 115 | --border-light: var(--hover); /* general light border color */ 116 | --border: var(--active); /* general normal border color */ 117 | --border-hover: var(--accent-2); /* border color of panels when hovered */ 118 | --button-border: hsl(220, 0%, 100%, 0.1); /* neutral border color of buttons */ 119 | 120 | /* base colors */ 121 | --red-1: oklch(75% 0.13 0); 122 | --red-2: oklch(70% 0.13 0); 123 | --red-3: oklch(65% 0.13 0); 124 | --red-4: oklch(60% 0.13 0); 125 | --red-5: oklch(55% 0.13 0); 126 | 127 | --green-1: oklch(75% 0.12 170); 128 | --green-2: oklch(70% 0.12 170); 129 | --green-3: oklch(65% 0.12 170); 130 | --green-4: oklch(60% 0.12 170); 131 | --green-5: oklch(55% 0.12 160); 132 | 133 | --blue-1: oklch(75% 0.11 215); 134 | --blue-2: oklch(70% 0.11 215); 135 | --blue-3: oklch(65% 0.11 215); 136 | --blue-4: oklch(60% 0.11 215); 137 | --blue-5: oklch(55% 0.11 215); 138 | 139 | --yellow-1: oklch(80% 0.12 90); 140 | --yellow-2: oklch(75% 0.12 90); 141 | --yellow-3: oklch(70% 0.12 90); 142 | --yellow-4: oklch(65% 0.12 90); 143 | --yellow-5: oklch(60% 0.12 90); 144 | 145 | --purple-1: oklch(75% 0.12 310); 146 | --purple-2: oklch(70% 0.12 310); 147 | --purple-3: oklch(65% 0.12 310); 148 | --purple-4: oklch(60% 0.12 310); 149 | --purple-5: oklch(55% 0.12 310); 150 | } 151 | 152 | body { 153 | --custom-chatbar: separated !important; /* off: default chatbar, aligned: chatbar aligned with the user panel, separated: chatbar separated from chat */ 154 | --chatbar-height: 56px !important; /* height of the chatbar (52px by default, 47px recommended for aligned, 56px recommended for separated) */ 155 | } 156 | 157 | .visual-refresh { 158 | .bg__960e4 { 159 | background: var(--bg-base-primary); 160 | } 161 | .container__01ae2 { 162 | background-color: var(--bg-base-primary); 163 | } 164 | } 165 | -------------------------------------------------------------------------------- /src/panel-labels.css: -------------------------------------------------------------------------------- 1 | body { 2 | --label-color: var(--text-muted); 3 | --label-hover-color: var(--brand-360); 4 | --label-font-weight: 500; 5 | } 6 | 7 | @property --panel-labels { 8 | syntax: 'off | on'; 9 | inherits: false; 10 | initial-value: on; 11 | } 12 | 13 | @container body style(--panel-labels: on) { 14 | .visual-refresh { 15 | .guilds_c48ade, 16 | .panels_c48ade, 17 | .sidebarList_c48ade, 18 | .subtitleContainer_f75fb0, 19 | .messagesWrapper__36d07, 20 | .channelTextArea_f75fb0, 21 | .content_f75fb0 > .membersWrap_c8ffbb, 22 | .container_c8ffbb, 23 | .container__133bf > .container__9293f, 24 | .peopleColumn__133bf, 25 | .nowPlayingColumn__133bf, 26 | .container__01ae2 > .container__9293f, 27 | .callContainer_cb9592 { 28 | &::after { 29 | display: block; 30 | color: var(--label-color); 31 | font-weight: var(--label-font-weight); 32 | position: absolute; 33 | top: -10px; 34 | left: 8px; 35 | background-color: var(--bg-base-primary); 36 | padding: 0 4px; 37 | z-index: 100; 38 | font-size: 16px; 39 | transition: color var(--border-hover-transition); 40 | } 41 | 42 | &:hover::after { 43 | color: var(--label-hover-color); 44 | } 45 | } 46 | 47 | .guilds_c48ade::after { 48 | content: 'nav'; 49 | } 50 | .panels_c48ade::after { 51 | content: 'user'; 52 | } 53 | .sidebarList_c48ade::after { 54 | content: 'channels'; 55 | } 56 | .subtitleContainer_f75fb0::after { 57 | content: 'channel'; 58 | } 59 | .messagesWrapper__36d07::after { 60 | content: 'chat'; 61 | } 62 | .channelTextArea_f75fb0::after { 63 | content: 'input'; 64 | } 65 | .container_c8ffbb::after, 66 | .content_f75fb0 > .membersWrap_c8ffbb::after { 67 | content: 'members'; 68 | } 69 | .container__133bf > .container__9293f:after { 70 | content: 'friends'; 71 | } 72 | .peopleColumn__133bf::after { 73 | content: 'list'; 74 | } 75 | .nowPlayingColumn__133bf::after { 76 | content: 'activity'; 77 | } 78 | .container__01ae2 > .container__9293f::after { 79 | content: 'thread'; 80 | } 81 | .callContainer_cb9592::after { 82 | content: 'vc'; 83 | } 84 | 85 | .content_f75fb0 > .membersWrap_c8ffbb, 86 | .panels_c48ade, 87 | .sidebar_c48ade, 88 | .sidebarList_c48ade, 89 | .chat_f75fb0, 90 | .page_c48ade, 91 | .channelTextArea_f75fb0, 92 | .container__133bf, 93 | .container_c8ffbb, 94 | .guilds_c48ade, 95 | .peopleColumn__133bf, 96 | .tabBody__133bf, 97 | .container__01ae2 { 98 | overflow: visible; 99 | } 100 | .page_c48ade, 101 | .tabBody__133bf { 102 | min-height: 0; 103 | } 104 | .peopleColumn__133bf { 105 | min-width: 0; 106 | } 107 | .sidebarList_c48ade, 108 | .container_c8ffbb, 109 | .peopleColumn__133bf, 110 | .nowPlayingColumn__133bf { 111 | position: relative; 112 | } 113 | 114 | .scroller__36d07 { 115 | top: 8px; 116 | } 117 | .membersWrap_c8ffbb, 118 | .guilds_c48ade, 119 | .sidebarList_c48ade { 120 | padding-top: 8px; 121 | } 122 | .membersWrap_c8ffbb { 123 | height: calc(100% - 8px); 124 | } 125 | 126 | .scroller_ef3116 { 127 | padding-top: calc(var(--custom-guild-list-padding) - 8px); 128 | } 129 | 130 | .animatedContainer_f37cb1, 131 | .headerGlass_f37cb1 { 132 | left: 8px; 133 | right: 8px; 134 | width: auto; 135 | } 136 | .header_f37cb1 { 137 | margin: 0 8px; 138 | } 139 | .container__2637a { 140 | overflow: hidden; 141 | } 142 | 143 | .headerEllipseForeground_f37cb1 { 144 | display: none; 145 | } 146 | 147 | .callContainer_cb9592 { 148 | padding: 8px; 149 | } 150 | } 151 | } 152 | -------------------------------------------------------------------------------- /src/spotify-bar.css: -------------------------------------------------------------------------------- 1 | @property --custom-spotify-bar { 2 | syntax: 'off | on'; 3 | inherits: false; 4 | initial-value: on; 5 | } 6 | 7 | @container body style(--custom-spotify-bar: on) { 8 | .visual-refresh { 9 | /* text-like spotify progress bar */ 10 | #vc-spotify-progress-bar { 11 | margin: 8px 0 0 0; 12 | } 13 | .vc-spotify-button-row { 14 | margin-top: 8px; 15 | } 16 | #app-mount #vc-spotify-progress-bar .bar_a562c8 { 17 | height: 22px !important; 18 | top: 0 !important; 19 | background-color: var(--background-surface-high); 20 | } 21 | #app-mount #vc-spotify-progress-bar .barFill_a562c8 { 22 | height: 22px !important; 23 | } 24 | #vc-spotify-progress-bar .vc-spotify-time-left, 25 | #vc-spotify-progress-bar .vc-spotify-time-right { 26 | z-index: 1; 27 | top: 0; 28 | margin-top: 0; 29 | mix-blend-mode: difference; 30 | font-size: 16px; 31 | line-height: 22px; 32 | pointer-events: none; 33 | } 34 | #vc-spotify-progress-bar .vc-spotify-time-left { 35 | left: 6px; 36 | } 37 | #vc-spotify-progress-bar .vc-spotify-time-right { 38 | right: 6px; 39 | } 40 | #vc-spotify-progress-bar .grabber_a562c8 { 41 | visibility: hidden; 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/unrounding.css: -------------------------------------------------------------------------------- 1 | @property --unrounding { 2 | syntax: 'off | on'; 3 | inherits: false; 4 | initial-value: on; 5 | } 6 | 7 | @container body style(--unrounding: on) { 8 | *, 9 | *::before, 10 | *::after { 11 | border-radius: 0 !important; 12 | } 13 | 14 | .svg_cc5dd2 > mask, 15 | .svg__44b0c > rect, 16 | .svg__44b0c > circle, 17 | .svg__44b0c > g, 18 | .svg__44b0c rect[mask='url(#:rhi:)'], 19 | .avatar__20a53 .status_a423bd { 20 | display: none; 21 | } 22 | 23 | .mask__68edb > foreignObject, 24 | .svg__44b0c > foreignObject, 25 | .svg__2338f > foreignObject { 26 | mask: none; 27 | } 28 | 29 | .wrapper__44b0c, 30 | .container__1ce5d { 31 | --online-2: #40a258; 32 | --dnd-2: #d83a41; 33 | --idle-2: #cc954c; 34 | --offline-2: #82838b; 35 | --streaming-2: #9147ff; 36 | } 37 | .wrapper__44b0c:has(rect)::after, 38 | .container__1ce5d:has(.status_a423bd)::after { 39 | content: ''; 40 | display: block; 41 | position: absolute; 42 | height: 8px; 43 | width: 8px; 44 | bottom: -4px; 45 | right: -4px; 46 | border: 2px solid var(--background-base-lower); 47 | } 48 | .wrapper__44b0c:has(rect[fill='#43a25a'])::after, 49 | .container__1ce5d:has(.status_a423bd[style='background-color: rgb(67, 162, 90);'])::after { 50 | background: var(--online-2) !important; 51 | } 52 | .wrapper__44b0c:has(rect[fill='#d83a42'])::after { 53 | background: var(--dnd-2) !important; 54 | } 55 | .wrapper__44b0c:has(rect[fill='#ca9654'])::after { 56 | background: var(--idle-2) !important; 57 | } 58 | .wrapper__44b0c:has(rect[fill='#82838b'])::after { 59 | background: var(--offline-2) !important; 60 | } 61 | .wrapper__44b0c:has(rect[fill='#9147ff'])::after { 62 | background: var(--streaming-2); 63 | } 64 | 65 | .lowerBadge_cc5dd2 { 66 | border: 2px solid var(--background-base-lower); 67 | bottom: -4px; 68 | right: -4px; 69 | } 70 | .upperBadge_cc5dd2 { 71 | border: 2px solid var(--background-base-lower); 72 | top: -4px; 73 | right: -4px; 74 | } 75 | .folderGroup__48112.isExpanded__48112 > .stack_dbd263 { 76 | overflow: visible !important; 77 | } 78 | 79 | .slider__87bf1 > rect[rx='10'] { 80 | rx: 0 !important; 81 | } 82 | 83 | ::-webkit-scrollbar-thumb { 84 | border-radius: 0 !important; 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /theme/README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | # system24 5 | 6 | a customizable, tui-like discord theme. inspired by [spicetify text theme](https://github.com/spicetify/spicetify-themes/tree/master/text). 7 | 8 | 9 | 10 | ## discord server 11 | 12 | need help? want to get notified about updates? have feedback? join 13 | 14 | ## install 15 | 16 | ### vencord/betterdiscord (or any client that supports theme files) 17 | 18 | 1. download the theme file, [`system24.theme.css`](https://github.com/refact0r/system24/blob/main/theme/system24.theme.css). (there should be a download button at the top right of the page) 19 | 2. drag the file into your theme folder. (there should be a button to open the theme folder in theme settings) 20 | 3. (optional) customize the theme by editing the options in `midnight.theme.css`. 21 | 22 | ### install through link 23 | 24 | add `https://refact0r.github.io/system24/build/system24.css` to your theme import links. you will need to copy the theme variables to your quickcss in order to customize the theme. 25 | 26 | ## flavors 27 | 28 | customized variants of the theme. 29 | 30 | - [catppuccin mocha](https://github.com/refact0r/system24/blob/main/theme/flavors/system24-catppuccin-mocha.theme.css) 31 | - [catppuccin macchiato](https://github.com/refact0r/system24/blob/main/theme/flavors/system24-catppuccin-macchiato.theme.css) 32 | - [rosé pine](https://github.com/refact0r/system24/blob/main/theme/flavors/system24-rose-pine.theme.css) 33 | - [rose pine moon](https://github.com/refact0r/system24/blob/main/theme/flavors/system24-rose-pine-moon.theme.css) 34 | - [tokyo night](https://github.com/refact0r/system24/blob/main/theme/flavors/system24-tokyo-night.theme.css) 35 | - [nord](https://github.com/refact0r/system24/blob/main/theme/flavors/system24-nord.theme.css) 36 | - [vencord](https://github.com/refact0r/system24/blob/main/theme/flavors/system24-vencord.theme.css) 37 | 38 | ## contributing 39 | 40 | this theme depends on [midnight](https://github.com/refact0r/midnight-discord) for its core styles. if you're looking to contribute, please consider which theme you actually want to work on. feel free to open an issue and ask if you're unsure. 41 | 42 | this theme uses a dev script to check for changes in the source css files and combine them into a build file. to run locally: 43 | 44 | 1. clone the repository. 45 | 2. run `npm i`. 46 | 3. create a `.env` file in the project root with the paths of any local theme files you want to update (comma separated) 47 | 48 | ``` 49 | DEV_OUTPUT_PATH=C:\Users\USERNAME\AppData\Roaming\Vencord\themes\system24-dev.theme.css 50 | ``` 51 | 52 | 4. run `npm run dev`. 53 | 5. make changes to any file in `/src` or the main theme file. the local theme files you listed will automatically be updated, along with the build file in `/build`. 54 | 6. make a pull request with your changes! 55 | 56 | ## credits 57 | 58 | [spicetify text theme](https://github.com/spicetify/spicetify-themes/tree/master/text) for primary design inspiration. 59 | 60 | thanks to all the [contributors](https://github.com/refact0r/system24/graphs/contributors)! 61 | -------------------------------------------------------------------------------- /theme/flavors/system24-catppuccin-macchiato.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name system24 (catppuccin macchiato) 3 | * @description a tui-like discord theme. based on catppuccin macchiato theme (https://catppuccin.com). 4 | * @author refact0r 5 | * @version 2.0.0 6 | * @invite nz87hXyvcy 7 | * @website https://github.com/refact0r/system24 8 | * @source https://github.com/refact0r/system24/blob/master/theme/system24-catppuccin-macchiato.theme.css 9 | * @authorId 508863359777505290 10 | * @authorLink https://www.refact0r.dev 11 | */ 12 | 13 | /* import theme modules */ 14 | @import url('https://refact0r.github.io/system24/build/system24.css'); 15 | 16 | body { 17 | /* font, change to '' for default discord font */ 18 | --font: 'DM Mono'; /* change to '' for default discord font */ 19 | --code-font: 'DM Mono'; /* change to '' for default discord font */ 20 | font-weight: 300; /* text font weight. 300 is light, 400 is normal. DOES NOT AFFECT BOLD TEXT */ 21 | letter-spacing: -0.05ch; /* decreases letter spacing for better readability. recommended on monospace fonts.*/ 22 | 23 | /* sizes */ 24 | --gap: 12px; /* spacing between panels */ 25 | --divider-thickness: 4px; /* thickness of unread messages divider and highlighted message borders */ 26 | --border-thickness: 2px; /* thickness of borders around main panels. DOES NOT AFFECT OTHER BORDERS */ 27 | --border-hover-transition: 0.2s ease; /* transition for borders when hovered */ 28 | 29 | /* animation/transition options */ 30 | --animations: on; /* off: disable animations/transitions, on: enable animations/transitions */ 31 | --list-item-transition: 0.2s ease; /* transition for list items */ 32 | --dms-icon-svg-transition: 0.4s ease; /* transition for the dms icon */ 33 | 34 | /* top bar options */ 35 | --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) */ 36 | --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) */ 37 | --top-bar-title-position: off; /* off: default centered position, hide: hide title completely, left: left align title (like old discord) */ 38 | --subtle-top-bar-title: off; /* off: default, on: hide the icon and use subtle text color (like old discord) */ 39 | 40 | /* window controls */ 41 | --custom-window-controls: off; /* off: default window controls, on: custom window controls */ 42 | --window-control-size: 14px; /* size of custom window controls */ 43 | 44 | /* dms button options */ 45 | --custom-dms-icon: hide; /* off: use default discord icon, hide: remove icon entirely, custom: use custom icon */ 46 | --dms-icon-svg-url: url(''); /* icon svg url. MUST BE A SVG. */ 47 | --dms-icon-svg-size: 90%; /* size of the svg (css mask-size property) */ 48 | --dms-icon-color-before: var(--icon-secondary); /* normal icon color */ 49 | --dms-icon-color-after: var(--white); /* icon color when button is hovered/selected */ 50 | --custom-dms-background: image; /* off to disable, image to use a background image (must set url variable below), color to use a custom color/gradient */ 51 | --dms-background-image-url: url('https://raw.githubusercontent.com/catppuccin/catppuccin/refs/heads/main/assets/logos/exports/macchiato_square.png'); /* url of the background image */ 52 | --dms-background-image-size: cover; /* size of the background image (css background-size property) */ 53 | --dms-background-color: linear-gradient(70deg, var(--blue-2), var(--purple-2), var(--red-2)); /* fixed color/gradient (css background property) */ 54 | 55 | /* background image options */ 56 | --background-image: off; /* off: no background image, on: enable background image (must set url variable below) */ 57 | --background-image-url: url(''); /* url of the background image */ 58 | 59 | /* transparency/blur options */ 60 | /* NOTE: TO USE TRANSPARENCY/BLUR, YOU MUST HAVE TRANSPARENT BG COLORS. FOR EXAMPLE: --bg-4: hsla(220, 15%, 10%, 0.7); */ 61 | --transparency-tweaks: off; /* off: no changes, on: remove some elements for better transparency */ 62 | --remove-bg-layer: off; /* off: no changes, on: remove the base --bg-3 layer for use with window transparency (WILL OVERRIDE BACKGROUND IMAGE) */ 63 | --panel-blur: off; /* off: no changes, on: blur the background of panels */ 64 | --blur-amount: 12px; /* amount of blur */ 65 | --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 */ 66 | 67 | /* other options */ 68 | --small-user-panel: on; /* off: default user panel, on: smaller user panel like in old discord */ 69 | 70 | /* unrounding options */ 71 | --unrounding: on; /* off: default, on: remove rounded corners from panels */ 72 | 73 | /* styling options */ 74 | --custom-spotify-bar: on; /* off: default, on: custom text-like spotify progress bar */ 75 | --ascii-titles: on; /* off: default, on: use ascii font for titles at the start of a channel */ 76 | --ascii-loader: system24; /* off: default, system24: use system24 ascii loader, cats: use cats loader */ 77 | 78 | /* panel labels */ 79 | --panel-labels: on; /* off: default, on: add labels to panels */ 80 | --label-color: var(--text-muted); /* color of labels */ 81 | --label-font-weight: 500; /* font weight of labels */ 82 | } 83 | 84 | /* color options */ 85 | :root { 86 | --colors: on; /* off: discord default colors, on: midnight custom colors */ 87 | 88 | /* text colors */ 89 | --text-0: var(--bg-4); /* text on colored elements */ 90 | --text-1: hsl(227, 68%, 95%); /* bright text on colored elements */ 91 | --text-2: #cad3f5; /* headings and important text */ 92 | --text-3: #b8c0e0; /* normal text */ 93 | --text-4: #8087a2; /* icon buttons and channels */ 94 | --text-5: #5b6078; /* muted channels/chats and timestamps */ 95 | 96 | /* background and dark colors */ 97 | --bg-1: #494d64; /* dark buttons when clicked */ 98 | --bg-2: #363a4f; /* dark buttons */ 99 | --bg-3: #1e2030; /* spacing, secondary elements */ 100 | --bg-4: #24273a; /* main background color */ 101 | --hover: hsla(230, 15%, 53%, 0.1); /* channels and buttons when hovered */ 102 | --active: hsla(230, 15%, 53%, 0.2); /* channels and buttons when clicked or selected */ 103 | --active-2: hsla(230, 15%, 53%, 0.3); /* extra state for transparent buttons */ 104 | --message-hover: hsla(230, 0%, 0%, 0.1); /* messages when hovered */ 105 | 106 | /* accent colors */ 107 | --accent-1: var(--purple-1); /* links and other accent text */ 108 | --accent-2: var(--purple-2); /* small accent elements */ 109 | --accent-3: var(--purple-3); /* accent buttons */ 110 | --accent-4: var(--purple-4); /* accent buttons when hovered */ 111 | --accent-5: var(--purple-5); /* accent buttons when clicked */ 112 | --accent-new: var(--accent-2); /* stuff that's normally red like mute/deafen buttons */ 113 | --mention: linear-gradient(to right, color-mix(in hsl, var(--accent-2), transparent 90%) 40%, transparent); /* background of messages that mention you */ 114 | --mention-hover: linear-gradient(to right, color-mix(in hsl, var(--accent-2), transparent 95%) 40%, transparent); /* background of messages that mention you when hovered */ 115 | --reply: linear-gradient(to right, color-mix(in hsl, var(--text-3), transparent 90%) 40%, transparent); /* background of messages that reply to you */ 116 | --reply-hover: linear-gradient(to right, color-mix(in hsl, var(--text-3), transparent 95%) 40%, transparent); /* background of messages that reply to you when hovered */ 117 | 118 | /* status indicator colors */ 119 | --online: var(--green-2); /* change to #43a25a for default */ 120 | --dnd: var(--red-2); /* change to #d83a42 for default */ 121 | --idle: var(--yellow-2); /* change to #ca9654 for default */ 122 | --streaming: var(--purple-2); /* change to #593695 for default */ 123 | --offline: var(--text-4); /* change to #83838b for default offline color */ 124 | 125 | /* border colors */ 126 | --border-light: var(--hover); /* general light border color */ 127 | --border: var(--active); /* general normal border color */ 128 | --border-hover: var(--accent-2); /* border color of panels when hovered */ 129 | --button-border: hsl(230, 0%, 100%, 0.1); /* neutral border color of buttons */ 130 | 131 | /* base colors */ 132 | --red-1: hsl(351deg, 74%, 78%); 133 | --red-2: hsl(351deg, 74%, 73%); 134 | --red-3: hsl(351deg, 74%, 73%); 135 | --red-4: hsl(351deg, 74%, 68%); 136 | --red-5: hsl(351deg, 74%, 63%); 137 | 138 | --green-1: hsl(105deg, 48%, 77%); 139 | --green-2: hsl(105deg, 48%, 72%); 140 | --green-3: hsl(105deg, 48%, 72%); 141 | --green-4: hsl(105deg, 48%, 67%); 142 | --green-5: hsl(105deg, 48%, 62%); 143 | 144 | --blue-1: hsl(199deg, 66%, 74%); 145 | --blue-2: hsl(199deg, 66%, 69%); 146 | --blue-3: hsl(199deg, 66%, 69%); 147 | --blue-4: hsl(199deg, 66%, 64%); 148 | --blue-5: hsl(199deg, 66%, 59%); 149 | 150 | --yellow-1: hsl(40deg, 70%, 83%); 151 | --yellow-2: hsl(40deg, 70%, 78%); 152 | --yellow-3: hsl(40deg, 70%, 78%); 153 | --yellow-4: hsl(40deg, 70%, 73%); 154 | --yellow-5: hsl(40deg, 70%, 68%); 155 | 156 | --purple-1: hsl(267deg, 83%, 85%); 157 | --purple-2: hsl(267deg, 83%, 80%); 158 | --purple-3: hsl(267deg, 83%, 80%); 159 | --purple-4: hsl(267deg, 83%, 75%); 160 | --purple-5: hsl(267deg, 83%, 70%); 161 | } 162 | -------------------------------------------------------------------------------- /theme/flavors/system24-catppuccin-mocha.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name system24 (catppuccin mocha) 3 | * @description a tui-like discord theme. based on catppuccin mocha theme (https://catppuccin.com). 4 | * @author refact0r 5 | * @version 2.0.0 6 | * @invite nz87hXyvcy 7 | * @website https://github.com/refact0r/system24 8 | * @source https://github.com/refact0r/system24/blob/master/theme/system24-catppuccin-mocha.theme.css 9 | * @authorId 508863359777505290 10 | * @authorLink https://www.refact0r.dev 11 | */ 12 | 13 | /* import theme modules */ 14 | @import url('https://refact0r.github.io/system24/build/system24.css'); 15 | 16 | body { 17 | /* font, change to '' for default discord font */ 18 | --font: 'DM Mono'; /* change to '' for default discord font */ 19 | --code-font: 'DM Mono'; /* change to '' for default discord font */ 20 | font-weight: 300; /* text font weight. 300 is light, 400 is normal. DOES NOT AFFECT BOLD TEXT */ 21 | letter-spacing: -0.05ch; /* decreases letter spacing for better readability. recommended on monospace fonts.*/ 22 | 23 | /* sizes */ 24 | --gap: 12px; /* spacing between panels */ 25 | --divider-thickness: 4px; /* thickness of unread messages divider and highlighted message borders */ 26 | --border-thickness: 2px; /* thickness of borders around main panels. DOES NOT AFFECT OTHER BORDERS */ 27 | --border-hover-transition: 0.2s ease; /* transition for borders when hovered */ 28 | 29 | /* animation/transition options */ 30 | --animations: on; /* off: disable animations/transitions, on: enable animations/transitions */ 31 | --list-item-transition: 0.2s ease; /* transition for list items */ 32 | --dms-icon-svg-transition: 0.4s ease; /* transition for the dms icon */ 33 | 34 | /* top bar options */ 35 | --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) */ 36 | --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) */ 37 | --top-bar-title-position: off; /* off: default centered position, hide: hide title completely, left: left align title (like old discord) */ 38 | --subtle-top-bar-title: off; /* off: default, on: hide the icon and use subtle text color (like old discord) */ 39 | 40 | /* window controls */ 41 | --custom-window-controls: off; /* off: default window controls, on: custom window controls */ 42 | --window-control-size: 14px; /* size of custom window controls */ 43 | 44 | /* dms button options */ 45 | --custom-dms-icon: hide; /* off: use default discord icon, hide: remove icon entirely, custom: use custom icon */ 46 | --dms-icon-svg-url: url(''); /* icon svg url. MUST BE A SVG. */ 47 | --dms-icon-svg-size: 90%; /* size of the svg (css mask-size property) */ 48 | --dms-icon-color-before: var(--icon-secondary); /* normal icon color */ 49 | --dms-icon-color-after: var(--white); /* icon color when button is hovered/selected */ 50 | --custom-dms-background: image; /* off to disable, image to use a background image (must set url variable below), color to use a custom color/gradient */ 51 | --dms-background-image-url: url('https://raw.githubusercontent.com/catppuccin/catppuccin/refs/heads/main/assets/logos/exports/macchiato_square.png'); /* url of the background image */ 52 | --dms-background-image-size: cover; /* size of the background image (css background-size property) */ 53 | --dms-background-color: linear-gradient(70deg, var(--blue-2), var(--purple-2), var(--red-2)); /* fixed color/gradient (css background property) */ 54 | 55 | /* background image options */ 56 | --background-image: off; /* off: no background image, on: enable background image (must set url variable below) */ 57 | --background-image-url: url(''); /* url of the background image */ 58 | 59 | /* transparency/blur options */ 60 | /* NOTE: TO USE TRANSPARENCY/BLUR, YOU MUST HAVE TRANSPARENT BG COLORS. FOR EXAMPLE: --bg-4: hsla(220, 15%, 10%, 0.7); */ 61 | --transparency-tweaks: off; /* off: no changes, on: remove some elements for better transparency */ 62 | --remove-bg-layer: off; /* off: no changes, on: remove the base --bg-3 layer for use with window transparency (WILL OVERRIDE BACKGROUND IMAGE) */ 63 | --panel-blur: off; /* off: no changes, on: blur the background of panels */ 64 | --blur-amount: 12px; /* amount of blur */ 65 | --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 */ 66 | 67 | /* other options */ 68 | --small-user-panel: on; /* off: default user panel, on: smaller user panel like in old discord */ 69 | 70 | /* unrounding options */ 71 | --unrounding: on; /* off: default, on: remove rounded corners from panels */ 72 | 73 | /* styling options */ 74 | --custom-spotify-bar: on; /* off: default, on: custom text-like spotify progress bar */ 75 | --ascii-titles: on; /* off: default, on: use ascii font for titles at the start of a channel */ 76 | --ascii-loader: system24; /* off: default, system24: use system24 ascii loader, cats: use cats loader */ 77 | 78 | /* panel labels */ 79 | --panel-labels: on; /* off: default, on: add labels to panels */ 80 | --label-color: var(--text-muted); /* color of labels */ 81 | --label-font-weight: 500; /* font weight of labels */ 82 | } 83 | 84 | /* color options */ 85 | :root { 86 | --colors: on; /* off: discord default colors, on: midnight custom colors */ 87 | 88 | /* text colors */ 89 | --text-0: var(--bg-3); /* text on colored elements */ 90 | --text-1: hsl(226, 64%, 95%); /* other normally white text */ 91 | --text-2: #cdd6f4; /* headings and important text */ 92 | --text-3: #bac2de; /* normal text */ 93 | --text-4: #7f849c; /* icon buttons and channels */ 94 | --text-5: #585b70; /* muted channels/chats and timestamps */ 95 | 96 | /* background and dark colors */ 97 | --bg-1: #45475a; /* dark buttons when clicked */ 98 | --bg-2: #313244; /* dark buttons */ 99 | --bg-3: #181825; /* spacing, secondary elements */ 100 | --bg-4: #1e1e2e; /* main background color */ 101 | --hover: hsla(235, 15%, 53%, 0.1); /* channels and buttons when hovered */ 102 | --active: hsla(235, 15%, 53%, 0.2); /* channels and buttons when clicked or selected */ 103 | --active-2: hsla(235, 15%, 53%, 0.3); /* extra state for transparent buttons */ 104 | --message-hover: hsla(235, 0%, 0%, 0.1); /* messages when hovered */ 105 | 106 | /* accent colors */ 107 | --accent-1: var(--purple-1); /* links and other accent text */ 108 | --accent-2: var(--purple-2); /* small accent elements */ 109 | --accent-3: var(--purple-3); /* accent buttons */ 110 | --accent-4: var(--purple-4); /* accent buttons when hovered */ 111 | --accent-5: var(--purple-5); /* accent buttons when clicked */ 112 | --accent-new: var(--accent-2); /* stuff that's normally red like mute/deafen buttons */ 113 | --mention: linear-gradient(to right, color-mix(in hsl, var(--accent-2), transparent 90%) 40%, transparent); /* background of messages that mention you */ 114 | --mention-hover: linear-gradient(to right, color-mix(in hsl, var(--accent-2), transparent 95%) 40%, transparent); /* background of messages that mention you when hovered */ 115 | --reply: linear-gradient(to right, color-mix(in hsl, var(--text-3), transparent 90%) 40%, transparent); /* background of messages that reply to you */ 116 | --reply-hover: linear-gradient(to right, color-mix(in hsl, var(--text-3), transparent 95%) 40%, transparent); /* background of messages that reply to you when hovered */ 117 | 118 | /* status indicator colors */ 119 | --online: var(--green-2); /* change to #43a25a for default */ 120 | --dnd: var(--red-2); /* change to #d83a42 for default */ 121 | --idle: var(--yellow-2); /* change to #ca9654 for default */ 122 | --streaming: var(--purple-2); /* change to #593695 for default */ 123 | --offline: var(--text-4); /* change to #83838b for default offline color */ 124 | 125 | /* border colors */ 126 | --border-light: var(--hover); /* general light border color */ 127 | --border: var(--active); /* general normal border color */ 128 | --border-hover: var(--accent-2); /* border color of panels when hovered */ 129 | --button-border: hsl(235, 0%, 100%, 0.1); /* neutral border color of buttons */ 130 | 131 | /* base colors */ 132 | --red-1: hsl(343deg, 81%, 80%); 133 | --red-2: hsl(343deg, 81%, 75%); 134 | --red-3: hsl(343deg, 81%, 75%); 135 | --red-4: hsl(343deg, 81%, 70%); 136 | --red-5: hsl(343deg, 81%, 65%); 137 | 138 | --green-1: hsl(115deg, 54%, 81%); 139 | --green-2: hsl(115deg, 54%, 76%); 140 | --green-3: hsl(115deg, 54%, 76%); 141 | --green-4: hsl(115deg, 54%, 71%); 142 | --green-5: hsl(115deg, 54%, 66%); 143 | 144 | --blue-1: hsl(199deg, 76%, 74%); 145 | --blue-2: hsl(199deg, 76%, 69%); 146 | --blue-3: hsl(199deg, 76%, 69%); 147 | --blue-4: hsl(199deg, 76%, 64%); 148 | --blue-5: hsl(199deg, 76%, 59%); 149 | 150 | --yellow-1: hsl(41deg, 86%, 88%); 151 | --yellow-2: hsl(41deg, 86%, 83%); 152 | --yellow-3: hsl(41deg, 86%, 83%); 153 | --yellow-4: hsl(41deg, 86%, 78%); 154 | --yellow-5: hsl(41deg, 86%, 73%); 155 | 156 | --purple-1: hsl(267deg, 84%, 86%); 157 | --purple-2: hsl(267deg, 84%, 81%); 158 | --purple-3: hsl(267deg, 84%, 81%); 159 | --purple-4: hsl(267deg, 84%, 76%); 160 | --purple-5: hsl(267deg, 84%, 71%); 161 | } 162 | -------------------------------------------------------------------------------- /theme/flavors/system24-everforest.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name system24 (everforest) 3 | * @description a tui-like discord theme. 4 | * @author refact0r 5 | * @version 2.0.0 6 | * @invite nz87hXyvcy 7 | * @website https://github.com/refact0r/system24 8 | * @source https://github.com/refact0r/system24/blob/master/theme/system24.theme.css 9 | * @authorId 508863359777505290 10 | * @authorLink https://www.refact0r.dev 11 | */ 12 | 13 | /* import theme modules */ 14 | @import url('https://refact0r.github.io/system24/build/system24.css'); 15 | 16 | body { 17 | /* font, change to '' for default discord font */ 18 | --font: 'DM Mono'; /* change to '' for default discord font */ 19 | --code-font: 'DM Mono'; /* change to '' for default discord font */ 20 | font-weight: 300; /* text font weight. 300 is light, 400 is normal. DOES NOT AFFECT BOLD TEXT */ 21 | letter-spacing: -0.05ch; /* decreases letter spacing for better readability. recommended on monospace fonts.*/ 22 | 23 | /* sizes */ 24 | --gap: 12px; /* spacing between panels */ 25 | --divider-thickness: 4px; /* thickness of unread messages divider and highlighted message borders */ 26 | --border-thickness: 2px; /* thickness of borders around main panels. DOES NOT AFFECT OTHER BORDERS */ 27 | --border-hover-transition: 0.2s ease; /* transition for borders when hovered */ 28 | 29 | /* animation/transition options */ 30 | --animations: on; /* off: disable animations/transitions, on: enable animations/transitions */ 31 | --list-item-transition: 0.2s ease; /* transition for list items */ 32 | --dms-icon-svg-transition: 0.4s ease; /* transition for the dms icon */ 33 | 34 | /* top bar options */ 35 | --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) */ 36 | --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) */ 37 | --top-bar-title-position: off; /* off: default centered position, hide: hide title completely, left: left align title (like old discord) */ 38 | --subtle-top-bar-title: off; /* off: default, on: hide the icon and use subtle text color (like old discord) */ 39 | 40 | /* window controls */ 41 | --custom-window-controls: off; /* off: default window controls, on: custom window controls */ 42 | --window-control-size: 14px; /* size of custom window controls */ 43 | 44 | /* dms button options */ 45 | --custom-dms-icon: off; /* off: use default discord icon, hide: remove icon entirely, custom: use custom icon */ 46 | --dms-icon-svg-url: url(''); /* icon svg url. MUST BE A SVG. */ 47 | --dms-icon-svg-size: 90%; /* size of the svg (css mask-size property) */ 48 | --dms-icon-color-before: var(--icon-secondary); /* normal icon color */ 49 | --dms-icon-color-after: var(--white); /* icon color when button is hovered/selected */ 50 | --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 */ 51 | --dms-background-image-url: url(''); /* url of the background image */ 52 | --dms-background-image-size: cover; /* size of the background image (css background-size property) */ 53 | --dms-background-color: linear-gradient(70deg, var(--blue-2), var(--purple-2), var(--red-2)); /* fixed color/gradient (css background property) */ 54 | 55 | /* background image options */ 56 | --background-image: off; /* off: no background image, on: enable background image (must set url variable below) */ 57 | --background-image-url: url(''); /* url of the background image */ 58 | 59 | /* transparency/blur options */ 60 | /* NOTE: TO USE TRANSPARENCY/BLUR, YOU MUST HAVE TRANSPARENT BG COLORS. FOR EXAMPLE: --bg-4: hsla(220, 15%, 10%, 0.7); */ 61 | --transparency-tweaks: off; /* off: no changes, on: remove some elements for better transparency */ 62 | --remove-bg-layer: off; /* off: no changes, on: remove the base --bg-3 layer for use with window transparency (WILL OVERRIDE BACKGROUND IMAGE) */ 63 | --panel-blur: off; /* off: no changes, on: blur the background of panels */ 64 | --blur-amount: 12px; /* amount of blur */ 65 | --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 */ 66 | 67 | /* other options */ 68 | --small-user-panel: on; /* off: default user panel, on: smaller user panel like in old discord */ 69 | 70 | /* unrounding options */ 71 | --unrounding: on; /* off: default, on: remove rounded corners from panels */ 72 | 73 | /* styling options */ 74 | --custom-spotify-bar: on; /* off: default, on: custom text-like spotify progress bar */ 75 | --ascii-titles: on; /* off: default, on: use ascii font for titles at the start of a channel */ 76 | --ascii-loader: system24; /* off: default, system24: use system24 ascii loader, cats: use cats loader */ 77 | 78 | /* panel labels */ 79 | --panel-labels: on; /* off: default, on: add labels to panels */ 80 | --label-color: var(--text-muted); /* color of labels */ 81 | --label-font-weight: 500; /* font weight of labels */ 82 | } 83 | 84 | /* color options */ 85 | :root { 86 | --colors: on; /* off: discord default colors, on: everforest custom colors */ 87 | 88 | /* text colors */ 89 | --text-0: var(--bg-4); /* text on colored elements */ 90 | --text-1: oklch(0.9 0.0405 86.05); /* other normally white text */ 91 | --text-2: oklch(0.83 0.0405 86.05); /* headings and important text */ 92 | --text-3: oklch(0.83 0.0405 86.05); /* normal text */ 93 | --text-4: oklch(0.7 0.0405 86.05); /* icon buttons and channels */ 94 | --text-5: var(--green-5); /* muted channels/chats and timestamps */ 95 | 96 | /* background and dark colors */ 97 | --bg-1: oklch(0.39 0.0166 226.98); /* dark buttons when clicked */ 98 | --bg-2: oklch(0.36 0.0169 227.06); /* dark buttons */ 99 | --bg-3: oklch(0.28 0.0123 232.92); /* spacing, secondary elements */ 100 | --bg-4: oklch(0.32 0.0153 240.42); /* main background color */ 101 | --hover: var(--bg-2); /* channels and buttons when hovered */ 102 | --active: var(--bg-1); /* channels and buttons when clicked or selected */ 103 | --active-2: oklch(0.43 0.0172 231.6); /* extra state for transparent buttons */ 104 | --message-hover: var(--hover); /* messages when hovered */ 105 | 106 | /* accent colors */ 107 | --accent-1: var(--green-1); /* links and other accent text */ 108 | --accent-2: var(--green-2); /* small accent elements */ 109 | --accent-3: var(--green-3); /* accent buttons */ 110 | --accent-4: var(--green-4); /* accent buttons when hovered */ 111 | --accent-5: var(--green-5); /* accent buttons when clicked */ 112 | --accent-new: var(--red-2); /* stuff that's normally red like mute/deafen buttons */ 113 | --mention: linear-gradient(to right, color-mix(in hsl, var(--accent-2), transparent 90%) 40%, transparent); /* background of messages that mention you */ 114 | --mention-hover: linear-gradient(to right, color-mix(in hsl, var(--accent-2), transparent 95%) 40%, transparent); /* background of messages that mention you when hovered */ 115 | --reply: linear-gradient(to right, color-mix(in hsl, var(--text-3), transparent 90%) 40%, transparent); /* background of messages that reply to you */ 116 | --reply-hover: linear-gradient(to right, color-mix(in hsl, var(--text-3), transparent 95%) 40%, transparent); /* background of messages that reply to you when hovered */ 117 | 118 | /* status indicator colors */ 119 | --online: var(--green-2); /* change to #40a258 for default */ 120 | --dnd: var(--red-2); /* change to #d83a41 for default */ 121 | --idle: var(--yellow-2); /* change to #cc954c for default */ 122 | --streaming: var(--purple-2); /* change to ##9147ff for default */ 123 | --offline: var(--text-4); /* change to #82838b for default offline color */ 124 | 125 | /* border colors */ 126 | --border-light: var(--hover); /* general light border color */ 127 | --border: var(--active); /* general normal border color */ 128 | --border-hover: var(--accent-2); /* border color of panels when hovered */ 129 | --button-border: hsl(220, 0%, 100%, 0.1); /* neutral border color of buttons */ 130 | 131 | /* base colors */ 132 | --red-1: oklch(0.71 0.1285 19.62); 133 | --red-2: var(--red-1); 134 | --red-3: var(--red-1); 135 | --red-4: oklch(0.55 0.1285 19.62); 136 | --red-5: oklch(0.38 0.0425 345.78); 137 | 138 | --green-1: oklch(0.77 0.0906 125.78); 139 | --green-2: var(--green-1); 140 | --green-3: var(--green-1); 141 | --green-4: oklch(0.6 0.0906 125.78); 142 | --green-5: oklch(0.42 0.0231 157.06); 143 | 144 | --blue-1: oklch(0.75 0.0631 185.49); 145 | --blue-2: var(--blue-1); 146 | --blue-3: var(--blue-1); 147 | --blue-4: oklch(0.6 0.0631 185.49); 148 | --blue-5: oklch(0.42 0.0345 231.32); 149 | 150 | --yellow-1: oklch(0.81 0.0863 83.7); 151 | --yellow-2: var(--yellow-1); 152 | --yellow-3: var(--yellow-1); 153 | --yellow-4: oklch(0.61 0.0863 83.7); 154 | --yellow-5: oklch(0.41 0.0146 101.82); 155 | 156 | --purple-1: oklch(0.75 0.0818 349.18); 157 | --purple-2: var(--purple-1); 158 | --purple-3: var(--purple-1); 159 | --purple-4: oklch(0.57 0.0818 349.18); 160 | --purple-5: var(--red-5); 161 | } 162 | -------------------------------------------------------------------------------- /theme/flavors/system24-nord.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name system24 (nord) 3 | * @description a tui-like discord theme. based on nord theme (https://www.nordtheme.com). 4 | * @author refact0r 5 | * @version 2.0.0 6 | * @invite nz87hXyvcy 7 | * @website https://github.com/refact0r/system24 8 | * @source https://github.com/refact0r/system24/blob/master/theme/system24-nord.theme.css 9 | * @authorId 508863359777505290 10 | * @authorLink https://www.refact0r.dev 11 | */ 12 | 13 | /* import theme modules */ 14 | @import url('https://refact0r.github.io/system24/build/system24.css'); 15 | 16 | body { 17 | /* font, change to '' for default discord font */ 18 | --font: 'DM Mono'; /* change to '' for default discord font */ 19 | --code-font: 'DM Mono'; /* change to '' for default discord font */ 20 | font-weight: 300; /* text font weight. 300 is light, 400 is normal. DOES NOT AFFECT BOLD TEXT */ 21 | letter-spacing: -0.05ch; /* decreases letter spacing for better readability. recommended on monospace fonts.*/ 22 | 23 | /* sizes */ 24 | --gap: 12px; /* spacing between panels */ 25 | --divider-thickness: 4px; /* thickness of unread messages divider and highlighted message borders */ 26 | --border-thickness: 2px; /* thickness of borders around main panels. DOES NOT AFFECT OTHER BORDERS */ 27 | --border-hover-transition: 0.2s ease; /* transition for borders when hovered */ 28 | 29 | /* animation/transition options */ 30 | --animations: on; /* off: disable animations/transitions, on: enable animations/transitions */ 31 | --list-item-transition: 0.2s ease; /* transition for list items */ 32 | --dms-icon-svg-transition: 0.4s ease; /* transition for the dms icon */ 33 | 34 | /* top bar options */ 35 | --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) */ 36 | --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) */ 37 | --top-bar-title-position: off; /* off: default centered position, hide: hide title completely, left: left align title (like old discord) */ 38 | --subtle-top-bar-title: off; /* off: default, on: hide the icon and use subtle text color (like old discord) */ 39 | 40 | /* window controls */ 41 | --custom-window-controls: off; /* off: default window controls, on: custom window controls */ 42 | --window-control-size: 14px; /* size of custom window controls */ 43 | 44 | /* dms button options */ 45 | --custom-dms-icon: off; /* off: use default discord icon, hide: remove icon entirely, custom: use custom icon */ 46 | --dms-icon-svg-url: url(''); /* icon svg url. MUST BE A SVG. */ 47 | --dms-icon-svg-size: 90%; /* size of the svg (css mask-size property) */ 48 | --dms-icon-color-before: var(--icon-secondary); /* normal icon color */ 49 | --dms-icon-color-after: var(--white); /* icon color when button is hovered/selected */ 50 | --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 */ 51 | --dms-background-image-url: url(''); /* url of the background image */ 52 | --dms-background-image-size: cover; /* size of the background image (css background-size property) */ 53 | --dms-background-color: linear-gradient(70deg, var(--blue-2), var(--purple-2), var(--red-2)); /* fixed color/gradient (css background property) */ 54 | 55 | /* background image options */ 56 | --background-image: off; /* off: no background image, on: enable background image (must set url variable below) */ 57 | --background-image-url: url(''); /* url of the background image */ 58 | 59 | /* transparency/blur options */ 60 | /* NOTE: TO USE TRANSPARENCY/BLUR, YOU MUST HAVE TRANSPARENT BG COLORS. FOR EXAMPLE: --bg-4: hsla(220, 15%, 10%, 0.7); */ 61 | --transparency-tweaks: off; /* off: no changes, on: remove some elements for better transparency */ 62 | --remove-bg-layer: off; /* off: no changes, on: remove the base --bg-3 layer for use with window transparency (WILL OVERRIDE BACKGROUND IMAGE) */ 63 | --panel-blur: off; /* off: no changes, on: blur the background of panels */ 64 | --blur-amount: 12px; /* amount of blur */ 65 | --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 */ 66 | 67 | /* other options */ 68 | --small-user-panel: on; /* off: default user panel, on: smaller user panel like in old discord */ 69 | 70 | /* unrounding options */ 71 | --unrounding: on; /* off: default, on: remove rounded corners from panels */ 72 | 73 | /* styling options */ 74 | --custom-spotify-bar: on; /* off: default, on: custom text-like spotify progress bar */ 75 | --ascii-titles: on; /* off: default, on: use ascii font for titles at the start of a channel */ 76 | --ascii-loader: system24; /* off: default, system24: use system24 ascii loader, cats: use cats loader */ 77 | 78 | /* panel labels */ 79 | --panel-labels: on; /* off: default, on: add labels to panels */ 80 | --label-color: var(--text-muted); /* color of labels */ 81 | --label-font-weight: 500; /* font weight of labels */ 82 | } 83 | 84 | /* color options */ 85 | :root { 86 | --colors: on; /* off: discord default colors, on: midnight custom colors */ 87 | 88 | /* text colors */ 89 | --text-0: var(--bg-3); /* text on colored elements */ 90 | --text-1: #eceff4; /* other normally white text */ 91 | --text-2: #e5e9f0; /* headings and important text */ 92 | --text-3: #d8dee9; /* normal text */ 93 | --text-4: hsl(220, 20%, 67%); /* icon buttons and channels */ 94 | --text-5: #4c566a; /* muted channels/chats and timestamps */ 95 | 96 | /* background and dark colors */ 97 | --bg-1: #434c5e; /* dark buttons when clicked */ 98 | --bg-2: #3b4252; /* dark buttons */ 99 | --bg-3: #272b35; /* spacing, secondary elements */ 100 | --bg-4: #2e3440; /* main background color */ 101 | --hover: hsla(220, 20%, 50%, 0.1); /* channels and buttons when hovered */ 102 | --active: hsla(220, 20%, 50%, 0.2); /* channels and buttons when clicked or selected */ 103 | --active-2: hsla(220, 20%, 50%, 0.3); /* extra state for transparent buttons */ 104 | --message-hover: hsla(0, 0%, 0%, 0.1); /* messages when hovered */ 105 | 106 | /* accent colors */ 107 | --accent-1: var(--blue-1); /* links and other accent text */ 108 | --accent-2: var(--blue-2); /* small accent elements */ 109 | --accent-3: var(--blue-3); /* accent buttons */ 110 | --accent-4: var(--blue-4); /* accent buttons when hovered */ 111 | --accent-5: var(--blue-5); /* accent buttons when clicked */ 112 | --accent-new: var(--accent-2); /* stuff that's normally red like mute/deafen buttons */ 113 | --mention: linear-gradient(to right, color-mix(in hsl, var(--accent-2), transparent 90%) 40%, transparent); /* background of messages that mention you */ 114 | --mention-hover: linear-gradient(to right, color-mix(in hsl, var(--accent-2), transparent 95%) 40%, transparent); /* background of messages that mention you when hovered */ 115 | --reply: linear-gradient(to right, color-mix(in hsl, var(--text-3), transparent 90%) 40%, transparent); /* background of messages that reply to you */ 116 | --reply-hover: linear-gradient(to right, color-mix(in hsl, var(--text-3), transparent 95%) 40%, transparent); /* background of messages that reply to you when hovered */ 117 | 118 | /* status indicator colors */ 119 | --online: var(--green-2); /* change to #43a25a for default */ 120 | --dnd: var(--red-2); /* change to #d83a42 for default */ 121 | --idle: var(--yellow-2); /* change to #ca9654 for default */ 122 | --streaming: var(--purple-2); /* change to #593695 for default */ 123 | --offline: var(--text-4); /* change to #83838b for default offline color */ 124 | 125 | /* border colors */ 126 | --border-light: hsla(220, 20%, 50%, 0.05); /* general light border color */ 127 | --border: hsla(220, 20%, 50%, 0.1); /* general normal border color */ 128 | --border-hover: var(--accent-2); /* border color of panels when hovered */ 129 | --button-border: hsl(0, 0%, 100%, 0.1); /* neutral border color of buttons */ 130 | 131 | /* base colors */ 132 | --red-1: hsl(354, 42%, 61%); 133 | --red-2: #bf616a; 134 | --red-3: #bf616a; 135 | --red-4: hsl(354, 42%, 51%); 136 | --red-5: hsl(354, 42%, 46%); 137 | 138 | --green-1: hsl(92, 28%, 70%); 139 | --green-2: #a3be8c; 140 | --green-3: #a3be8c; 141 | --green-4: hsl(92, 28%, 60%); 142 | --green-5: hsl(92, 28%, 55%); 143 | 144 | --blue-1: hsl(193, 43%, 72%); 145 | --blue-2: #88c0d0; 146 | --blue-3: #88c0d0; 147 | --blue-4: hsl(193, 43%, 62%); 148 | --blue-5: hsl(193, 43%, 57%); 149 | 150 | --yellow-1: hsl(40, 71%, 78%); 151 | --yellow-2: #ebcb8b; 152 | --yellow-3: #ebcb8b; 153 | --yellow-4: hsl(40, 71%, 68%); 154 | --yellow-5: hsl(40, 71%, 63%); 155 | 156 | --purple-1: hsl(311, 20%, 68%); 157 | --purple-2: #b48ead; 158 | --purple-3: #b48ead; 159 | --purple-4: hsl(311, 20%, 58%); 160 | --purple-5: hsl(311, 20%, 53%); 161 | } 162 | -------------------------------------------------------------------------------- /theme/flavors/system24-rose-pine-moon.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name system24 (rosé pine moon) 3 | * @description a tui-like discord theme. based on rosé pine moon theme (https://rosepinetheme.com). 4 | * @author refact0r 5 | * @version 2.0.0 6 | * @invite nz87hXyvcy 7 | * @website https://github.com/refact0r/system24 8 | * @source https://github.com/refact0r/system24/blob/master/theme/system24-rose-pine-moon.theme.css 9 | * @authorId 508863359777505290 10 | * @authorLink https://www.refact0r.dev 11 | */ 12 | 13 | /* import theme modules */ 14 | @import url('https://refact0r.github.io/system24/build/system24.css'); 15 | 16 | body { 17 | /* font, change to '' for default discord font */ 18 | --font: 'DM Mono'; /* change to '' for default discord font */ 19 | --code-font: 'DM Mono'; /* change to '' for default discord font */ 20 | font-weight: 300; /* text font weight. 300 is light, 400 is normal. DOES NOT AFFECT BOLD TEXT */ 21 | letter-spacing: -0.05ch; /* decreases letter spacing for better readability. recommended on monospace fonts.*/ 22 | 23 | /* sizes */ 24 | --gap: 12px; /* spacing between panels */ 25 | --divider-thickness: 4px; /* thickness of unread messages divider and highlighted message borders */ 26 | --border-thickness: 2px; /* thickness of borders around main panels. DOES NOT AFFECT OTHER BORDERS */ 27 | --border-hover-transition: 0.2s ease; /* transition for borders when hovered */ 28 | 29 | /* animation/transition options */ 30 | --animations: on; /* off: disable animations/transitions, on: enable animations/transitions */ 31 | --list-item-transition: 0.2s ease; /* transition for list items */ 32 | --dms-icon-svg-transition: 0.4s ease; /* transition for the dms icon */ 33 | 34 | /* top bar options */ 35 | --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) */ 36 | --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) */ 37 | --top-bar-title-position: off; /* off: default centered position, hide: hide title completely, left: left align title (like old discord) */ 38 | --subtle-top-bar-title: off; /* off: default, on: hide the icon and use subtle text color (like old discord) */ 39 | 40 | /* window controls */ 41 | --custom-window-controls: off; /* off: default window controls, on: custom window controls */ 42 | --window-control-size: 14px; /* size of custom window controls */ 43 | 44 | /* dms button options */ 45 | --custom-dms-icon: hide; /* off: use default discord icon, hide: remove icon entirely, custom: use custom icon */ 46 | --dms-icon-svg-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); /* icon svg url. MUST BE A SVG. */ 47 | --dms-icon-svg-size: 90%; /* size of the svg (css mask-size property) */ 48 | --dms-icon-color-before: var(--icon-secondary); /* normal icon color */ 49 | --dms-icon-color-after: var(--white); /* icon color when button is hovered/selected */ 50 | --custom-dms-background: image; /* off to disable, image to use a background image (must set url variable below), color to use a custom color/gradient */ 51 | --dms-background-image-url: url('https://raw.githubusercontent.com/rose-pine/rose-pine-theme/main/assets/icon.png'); /* url of the background image */ 52 | --dms-background-image-size: cover; /* size of the background image (css background-size property) */ 53 | --dms-background-color: linear-gradient(70deg, var(--blue-2), var(--purple-2), var(--red-2)); /* fixed color/gradient (css background property) */ 54 | 55 | /* background image options */ 56 | --background-image: off; /* off: no background image, on: enable background image (must set url variable below) */ 57 | --background-image-url: url(''); /* url of the background image */ 58 | 59 | /* transparency/blur options */ 60 | /* NOTE: TO USE TRANSPARENCY/BLUR, YOU MUST HAVE TRANSPARENT BG COLORS. FOR EXAMPLE: --bg-4: hsla(220, 15%, 10%, 0.7); */ 61 | --transparency-tweaks: off; /* off: no changes, on: remove some elements for better transparency */ 62 | --remove-bg-layer: off; /* off: no changes, on: remove the base --bg-3 layer for use with window transparency (WILL OVERRIDE BACKGROUND IMAGE) */ 63 | --panel-blur: off; /* off: no changes, on: blur the background of panels */ 64 | --blur-amount: 12px; /* amount of blur */ 65 | --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 */ 66 | 67 | /* other options */ 68 | --small-user-panel: on; /* off: default user panel, on: smaller user panel like in old discord */ 69 | 70 | /* unrounding options */ 71 | --unrounding: on; /* off: default, on: remove rounded corners from panels */ 72 | 73 | /* styling options */ 74 | --custom-spotify-bar: on; /* off: default, on: custom text-like spotify progress bar */ 75 | --ascii-titles: on; /* off: default, on: use ascii font for titles at the start of a channel */ 76 | --ascii-loader: system24; /* off: default, system24: use system24 ascii loader, cats: use cats loader */ 77 | 78 | /* panel labels */ 79 | --panel-labels: on; /* off: default, on: add labels to panels */ 80 | --label-color: var(--text-muted); /* color of labels */ 81 | --label-font-weight: 500; /* font weight of labels */ 82 | } 83 | 84 | /* color options */ 85 | :root { 86 | --colors: on; /* off: discord default colors, on: midnight custom colors */ 87 | 88 | /* text colors */ 89 | --text-0: var(--bg-2); /* text on colored elements */ 90 | --text-1: hsl(245deg, 50%, 95%); /* other normally white text */ 91 | --text-2: hsl(245deg, 50%, 91%); /* headings and important text */ 92 | --text-3: hsl(246deg, 30%, 80%); /* normal text */ 93 | --text-4: hsl(248deg, 15%, 61%); /* icon buttons and channels */ 94 | --text-5: hsl(249deg, 12%, 47%); /* muted channels/chats and timestamps */ 95 | 96 | /* background and dark colors */ 97 | --bg-1: hsl(248deg, 21%, 32%); /* dark buttons when clicked */ 98 | --bg-2: hsl(248deg, 21%, 26%); /* dark buttons */ 99 | --bg-3: hsl(248deg, 24%, 20%); /* spacing, secondary elements */ 100 | --bg-4: hsl(246deg, 24%, 17%); /* main background color */ 101 | --hover: hsla(250deg, 20%, 45%, 0.1); /* channels and buttons when hovered */ 102 | --active: hsla(250deg, 20%, 45%, 0.2); /* channels and buttons when clicked or selected */ 103 | --active-2: hsla(250deg, 20%, 45%, 0.3); /* extra state for transparent buttons */ 104 | --message-hover: hsla(250deg, 0%, 0%, 0.1); /* messages when hovered */ 105 | 106 | /* accent colors */ 107 | --accent-1: hsl(2deg, 66%, 80%); /* links and other accent text */ 108 | --accent-2: hsl(2deg, 66%, 75%); /* small accent elements */ 109 | --accent-3: hsl(2deg, 66%, 75%); /* accent buttons */ 110 | --accent-4: hsl(2deg, 66%, 70%); /* accent buttons when hovered */ 111 | --accent-5: hsl(2deg, 66%, 65%); /* accent buttons when clicked */ 112 | --accent-new: var(--red-2); /* stuff that's normally red like mute/deafen buttons */ 113 | --mention: linear-gradient(to right, color-mix(in hsl, var(--accent-2), transparent 90%) 40%, transparent); /* background of messages that mention you */ 114 | --mention-hover: linear-gradient(to right, color-mix(in hsl, var(--accent-2), transparent 95%) 40%, transparent); /* background of messages that mention you when hovered */ 115 | --reply: linear-gradient(to right, color-mix(in hsl, var(--text-3), transparent 90%) 40%, transparent); /* background of messages that reply to you */ 116 | --reply-hover: linear-gradient(to right, color-mix(in hsl, var(--text-3), transparent 95%) 40%, transparent); /* background of messages that reply to you when hovered */ 117 | 118 | /* status indicator colors */ 119 | --online: var(--green-2); /* change to #43a25a for default */ 120 | --dnd: var(--red-2); /* change to #d83a42 for default */ 121 | --idle: var(--yellow-2); /* change to #ca9654 for default */ 122 | --streaming: var(--purple-2); /* change to #593695 for default */ 123 | --offline: var(--text-4); /* change to #83838b for default offline color */ 124 | 125 | /* border colors */ 126 | --border-light: var(--hover); /* general light border color */ 127 | --border: var(--active); /* general normal border color */ 128 | --border-hover: var(--accent-2); /* border color of panels when hovered */ 129 | --button-border: hsl(250, 0%, 100%, 0.1); /* neutral border color of buttons */ 130 | 131 | /* base colors */ 132 | /* 2nd and 3rd colors are the default rose pine moon palette */ 133 | --red-1: hsl(343deg, 76%, 73%); 134 | --red-2: hsl(343deg, 76%, 68%); 135 | --red-3: hsl(343deg, 76%, 68%); 136 | --red-4: hsl(343deg, 76%, 63%); 137 | --red-5: hsl(343deg, 76%, 58%); 138 | 139 | --green-1: hsl(197deg, 48%, 52%); 140 | --green-2: hsl(197deg, 48%, 47%); 141 | --green-3: hsl(197deg, 48%, 47%); 142 | --green-4: hsl(197deg, 48%, 42%); 143 | --green-5: hsl(197deg, 48%, 37%); 144 | 145 | --blue-1: hsl(189deg, 43%, 78%); 146 | --blue-2: hsl(189deg, 43%, 73%); 147 | --blue-3: hsl(189deg, 43%, 73%); 148 | --blue-4: hsl(189deg, 43%, 68%); 149 | --blue-5: hsl(189deg, 43%, 63%); 150 | 151 | --yellow-1: hsl(35deg, 88%, 77%); 152 | --yellow-2: hsl(35deg, 88%, 72%); 153 | --yellow-3: hsl(35deg, 88%, 72%); 154 | --yellow-4: hsl(35deg, 88%, 67%); 155 | --yellow-5: hsl(35deg, 88%, 62%); 156 | 157 | --purple-1: hsl(267deg, 57%, 83%); 158 | --purple-2: hsl(267deg, 57%, 78%); 159 | --purple-3: hsl(267deg, 57%, 78%); 160 | --purple-4: hsl(267deg, 57%, 73%); 161 | --purple-5: hsl(267deg, 57%, 68%); 162 | } 163 | -------------------------------------------------------------------------------- /theme/flavors/system24-rose-pine.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name system24 (rosé pine) 3 | * @description a tui-like discord theme. based on rosé pine theme (https://rosepinetheme.com). 4 | * @author refact0r 5 | * @version 2.0.0 6 | * @invite nz87hXyvcy 7 | * @website https://github.com/refact0r/system24 8 | * @source https://github.com/refact0r/system24/blob/master/theme/system24-rose-pine.theme.css 9 | * @authorId 508863359777505290 10 | * @authorLink https://www.refact0r.dev 11 | */ 12 | 13 | /* import theme modules */ 14 | @import url('https://refact0r.github.io/system24/build/system24.css'); 15 | 16 | body { 17 | /* font, change to '' for default discord font */ 18 | --font: 'DM Mono'; /* change to '' for default discord font */ 19 | --code-font: 'DM Mono'; /* change to '' for default discord font */ 20 | font-weight: 300; /* text font weight. 300 is light, 400 is normal. DOES NOT AFFECT BOLD TEXT */ 21 | letter-spacing: -0.05ch; /* decreases letter spacing for better readability. recommended on monospace fonts.*/ 22 | 23 | /* sizes */ 24 | --gap: 12px; /* spacing between panels */ 25 | --divider-thickness: 4px; /* thickness of unread messages divider and highlighted message borders */ 26 | --border-thickness: 2px; /* thickness of borders around main panels. DOES NOT AFFECT OTHER BORDERS */ 27 | --border-hover-transition: 0.2s ease; /* transition for borders when hovered */ 28 | 29 | /* animation/transition options */ 30 | --animations: on; /* off: disable animations/transitions, on: enable animations/transitions */ 31 | --list-item-transition: 0.2s ease; /* transition for list items */ 32 | --dms-icon-svg-transition: 0.4s ease; /* transition for the dms icon */ 33 | 34 | /* top bar options */ 35 | --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) */ 36 | --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) */ 37 | --top-bar-title-position: off; /* off: default centered position, hide: hide title completely, left: left align title (like old discord) */ 38 | --subtle-top-bar-title: off; /* off: default, on: hide the icon and use subtle text color (like old discord) */ 39 | 40 | /* window controls */ 41 | --custom-window-controls: off; /* off: default window controls, on: custom window controls */ 42 | --window-control-size: 14px; /* size of custom window controls */ 43 | 44 | /* dms button options */ 45 | --custom-dms-icon: hide; /* off: use default discord icon, hide: remove icon entirely, custom: use custom icon */ 46 | --dms-icon-svg-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); /* icon svg url. MUST BE A SVG. */ 47 | --dms-icon-svg-size: 90%; /* size of the svg (css mask-size property) */ 48 | --dms-icon-color-before: var(--icon-secondary); /* normal icon color */ 49 | --dms-icon-color-after: var(--white); /* icon color when button is hovered/selected */ 50 | --custom-dms-background: image; /* off to disable, image to use a background image (must set url variable below), color to use a custom color/gradient */ 51 | --dms-background-image-url: url('https://raw.githubusercontent.com/rose-pine/rose-pine-theme/main/assets/icon.png'); /* url of the background image */ 52 | --dms-background-image-size: cover; /* size of the background image (css background-size property) */ 53 | --dms-background-color: linear-gradient(70deg, var(--blue-2), var(--purple-2), var(--red-2)); /* fixed color/gradient (css background property) */ 54 | 55 | /* background image options */ 56 | --background-image: off; /* off: no background image, on: enable background image (must set url variable below) */ 57 | --background-image-url: url(''); /* url of the background image */ 58 | 59 | /* transparency/blur options */ 60 | /* NOTE: TO USE TRANSPARENCY/BLUR, YOU MUST HAVE TRANSPARENT BG COLORS. FOR EXAMPLE: --bg-4: hsla(220, 15%, 10%, 0.7); */ 61 | --transparency-tweaks: off; /* off: no changes, on: remove some elements for better transparency */ 62 | --remove-bg-layer: off; /* off: no changes, on: remove the base --bg-3 layer for use with window transparency (WILL OVERRIDE BACKGROUND IMAGE) */ 63 | --panel-blur: off; /* off: no changes, on: blur the background of panels */ 64 | --blur-amount: 12px; /* amount of blur */ 65 | --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 */ 66 | 67 | /* other options */ 68 | --small-user-panel: on; /* off: default user panel, on: smaller user panel like in old discord */ 69 | 70 | /* unrounding options */ 71 | --unrounding: on; /* off: default, on: remove rounded corners from panels */ 72 | 73 | /* styling options */ 74 | --custom-spotify-bar: on; /* off: default, on: custom text-like spotify progress bar */ 75 | --ascii-titles: on; /* off: default, on: use ascii font for titles at the start of a channel */ 76 | --ascii-loader: system24; /* off: default, system24: use system24 ascii loader, cats: use cats loader */ 77 | 78 | /* panel labels */ 79 | --panel-labels: on; /* off: default, on: add labels to panels */ 80 | --label-color: var(--text-muted); /* color of labels */ 81 | --label-font-weight: 500; /* font weight of labels */ 82 | } 83 | 84 | /* color options */ 85 | :root { 86 | --colors: on; /* off: discord default colors, on: midnight custom colors */ 87 | 88 | /* text colors */ 89 | --text-0: var(--bg-3); /* text on colored elements */ 90 | --text-1: hsl(245deg, 50%, 95%); /* other normally white text */ 91 | --text-2: hsl(245deg, 50%, 91%); /* headings and important text */ 92 | --text-3: hsl(246deg, 30%, 80%); /* normal text */ 93 | --text-4: hsl(248deg, 15%, 61%); /* icon buttons and channels */ 94 | --text-5: hsl(249deg, 12%, 47%); /* muted channels/chats and timestamps */ 95 | 96 | /* background and dark colors */ 97 | --bg-1: hsl(248deg, 25%, 24%); /* dark buttons when clicked */ 98 | --bg-2: hsl(248deg, 25%, 18%); /* dark buttons */ 99 | --bg-3: hsl(247deg, 23%, 15%); /* spacing, secondary elements */ 100 | --bg-4: hsl(249deg, 22%, 12%); /* main background color */ 101 | --hover: hsla(250, 20%, 40%, 0.1); /* channels and buttons when hovered */ 102 | --active: hsla(250, 20%, 40%, 0.2); /* channels and buttons when clicked or selected */ 103 | --active-2: hsla(250, 20%, 40%, 0.3); /* extra state for transparent buttons */ 104 | --message-hover: hsla(250, 0%, 0%, 0.1); /* messages when hovered */ 105 | 106 | /* accent colors */ 107 | --accent-1: hsl(2, 65%, 88%); /* links and other accent text */ 108 | --accent-2: #ebbcba; /* small accent elements */ 109 | --accent-3: #ebbcba; /* accent buttons */ 110 | --accent-4: hsl(2, 55%, 78%); /* accent buttons when hovered */ 111 | --accent-5: hsl(2, 55%, 73%); /* accent buttons when clicked */ 112 | --accent-new: var(--red-2); /* stuff that's normally red like mute/deafen buttons */ 113 | --mention: linear-gradient(to right, color-mix(in hsl, var(--accent-2), transparent 90%) 40%, transparent); /* background of messages that mention you */ 114 | --mention-hover: linear-gradient(to right, color-mix(in hsl, var(--accent-2), transparent 95%) 40%, transparent); /* background of messages that mention you when hovered */ 115 | --reply: linear-gradient(to right, color-mix(in hsl, var(--text-3), transparent 90%) 40%, transparent); /* background of messages that reply to you */ 116 | --reply-hover: linear-gradient(to right, color-mix(in hsl, var(--text-3), transparent 95%) 40%, transparent); /* background of messages that reply to you when hovered */ 117 | 118 | /* status indicator colors */ 119 | --online: var(--green-2); /* change to #43a25a for default */ 120 | --dnd: var(--red-2); /* change to #d83a42 for default */ 121 | --idle: var(--yellow-2); /* change to #ca9654 for default */ 122 | --streaming: var(--purple-2); /* change to #593695 for default */ 123 | --offline: var(--text-4); /* change to #83838b for default offline color */ 124 | 125 | /* border colors */ 126 | --border-light: var(--hover); /* general light border color */ 127 | --border: var(--active); /* general normal border color */ 128 | --border-hover: var(--accent-2); /* border color of panels when hovered */ 129 | --button-border: hsl(250, 0%, 100%, 0.1); /* neutral border color of buttons */ 130 | 131 | /* base colors */ 132 | --red-1: hsl(343, 76%, 73%); 133 | --red-2: #eb6f92; 134 | --red-3: #eb6f92; 135 | --red-4: hsl(343, 76%, 63%); 136 | --red-5: hsl(343, 76%, 58%); 137 | 138 | --green-1: hsl(197, 49%, 43%); 139 | --green-2: #31748f; 140 | --green-3: #31748f; 141 | --green-4: hsl(197, 49%, 34%); 142 | --green-5: hsl(197, 49%, 30%); 143 | 144 | --blue-1: hsl(189, 48%, 78%); 145 | --blue-2: #9ccfd8; 146 | --blue-3: #9ccfd8; 147 | --blue-4: hsl(189, 43%, 68%); 148 | --blue-5: hsl(189, 43%, 63%); 149 | 150 | --yellow-1: hsl(35, 88%, 77%); 151 | --yellow-2: #f6c177; 152 | --yellow-3: #f6c177; 153 | --yellow-4: hsl(35, 88%, 67%); 154 | --yellow-5: hsl(35, 88%, 62%); 155 | 156 | --purple-1: hsl(267, 57%, 83%); 157 | --purple-2: #c4a7e7; 158 | --purple-3: #c4a7e7; 159 | --purple-4: hsl(267, 57%, 73%); 160 | --purple-5: hsl(267, 57%, 68%); 161 | } 162 | -------------------------------------------------------------------------------- /theme/flavors/system24-tokyo-night.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name system24 (tokyo night) 3 | * @description a tui-like discord theme. based on tokyo night theme (https://github.com/tokyo-night/tokyo-night-vscode-theme). 4 | * @author refact0r 5 | * @version 2.0.0 6 | * @invite nz87hXyvcy 7 | * @website https://github.com/refact0r/system24 8 | * @source https://github.com/refact0r/system24/blob/master/theme/system24-tokyo-night.theme.css 9 | * @authorId 508863359777505290 10 | * @authorLink https://www.refact0r.dev 11 | */ 12 | 13 | /* import theme modules */ 14 | @import url('https://refact0r.github.io/system24/build/system24.css'); 15 | 16 | body { 17 | /* font, change to '' for default discord font */ 18 | --font: 'DM Mono'; /* change to '' for default discord font */ 19 | --code-font: 'DM Mono'; /* change to '' for default discord font */ 20 | font-weight: 300; /* text font weight. 300 is light, 400 is normal. DOES NOT AFFECT BOLD TEXT */ 21 | letter-spacing: -0.05ch; /* decreases letter spacing for better readability. recommended on monospace fonts.*/ 22 | 23 | /* sizes */ 24 | --gap: 12px; /* spacing between panels */ 25 | --divider-thickness: 4px; /* thickness of unread messages divider and highlighted message borders */ 26 | --border-thickness: 2px; /* thickness of borders around main panels. DOES NOT AFFECT OTHER BORDERS */ 27 | --border-hover-transition: 0.2s ease; /* transition for borders when hovered */ 28 | 29 | /* animation/transition options */ 30 | --animations: on; /* off: disable animations/transitions, on: enable animations/transitions */ 31 | --list-item-transition: 0.2s ease; /* transition for list items */ 32 | --dms-icon-svg-transition: 0.4s ease; /* transition for the dms icon */ 33 | 34 | /* top bar options */ 35 | --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) */ 36 | --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) */ 37 | --top-bar-title-position: off; /* off: default centered position, hide: hide title completely, left: left align title (like old discord) */ 38 | --subtle-top-bar-title: off; /* off: default, on: hide the icon and use subtle text color (like old discord) */ 39 | 40 | /* window controls */ 41 | --custom-window-controls: off; /* off: default window controls, on: custom window controls */ 42 | --window-control-size: 14px; /* size of custom window controls */ 43 | 44 | /* dms button options */ 45 | --custom-dms-icon: off; /* off: use default discord icon, hide: remove icon entirely, custom: use custom icon */ 46 | --dms-icon-svg-url: url(''); /* icon svg url. MUST BE A SVG. */ 47 | --dms-icon-svg-size: 90%; /* size of the svg (css mask-size property) */ 48 | --dms-icon-color-before: var(--icon-secondary); /* normal icon color */ 49 | --dms-icon-color-after: var(--white); /* icon color when button is hovered/selected */ 50 | --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 */ 51 | --dms-background-image-url: url(''); /* url of the background image */ 52 | --dms-background-image-size: cover; /* size of the background image (css background-size property) */ 53 | --dms-background-color: linear-gradient(70deg, var(--blue-2), var(--purple-2), var(--red-2)); /* fixed color/gradient (css background property) */ 54 | 55 | /* background image options */ 56 | --background-image: off; /* off: no background image, on: enable background image (must set url variable below) */ 57 | --background-image-url: url(''); /* url of the background image */ 58 | 59 | /* transparency/blur options */ 60 | /* NOTE: TO USE TRANSPARENCY/BLUR, YOU MUST HAVE TRANSPARENT BG COLORS. FOR EXAMPLE: --bg-4: hsla(220, 15%, 10%, 0.7); */ 61 | --transparency-tweaks: off; /* off: no changes, on: remove some elements for better transparency */ 62 | --remove-bg-layer: off; /* off: no changes, on: remove the base --bg-3 layer for use with window transparency (WILL OVERRIDE BACKGROUND IMAGE) */ 63 | --panel-blur: off; /* off: no changes, on: blur the background of panels */ 64 | --blur-amount: 12px; /* amount of blur */ 65 | --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 */ 66 | 67 | /* other options */ 68 | --small-user-panel: on; /* off: default user panel, on: smaller user panel like in old discord */ 69 | 70 | /* unrounding options */ 71 | --unrounding: on; /* off: default, on: remove rounded corners from panels */ 72 | 73 | /* styling options */ 74 | --custom-spotify-bar: on; /* off: default, on: custom text-like spotify progress bar */ 75 | --ascii-titles: on; /* off: default, on: use ascii font for titles at the start of a channel */ 76 | --ascii-loader: system24; /* off: default, system24: use system24 ascii loader, cats: use cats loader */ 77 | 78 | /* panel labels */ 79 | --panel-labels: on; /* off: default, on: add labels to panels */ 80 | --label-color: var(--text-muted); /* color of labels */ 81 | --label-font-weight: 500; /* font weight of labels */ 82 | } 83 | 84 | /* color options */ 85 | :root { 86 | --colors: on; /* off: discord default colors, on: midnight custom colors */ 87 | 88 | /* text colors */ 89 | --text-0: var(--bg-3); /* text on colored elements */ 90 | --text-1: hsl(229, 73%, 95%); /* other normally white text */ 91 | --text-2: #c0caf5; /* headings and important text */ 92 | --text-3: #a9b1d6; /* normal text */ 93 | --text-4: hsl(229, 21%, 54%); /* icon buttons and channels */ 94 | --text-5: #414868; /* muted channels/chats and timestamps */ 95 | 96 | /* background and dark colors */ 97 | --bg-1: hsl(230, 22%, 25%); /* dark buttons when clicked */ 98 | --bg-2: hsl(230, 21%, 19%); /* dark buttons */ 99 | --bg-3: #16161d; /* spacing, secondary elements */ 100 | --bg-4: #1a1b26; /* main background color */ 101 | --hover: hsla(225, 22%, 41%, 0.125); /* channels and buttons when hovered */ 102 | --active: hsla(225, 22%, 41%, 0.267); /* channels and buttons when clicked or selected */ 103 | --active-2: hsla(225, 22%, 41%, 0.333); /* extra state for transparent buttons */ 104 | --message-hover: hsla(225, 0%, 0%, 0.1); /* messages when hovered */ 105 | 106 | /* accent colors */ 107 | --accent-1: var(--blue-1); /* links and other accent text */ 108 | --accent-2: var(--blue-2); /* small accent elements */ 109 | --accent-3: var(--blue-3); /* accent buttons */ 110 | --accent-4: var(--blue-4); /* accent buttons when hovered */ 111 | --accent-5: var(--blue-5); /* accent buttons when clicked */ 112 | --accent-new: var(--accent-2); /* stuff that's normally red like mute/deafen buttons */ 113 | --mention: linear-gradient(to right, color-mix(in hsl, var(--accent-2), transparent 90%) 40%, transparent); /* background of messages that mention you */ 114 | --mention-hover: linear-gradient(to right, color-mix(in hsl, var(--accent-2), transparent 95%) 40%, transparent); /* background of messages that mention you when hovered */ 115 | --reply: linear-gradient(to right, color-mix(in hsl, var(--text-3), transparent 90%) 40%, transparent); /* background of messages that reply to you */ 116 | --reply-hover: linear-gradient(to right, color-mix(in hsl, var(--text-3), transparent 95%) 40%, transparent); /* background of messages that reply to you when hovered */ 117 | 118 | /* status indicator colors */ 119 | --online: var(--green-2); /* change to #43a25a for default */ 120 | --dnd: var(--red-2); /* change to #d83a42 for default */ 121 | --idle: var(--yellow-2); /* change to #ca9654 for default */ 122 | --streaming: var(--purple-2); /* change to #593695 for default */ 123 | --offline: var(--text-4); /* change to #83838b for default offline color */ 124 | 125 | /* border colors */ 126 | --border-light: var(--hover); /* general light border color */ 127 | --border: var(--active); /* general normal border color */ 128 | --border-hover: var(--accent-2); /* border color of panels when hovered */ 129 | --button-border: hsl(225, 0%, 0%, 0); /* neutral border color of buttons */ 130 | 131 | /* base colors */ 132 | --red-1: hsl(349, 99%, 78%); 133 | --red-2: hsl(349, 89%, 72%); 134 | --red-3: hsl(349, 79%, 66%); 135 | --red-4: hsl(349, 69%, 60%); 136 | --red-5: hsl(349, 59%, 54%); 137 | 138 | --green-1: hsl(89, 56%, 67%); 139 | --green-2: hsl(89, 51%, 61%); 140 | --green-3: hsl(89, 46%, 56%); 141 | --green-4: hsl(89, 41%, 51%); 142 | --green-5: hsl(89, 36%, 46%); 143 | 144 | --blue-1: hsl(221, 99%, 78%); 145 | --blue-2: hsl(221, 89%, 72%); 146 | --blue-3: hsl(221, 79%, 66%); 147 | --blue-4: hsl(221, 69%, 60%); 148 | --blue-5: hsl(221, 59%, 54%); 149 | 150 | --yellow-1: hsl(36, 71%, 72%); 151 | --yellow-2: hsl(36, 66%, 64%); 152 | --yellow-3: hsl(36, 61%, 59%); 153 | --yellow-4: hsl(36, 56%, 54%); 154 | --yellow-5: hsl(36, 51%, 49%); 155 | 156 | --purple-1: hsl(261, 95%, 85%); 157 | --purple-2: hsl(261, 85%, 79%); 158 | --purple-3: hsl(261, 75%, 73%); 159 | --purple-4: hsl(261, 65%, 67%); 160 | --purple-5: hsl(261, 55%, 61%); 161 | } 162 | -------------------------------------------------------------------------------- /theme/flavors/system24-vencord.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name system24 (vencord) 3 | * @description a tui-like discord theme. based on https://github.com/nanoqoi/vencord-theme. 4 | * @author refact0r 5 | * @version 2.0.0 6 | * @invite nz87hXyvcy 7 | * @website https://github.com/refact0r/system24 8 | * @source https://github.com/refact0r/system24/blob/master/theme/system24-vencord.theme.css 9 | * @authorId 508863359777505290 10 | * @authorLink https://www.refact0r.dev 11 | */ 12 | 13 | /* import theme modules */ 14 | @import url('https://refact0r.github.io/system24/build/system24.css'); 15 | 16 | body { 17 | /* font, change to '' for default discord font */ 18 | --font: 'DM Mono'; /* change to '' for default discord font */ 19 | --code-font: 'DM Mono'; /* change to '' for default discord font */ 20 | font-weight: 300; /* text font weight. 300 is light, 400 is normal. DOES NOT AFFECT BOLD TEXT */ 21 | letter-spacing: -0.05ch; /* decreases letter spacing for better readability. recommended on monospace fonts.*/ 22 | 23 | /* sizes */ 24 | --gap: 12px; /* spacing between panels */ 25 | --divider-thickness: 4px; /* thickness of unread messages divider and highlighted message borders */ 26 | --border-thickness: 2px; /* thickness of borders around main panels. DOES NOT AFFECT OTHER BORDERS */ 27 | --border-hover-transition: 0.2s ease; /* transition for borders when hovered */ 28 | 29 | /* animation/transition options */ 30 | --animations: on; /* off: disable animations/transitions, on: enable animations/transitions */ 31 | --list-item-transition: 0.2s ease; /* transition for list items */ 32 | --dms-icon-svg-transition: 0.4s ease; /* transition for the dms icon */ 33 | 34 | /* top bar options */ 35 | --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) */ 36 | --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) */ 37 | --top-bar-title-position: off; /* off: default centered position, hide: hide title completely, left: left align title (like old discord) */ 38 | --subtle-top-bar-title: off; /* off: default, on: hide the icon and use subtle text color (like old discord) */ 39 | 40 | /* window controls */ 41 | --custom-window-controls: off; /* off: default window controls, on: custom window controls */ 42 | --window-control-size: 14px; /* size of custom window controls */ 43 | 44 | /* dms button options */ 45 | --custom-dms-icon: custom; /* off: use default discord icon, hide: remove icon entirely, custom: use custom icon */ 46 | --dms-icon-svg-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 27' width='24' height='24'%3E%3Cpath fill='currentColor' d='M0 0h7v1H6v1H5v1H4v1H3v1H2v1h5v1H0V6h1V5h1V4h1V3h1V2h1V1H0m13 2h5v1h-1v1h-1v1h-1v1h3v1h-5V7h1V6h1V5h1V4h-3m8 5h1v5h1v-1h1v1h-1v1h1v-1h1v1h-1v3h-1v1h-2v1h-1v1h1v-1h2v-1h1v2h-1v1h-2v1h-1v-1h-1v1h-6v-1h-1v-1h-1v-2h1v1h2v1h3v1h1v-1h-1v-1h-3v-1h-4v-4h1v-2h1v-1h1v-1h1v2h1v1h1v-1h1v1h-1v1h2v-2h1v-2h1v-1h1M8 14h2v1H9v4h1v2h1v1h1v1h1v1h4v1h-6v-1H5v-1H4v-5h1v-1h1v-2h2m17 3h1v3h-1v1h-1v1h-1v2h-2v-2h2v-1h1v-1h1m1 0h1v3h-1v1h-2v-1h1v-1h1'%3E%3C/path%3E%3C/svg%3E"); /* icon svg url. MUST BE A SVG. */ 47 | --dms-icon-svg-size: 90%; /* size of the svg (css mask-size property) */ 48 | --dms-icon-color-before: var(--icon-secondary); /* normal icon color */ 49 | --dms-icon-color-after: var(--white); /* icon color when button is hovered/selected */ 50 | --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 */ 51 | --dms-background-image-url: url(''); /* url of the background image */ 52 | --dms-background-image-size: cover; /* size of the background image (css background-size property) */ 53 | --dms-background-color: linear-gradient(70deg, var(--blue-2), var(--purple-2), var(--red-2)); /* fixed color/gradient (css background property) */ 54 | 55 | /* background image options */ 56 | --background-image: off; /* off: no background image, on: enable background image (must set url variable below) */ 57 | --background-image-url: url(''); /* url of the background image */ 58 | 59 | /* transparency/blur options */ 60 | /* NOTE: TO USE TRANSPARENCY/BLUR, YOU MUST HAVE TRANSPARENT BG COLORS. FOR EXAMPLE: --bg-4: hsla(220, 15%, 10%, 0.7); */ 61 | --transparency-tweaks: off; /* off: no changes, on: remove some elements for better transparency */ 62 | --remove-bg-layer: off; /* off: no changes, on: remove the base --bg-3 layer for use with window transparency (WILL OVERRIDE BACKGROUND IMAGE) */ 63 | --panel-blur: off; /* off: no changes, on: blur the background of panels */ 64 | --blur-amount: 12px; /* amount of blur */ 65 | --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 */ 66 | 67 | /* other options */ 68 | --small-user-panel: on; /* off: default user panel, on: smaller user panel like in old discord */ 69 | 70 | /* unrounding options */ 71 | --unrounding: on; /* off: default, on: remove rounded corners from panels */ 72 | 73 | /* styling options */ 74 | --custom-spotify-bar: on; /* off: default, on: custom text-like spotify progress bar */ 75 | --ascii-titles: on; /* off: default, on: use ascii font for titles at the start of a channel */ 76 | --ascii-loader: system24; /* off: default, system24: use system24 ascii loader, cats: use cats loader */ 77 | 78 | /* panel labels */ 79 | --panel-labels: on; /* off: default, on: add labels to panels */ 80 | --label-color: var(--text-muted); /* color of labels */ 81 | --label-font-weight: 500; /* font weight of labels */ 82 | } 83 | 84 | /* color options */ 85 | :root { 86 | --colors: on; /* off: discord default colors, on: midnight custom colors */ 87 | 88 | /* text colors */ 89 | --text-0: var(--bg-4); /* text on colored elements */ 90 | --text-1: hsl(38, 47%, 90%); /* bright text on colored elements */ 91 | --text-2: hsl(38, 47%, 80%); /* headings and important text */ 92 | --text-3: #d4be98; /* normal text */ 93 | --text-4: #a79a83; /* icon buttons and channels */ 94 | --text-5: #d4be9866; /* muted channels/chats and timestamps */ 95 | 96 | /* background and dark colors */ 97 | --bg-1: hsl(20, 5%, 25%); /* dark buttons when clicked */ 98 | --bg-2: #3c3836; /* dark buttons */ 99 | --bg-3: hsl(20, 2%, 19%); /* spacing, secondary elements */ 100 | --bg-4: #282828; /* main background color */ 101 | --hover: hsla(20, 3%, 40%, 0.1); /* channels and buttons when hovered */ 102 | --active: hsla(20, 3%, 40%, 0.2); /* channels and buttons when clicked or selected */ 103 | --active-2: hsla(20, 3%, 40%, 0.3); /* extra state for transparent buttons */ 104 | --message-hover: hsla(0, 0%, 0%, 0.1); /* messages when hovered */ 105 | 106 | /* accent colors */ 107 | --accent-1: var(--purple-1); /* links and other accent text */ 108 | --accent-2: var(--purple-2); /* small accent elements */ 109 | --accent-3: var(--purple-3); /* accent buttons */ 110 | --accent-4: var(--purple-4); /* accent buttons when hovered */ 111 | --accent-5: var(--purple-5); /* accent buttons when clicked */ 112 | --accent-new: var(--accent-2); /* stuff that's normally red like mute/deafen buttons */ 113 | --mention: linear-gradient(to right, color-mix(in hsl, var(--accent-2), transparent 90%) 40%, transparent); /* background of messages that mention you */ 114 | --mention-hover: linear-gradient(to right, color-mix(in hsl, var(--accent-2), transparent 95%) 40%, transparent); /* background of messages that mention you when hovered */ 115 | --reply: linear-gradient(to right, color-mix(in hsl, var(--text-3), transparent 90%) 40%, transparent); /* background of messages that reply to you */ 116 | --reply-hover: linear-gradient(to right, color-mix(in hsl, var(--text-3), transparent 95%) 40%, transparent); /* background of messages that reply to you when hovered */ 117 | 118 | /* status indicator colors */ 119 | --online: var(--green-2); /* change to #43a25a for default */ 120 | --dnd: var(--red-2); /* change to #d83a42 for default */ 121 | --idle: var(--yellow-2); /* change to #ca9654 for default */ 122 | --streaming: var(--purple-2); /* change to #593695 for default */ 123 | --offline: var(--text-4); /* change to #83838b for default offline color */ 124 | 125 | /* border colors */ 126 | --border-light: var(--hover); /* general light border color */ 127 | --border: var(--active); /* general normal border color */ 128 | --border-hover: var(--accent-2); /* border color of panels when hovered */ 129 | --button-border: hsl(0, 0%, 100%, 0.1); /* neutral border color of buttons */ 130 | 131 | /* base colors */ 132 | --red-1: hsl(3, 76%, 70%); 133 | --red-2: #ea6962; 134 | --red-3: #ea6962; 135 | --red-4: hsl(3, 76%, 60%); 136 | --red-5: hsl(3, 76%, 55%); 137 | 138 | --green-1: hsl(70, 36%, 60%); 139 | --green-2: #a8b665; 140 | --green-3: #a8b665; 141 | --green-4: hsl(70, 36%, 50%); 142 | --green-5: hsl(70, 36%, 45%); 143 | 144 | --blue-1: hsl(167, 24%, 63%); 145 | --blue-2: #7caea3; 146 | --blue-3: #7caea3; 147 | --blue-4: hsl(167, 24%, 53%); 148 | --blue-5: hsl(167, 24%, 48%); 149 | 150 | --yellow-1: hsl(37, 63%, 64%); 151 | --yellow-2: #d8a656; 152 | --yellow-3: #d8a656; 153 | --yellow-4: hsl(37, 63%, 54%); 154 | --yellow-5: hsl(37, 63%, 49%); 155 | 156 | --purple-1: hsl(344, 47%, 73%); 157 | --purple-2: #d3869b; 158 | --purple-3: #d3869b; 159 | --purple-4: hsl(344, 47%, 63%); 160 | --purple-5: hsl(344, 47%, 58%); 161 | } 162 | -------------------------------------------------------------------------------- /theme/system24.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name system24 3 | * @description a tui-like discord theme. 4 | * @author refact0r 5 | * @version 2.0.0 6 | * @invite nz87hXyvcy 7 | * @website https://github.com/refact0r/system24 8 | * @source https://github.com/refact0r/system24/blob/master/theme/system24.theme.css 9 | * @authorId 508863359777505290 10 | * @authorLink https://www.refact0r.dev 11 | */ 12 | 13 | /* import theme modules */ 14 | @import url('https://refact0r.github.io/system24/build/system24.css'); 15 | 16 | body { 17 | /* font, change to '' for default discord font */ 18 | --font: 'DM Mono'; /* change to '' for default discord font */ 19 | --code-font: 'DM Mono'; /* change to '' for default discord font */ 20 | font-weight: 300; /* text font weight. 300 is light, 400 is normal. DOES NOT AFFECT BOLD TEXT */ 21 | letter-spacing: -0.05ch; /* decreases letter spacing for better readability. recommended on monospace fonts.*/ 22 | 23 | /* sizes */ 24 | --gap: 12px; /* spacing between panels */ 25 | --divider-thickness: 4px; /* thickness of unread messages divider and highlighted message borders */ 26 | --border-thickness: 2px; /* thickness of borders around main panels. DOES NOT AFFECT OTHER BORDERS */ 27 | --border-hover-transition: 0.2s ease; /* transition for borders when hovered */ 28 | 29 | /* animation/transition options */ 30 | --animations: on; /* off: disable animations/transitions, on: enable animations/transitions */ 31 | --list-item-transition: 0.2s ease; /* transition for list items */ 32 | --dms-icon-svg-transition: 0.4s ease; /* transition for the dms icon */ 33 | 34 | /* top bar options */ 35 | --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) */ 36 | --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) */ 37 | --top-bar-title-position: off; /* off: default centered position, hide: hide title completely, left: left align title (like old discord) */ 38 | --subtle-top-bar-title: off; /* off: default, on: hide the icon and use subtle text color (like old discord) */ 39 | 40 | /* window controls */ 41 | --custom-window-controls: off; /* off: default window controls, on: custom window controls */ 42 | --window-control-size: 14px; /* size of custom window controls */ 43 | 44 | /* dms button options */ 45 | --custom-dms-icon: off; /* off: use default discord icon, hide: remove icon entirely, custom: use custom icon */ 46 | --dms-icon-svg-url: url(''); /* icon svg url. MUST BE A SVG. */ 47 | --dms-icon-svg-size: 90%; /* size of the svg (css mask-size property) */ 48 | --dms-icon-color-before: var(--icon-secondary); /* normal icon color */ 49 | --dms-icon-color-after: var(--white); /* icon color when button is hovered/selected */ 50 | --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 */ 51 | --dms-background-image-url: url(''); /* url of the background image */ 52 | --dms-background-image-size: cover; /* size of the background image (css background-size property) */ 53 | --dms-background-color: linear-gradient(70deg, var(--blue-2), var(--purple-2), var(--red-2)); /* fixed color/gradient (css background property) */ 54 | 55 | /* background image options */ 56 | --background-image: off; /* off: no background image, on: enable background image (must set url variable below) */ 57 | --background-image-url: url(''); /* url of the background image */ 58 | 59 | /* transparency/blur options */ 60 | /* NOTE: TO USE TRANSPARENCY/BLUR, YOU MUST HAVE TRANSPARENT BG COLORS. FOR EXAMPLE: --bg-4: hsla(220, 15%, 10%, 0.7); */ 61 | --transparency-tweaks: off; /* off: no changes, on: remove some elements for better transparency */ 62 | --remove-bg-layer: off; /* off: no changes, on: remove the base --bg-3 layer for use with window transparency (WILL OVERRIDE BACKGROUND IMAGE) */ 63 | --panel-blur: off; /* off: no changes, on: blur the background of panels */ 64 | --blur-amount: 12px; /* amount of blur */ 65 | --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 */ 66 | 67 | /* other options */ 68 | --small-user-panel: on; /* off: default user panel, on: smaller user panel like in old discord */ 69 | 70 | /* unrounding options */ 71 | --unrounding: on; /* off: default, on: remove rounded corners from panels */ 72 | 73 | /* styling options */ 74 | --custom-spotify-bar: on; /* off: default, on: custom text-like spotify progress bar */ 75 | --ascii-titles: on; /* off: default, on: use ascii font for titles at the start of a channel */ 76 | --ascii-loader: system24; /* off: default, system24: use system24 ascii loader, cats: use cats loader */ 77 | 78 | /* panel labels */ 79 | --panel-labels: on; /* off: default, on: add labels to panels */ 80 | --label-color: var(--text-muted); /* color of labels */ 81 | --label-font-weight: 500; /* font weight of labels */ 82 | } 83 | 84 | /* color options */ 85 | :root { 86 | --colors: on; /* off: discord default colors, on: midnight custom colors */ 87 | 88 | /* text colors */ 89 | --text-0: var(--bg-4); /* text on colored elements */ 90 | --text-1: oklch(95% 0 0); /* other normally white text */ 91 | --text-2: oklch(85% 0 0); /* headings and important text */ 92 | --text-3: oklch(75% 0 0); /* normal text */ 93 | --text-4: oklch(60% 0 0); /* icon buttons and channels */ 94 | --text-5: oklch(40% 0 0); /* muted channels/chats and timestamps */ 95 | 96 | /* background and dark colors */ 97 | --bg-1: oklch(31% 0 0); /* dark buttons when clicked */ 98 | --bg-2: oklch(27% 0 0); /* dark buttons */ 99 | --bg-3: oklch(23% 0 0); /* spacing, secondary elements */ 100 | --bg-4: oklch(19% 0 0); /* main background color */ 101 | --hover: oklch(54% 0 0 / 0.1); /* channels and buttons when hovered */ 102 | --active: oklch(54% 0 0 / 0.2); /* channels and buttons when clicked or selected */ 103 | --active-2: oklch(54% 0 0 / 0.3); /* extra state for transparent buttons */ 104 | --message-hover: var(--hover); /* messages when hovered */ 105 | 106 | /* accent colors */ 107 | --accent-1: var(--purple-1); /* links and other accent text */ 108 | --accent-2: var(--purple-2); /* small accent elements */ 109 | --accent-3: var(--purple-3); /* accent buttons */ 110 | --accent-4: var(--purple-4); /* accent buttons when hovered */ 111 | --accent-5: var(--purple-5); /* accent buttons when clicked */ 112 | --accent-new: var(--red-2); /* stuff that's normally red like mute/deafen buttons */ 113 | --mention: linear-gradient(to right, color-mix(in hsl, var(--accent-2), transparent 90%) 40%, transparent); /* background of messages that mention you */ 114 | --mention-hover: linear-gradient(to right, color-mix(in hsl, var(--accent-2), transparent 95%) 40%, transparent); /* background of messages that mention you when hovered */ 115 | --reply: linear-gradient(to right, color-mix(in hsl, var(--text-3), transparent 90%) 40%, transparent); /* background of messages that reply to you */ 116 | --reply-hover: linear-gradient(to right, color-mix(in hsl, var(--text-3), transparent 95%) 40%, transparent); /* background of messages that reply to you when hovered */ 117 | 118 | /* status indicator colors */ 119 | --online: var(--green-2); /* change to #40a258 for default */ 120 | --dnd: var(--red-2); /* change to #d83a41 for default */ 121 | --idle: var(--yellow-2); /* change to #cc954c for default */ 122 | --streaming: var(--purple-2); /* change to ##9147ff for default */ 123 | --offline: var(--text-4); /* change to #82838b for default offline color */ 124 | 125 | /* border colors */ 126 | --border-light: var(--hover); /* general light border color */ 127 | --border: var(--active); /* general normal border color */ 128 | --border-hover: var(--accent-2); /* border color of panels when hovered */ 129 | --button-border: hsl(220, 0%, 100%, 0.1); /* neutral border color of buttons */ 130 | 131 | /* base colors */ 132 | --red-1: oklch(75% 0.13 0); 133 | --red-2: oklch(70% 0.13 0); 134 | --red-3: oklch(65% 0.13 0); 135 | --red-4: oklch(60% 0.13 0); 136 | --red-5: oklch(55% 0.13 0); 137 | 138 | --green-1: oklch(75% 0.12 170); 139 | --green-2: oklch(70% 0.12 170); 140 | --green-3: oklch(65% 0.12 170); 141 | --green-4: oklch(60% 0.12 170); 142 | --green-5: oklch(55% 0.12 160); 143 | 144 | --blue-1: oklch(75% 0.11 215); 145 | --blue-2: oklch(70% 0.11 215); 146 | --blue-3: oklch(65% 0.11 215); 147 | --blue-4: oklch(60% 0.11 215); 148 | --blue-5: oklch(55% 0.11 215); 149 | 150 | --yellow-1: oklch(80% 0.12 90); 151 | --yellow-2: oklch(75% 0.12 90); 152 | --yellow-3: oklch(70% 0.12 90); 153 | --yellow-4: oklch(65% 0.12 90); 154 | --yellow-5: oklch(60% 0.12 90); 155 | 156 | --purple-1: oklch(75% 0.12 310); 157 | --purple-2: oklch(70% 0.12 310); 158 | --purple-3: oklch(65% 0.12 310); 159 | --purple-4: oklch(60% 0.12 310); 160 | --purple-5: oklch(55% 0.12 310); 161 | } 162 | --------------------------------------------------------------------------------