├── .github ├── ISSUE_TEMPLATE │ └── bug-report.md └── workflows │ └── compile.yml ├── .gitignore ├── .prettierrc ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── bd-scss.config.js ├── package.json ├── pnpm-lock.yaml ├── powercord_manifest.json └── src ├── base.scss ├── core └── _root.scss ├── dev.scss ├── dist.scss └── theme ├── _dark.scss ├── _index.scss ├── _light.scss ├── _root.scss ├── app ├── _app.scss ├── _font.scss ├── _index.scss ├── _scrollbars.scss ├── _scrollers.scss ├── _toolbar.scss └── _tooltips.scss ├── chat ├── _bars.scss ├── _container.scss ├── _dividers.scss ├── _form.scss ├── _forum.scss ├── _index.scss ├── _message.scss ├── _searchresults.scss └── _threads.scss ├── guilds ├── _container.scss ├── _folder.scss ├── _index.scss └── _server.scss ├── inputs ├── _button.scss ├── _checkbox.scss ├── _index.scss ├── _input.scss ├── _radiogroup.scss ├── _select.scss └── _slider.scss ├── members ├── _container.scss ├── _index.scss └── _member.scss ├── modals ├── _addjoinserver.scss ├── _deletemessage.scss ├── _fileexpand.scss ├── _index.scss ├── _modal.scss ├── _quickswitcher.scss ├── _uploadfile.scss └── _userprofile.scss ├── pages ├── _discovery.scss ├── _friends.scss ├── _index.scss ├── _nitro.scss └── _serverboost.scss ├── popouts ├── _autocomplete.scss ├── _contextmenu.scss ├── _emojipicker.scss ├── _inbox.scss ├── _index.scss ├── _pins.scss ├── _search.scss ├── _threads.scss └── _userpopout.scss ├── settings ├── _global.scss ├── _index.scss ├── bd │ ├── _index.scss │ └── _list.scss ├── guild │ ├── _auditlog.scss │ ├── _booststatus.scss │ ├── _community.scss │ ├── _index.scss │ └── _roles.scss └── user │ ├── _authapps.scss │ ├── _billing.scss │ ├── _connections.scss │ ├── _index.scss │ ├── _myaccount.scss │ └── _voicevideo.scss └── sidebar ├── _channel.scss ├── _container.scss ├── _dms.scss ├── _header.scss ├── _index.scss ├── _panels.scss └── _unreadbar.scss /.github/ISSUE_TEMPLATE/bug-report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Something needs fixing 4 | title: Brief description of the bug 5 | labels: bug 6 | assignees: '' 7 | --- 8 | 9 | ### Describe the bug 10 | 11 | _A clear and concise description of what the bug is_ 12 | 13 | ### To Reproduce 14 | 15 | _Steps to reproduce the behavior_ 16 | 17 | ### Screenshots 18 | 19 | _If applicable, add screenshots to help explain your problem_ 20 | 21 | ### Infomation (please complete the following information) 22 | 23 | **Discord channel**: _Stable/PTB/Canary_ 24 | **OS**: _Windows/Linux/OSX_ 25 | **Mod**: _BetterDiscord/Powercord/GooseMod_ 26 | **Discord language**: _Your language_ 27 | 28 | ### Additional context 29 | 30 | _Add any other context about the problem here. Remove if not applicable._ 31 | -------------------------------------------------------------------------------- /.github/workflows/compile.yml: -------------------------------------------------------------------------------- 1 | name: 'Compile SCSS' 2 | 3 | on: 'push' 4 | 5 | jobs: 6 | build: 7 | name: 'Build CSS' 8 | runs-on: 'ubuntu-latest' 9 | steps: 10 | - name: 'Checkout Repo' 11 | uses: 'actions/checkout@v2' 12 | - name: 'Setup NodeJS' 13 | uses: 'actions/setup-node@v1' 14 | with: 15 | node-version: 16 16 | - name: 'Install PNPM' 17 | uses: 'pnpm/action-setup@v2.1.0' 18 | with: 19 | version: 6.0.2 20 | - name: 'Clean install of dependencies' 21 | run: 'pnpm i' 22 | - name: 'Run build script' 23 | run: 'pnpm build' 24 | - name: 'Copy powercord_manifest.json' 25 | run: 'cp powercord_manifest.json dist/powercord_manifest.json' 26 | - name: 'Deploy' 27 | uses: 'peaceiris/actions-gh-pages@v3' 28 | with: 29 | github_token: ${{ secrets.GITHUB_TOKEN }} 30 | publish_branch: 'deploy' 31 | publish_dir: './dist' 32 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": true, 3 | "tabWidth": 2, 4 | "semi": true, 5 | "printWidth": 120, 6 | "singleQuote": true 7 | } 8 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | So, you're looking to contribute? Nice! 2 | 3 | This will help you get started. 4 | 5 | ## Prerequisites 6 | 7 | - Basic knowledge of NodeJS. 8 | - Basic knowledge of SCSS/CSS. 9 | - Basic knowledge of Git/GitHub. 10 | - Basic knowledge of the terminal/command prompt. 11 | 12 | Install Dependencies: 13 | Open a terminal/command prompt and use the following command: `npm install` in the MinimalCord folder. 14 | 15 | ## Development 16 | 17 | Run the `dev` script with: `npm run dev`. 18 | This will watch for changes inside the `/src` folder and then auto compile them into your BetterDiscord themes folder. 19 | 20 | ## Deploying 21 | 22 | Simply push your changes to the `master` branch and make a pull request. 23 | If all is well you PR will be accepted and merged with the `master` branch. 24 | 25 | This will then trigger an action to compile the `/src/_base.css` to the `deploy` branch. 26 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 DiscordStyles 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 | # MinimalCord 2 | 3 | Changes Discord enough to give it a fresh feel while also making it darker. Supports both Light and Dark themes. 4 | 5 | ![Server Chat - DARK](https://i.imgur.com/0VDtwzf.png) 6 | ![Server Chat - LIGHT](https://i.imgur.com/omiHA0O.png) 7 | 8 | ## Download 9 | 10 | BetterDiscord Download: [https://betterdiscord.app/theme/MinimalCord](https://betterdiscord.app/Download?id=125) 11 | Powercord Install: `git clone https://github.com/DiscordStyles/MinimalCord` 12 | Vencord link: `https://raw.githubusercontent.com/DiscordStyles/MinimalCord/deploy/MinimalCord.theme.css` 13 | 14 | ## Contributing 15 | 16 | Looking to contribute to MinimalCord theme? Read the the [contributing.md](https://github.com/DiscordStyles/MinimalCord/blob/master/CONTRIBUTING.md) file. 17 | 18 | ## License 19 | 20 | See the [LICENSE](https://github.com/DiscordStyles/MinimalCord/blob/master/LICENSE.md) file for license rights and limitations (MIT). 21 | -------------------------------------------------------------------------------- /bd-scss.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('bd-scss/lib/config').Config} */ 2 | export default { 3 | meta: { 4 | name: 'MinimalCord', 5 | author: 'Gibbu', 6 | version: '2.3.0', 7 | description: 8 | 'Changes Discord enough to give it a fresh feel while also making it darker. Supports both Light and Dark themes.', 9 | source: 'https://github.com/DiscordStyles/MinimalCord', 10 | invite: 'ZHthyCw', 11 | authorId: '174868361040232448', 12 | }, 13 | baseImport: 'https://discordstyles.github.io/MinimalCord/dist/MinimalCord.css', 14 | base: { 15 | output: 'dist/dist', 16 | }, 17 | }; 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "minimalcord", 3 | "version": "1.0.0", 4 | "description": "Changes Discord enough to give it a fresh feel while also making it darker. Supports both Light and Dark themes.", 5 | "repository": "https://github.com/DiscordStyles/MinimalCord.git", 6 | "author": "Gibbu ", 7 | "license": "MIT", 8 | "private": false, 9 | "type": "module", 10 | "scripts": { 11 | "dev": "bd-scss dev", 12 | "build": "bd-scss build" 13 | }, 14 | "dependencies": { 15 | "bd-scss": "^2.0.12" 16 | }, 17 | "packageManager": "pnpm@8.15.5+sha512.b051a32c7e695833b84926d3b29b8cca57254b589f0649d899c6e9d0edb670b91ec7e2a43459bae73759bb5ce619c3266f116bf931ce22d1ef1759a7e45aa96f", 18 | "devDependencies": { 19 | "prettier": "^3.3.3" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /pnpm-lock.yaml: -------------------------------------------------------------------------------- 1 | lockfileVersion: '6.0' 2 | 3 | settings: 4 | autoInstallPeers: true 5 | excludeLinksFromLockfile: false 6 | 7 | dependencies: 8 | bd-scss: 9 | specifier: ^2.0.12 10 | version: 2.0.12 11 | 12 | devDependencies: 13 | prettier: 14 | specifier: ^3.3.3 15 | version: 3.3.3 16 | 17 | packages: 18 | /anymatch@3.1.2: 19 | resolution: 20 | { integrity: sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg== } 21 | engines: { node: '>= 8' } 22 | dependencies: 23 | normalize-path: 3.0.0 24 | picomatch: 2.3.1 25 | dev: false 26 | 27 | /autoprefixer@10.4.13(postcss@8.4.16): 28 | resolution: 29 | { integrity: sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg== } 30 | engines: { node: ^10 || ^12 || >=14 } 31 | hasBin: true 32 | peerDependencies: 33 | postcss: ^8.1.0 34 | dependencies: 35 | browserslist: 4.21.5 36 | caniuse-lite: 1.0.30001458 37 | fraction.js: 4.2.0 38 | normalize-range: 0.1.2 39 | picocolors: 1.0.0 40 | postcss: 8.4.16 41 | postcss-value-parser: 4.2.0 42 | dev: false 43 | 44 | /bd-scss@2.0.12: 45 | resolution: 46 | { integrity: sha512-J3S0IfiWKLZxa0bcSHX4YoJMHTiQzCpqBPVXN/CtzkZStH82iQIHoHNl87LIhDsbp8J5Ez/X8v3VsLcf6hUp8g== } 47 | hasBin: true 48 | dependencies: 49 | autoprefixer: 10.4.13(postcss@8.4.16) 50 | chalk: 5.0.1 51 | chokidar: 3.5.3 52 | postcss: 8.4.16 53 | sade: 1.8.1 54 | sass: 1.58.3 55 | dev: false 56 | 57 | /binary-extensions@2.2.0: 58 | resolution: 59 | { integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA== } 60 | engines: { node: '>=8' } 61 | dev: false 62 | 63 | /braces@3.0.2: 64 | resolution: 65 | { integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A== } 66 | engines: { node: '>=8' } 67 | dependencies: 68 | fill-range: 7.0.1 69 | dev: false 70 | 71 | /browserslist@4.21.5: 72 | resolution: 73 | { integrity: sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w== } 74 | engines: { node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7 } 75 | hasBin: true 76 | dependencies: 77 | caniuse-lite: 1.0.30001458 78 | electron-to-chromium: 1.4.315 79 | node-releases: 2.0.10 80 | update-browserslist-db: 1.0.10(browserslist@4.21.5) 81 | dev: false 82 | 83 | /caniuse-lite@1.0.30001458: 84 | resolution: 85 | { integrity: sha512-lQ1VlUUq5q9ro9X+5gOEyH7i3vm+AYVT1WDCVB69XOZ17KZRhnZ9J0Sqz7wTHQaLBJccNCHq8/Ww5LlOIZbB0w== } 86 | dev: false 87 | 88 | /chalk@5.0.1: 89 | resolution: 90 | { integrity: sha512-Fo07WOYGqMfCWHOzSXOt2CxDbC6skS/jO9ynEcmpANMoPrD+W1r1K6Vx7iNm+AQmETU1Xr2t+n8nzkV9t6xh3w== } 91 | engines: { node: ^12.17.0 || ^14.13 || >=16.0.0 } 92 | dev: false 93 | 94 | /chokidar@3.5.3: 95 | resolution: 96 | { integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw== } 97 | engines: { node: '>= 8.10.0' } 98 | dependencies: 99 | anymatch: 3.1.2 100 | braces: 3.0.2 101 | glob-parent: 5.1.2 102 | is-binary-path: 2.1.0 103 | is-glob: 4.0.3 104 | normalize-path: 3.0.0 105 | readdirp: 3.6.0 106 | optionalDependencies: 107 | fsevents: 2.3.2 108 | dev: false 109 | 110 | /electron-to-chromium@1.4.315: 111 | resolution: 112 | { integrity: sha512-ndBQYz3Eyy3rASjjQ9poMJGoAlsZ/aZnq6GBsGL4w/4sWIAwiUHVSsMuADbxa8WJw7pZ0oxLpGbtoDt4vRTdCg== } 113 | dev: false 114 | 115 | /escalade@3.1.1: 116 | resolution: 117 | { integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw== } 118 | engines: { node: '>=6' } 119 | dev: false 120 | 121 | /fill-range@7.0.1: 122 | resolution: 123 | { integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ== } 124 | engines: { node: '>=8' } 125 | dependencies: 126 | to-regex-range: 5.0.1 127 | dev: false 128 | 129 | /fraction.js@4.2.0: 130 | resolution: 131 | { integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA== } 132 | dev: false 133 | 134 | /fsevents@2.3.2: 135 | resolution: 136 | { integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA== } 137 | engines: { node: ^8.16.0 || ^10.6.0 || >=11.0.0 } 138 | os: [darwin] 139 | requiresBuild: true 140 | dev: false 141 | optional: true 142 | 143 | /glob-parent@5.1.2: 144 | resolution: 145 | { integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow== } 146 | engines: { node: '>= 6' } 147 | dependencies: 148 | is-glob: 4.0.3 149 | dev: false 150 | 151 | /immutable@4.1.0: 152 | resolution: 153 | { integrity: sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ== } 154 | dev: false 155 | 156 | /is-binary-path@2.1.0: 157 | resolution: 158 | { integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw== } 159 | engines: { node: '>=8' } 160 | dependencies: 161 | binary-extensions: 2.2.0 162 | dev: false 163 | 164 | /is-extglob@2.1.1: 165 | resolution: 166 | { integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ== } 167 | engines: { node: '>=0.10.0' } 168 | dev: false 169 | 170 | /is-glob@4.0.3: 171 | resolution: 172 | { integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg== } 173 | engines: { node: '>=0.10.0' } 174 | dependencies: 175 | is-extglob: 2.1.1 176 | dev: false 177 | 178 | /is-number@7.0.0: 179 | resolution: 180 | { integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng== } 181 | engines: { node: '>=0.12.0' } 182 | dev: false 183 | 184 | /mri@1.2.0: 185 | resolution: 186 | { integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA== } 187 | engines: { node: '>=4' } 188 | dev: false 189 | 190 | /nanoid@3.3.4: 191 | resolution: 192 | { integrity: sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw== } 193 | engines: { node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1 } 194 | hasBin: true 195 | dev: false 196 | 197 | /node-releases@2.0.10: 198 | resolution: 199 | { integrity: sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w== } 200 | dev: false 201 | 202 | /normalize-path@3.0.0: 203 | resolution: 204 | { integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA== } 205 | engines: { node: '>=0.10.0' } 206 | dev: false 207 | 208 | /normalize-range@0.1.2: 209 | resolution: 210 | { integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA== } 211 | engines: { node: '>=0.10.0' } 212 | dev: false 213 | 214 | /picocolors@1.0.0: 215 | resolution: 216 | { integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ== } 217 | dev: false 218 | 219 | /picomatch@2.3.1: 220 | resolution: 221 | { integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA== } 222 | engines: { node: '>=8.6' } 223 | dev: false 224 | 225 | /postcss-value-parser@4.2.0: 226 | resolution: 227 | { integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== } 228 | dev: false 229 | 230 | /postcss@8.4.16: 231 | resolution: 232 | { integrity: sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ== } 233 | engines: { node: ^10 || ^12 || >=14 } 234 | dependencies: 235 | nanoid: 3.3.4 236 | picocolors: 1.0.0 237 | source-map-js: 1.0.2 238 | dev: false 239 | 240 | /prettier@3.3.3: 241 | resolution: 242 | { integrity: sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew== } 243 | engines: { node: '>=14' } 244 | hasBin: true 245 | dev: true 246 | 247 | /readdirp@3.6.0: 248 | resolution: 249 | { integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA== } 250 | engines: { node: '>=8.10.0' } 251 | dependencies: 252 | picomatch: 2.3.1 253 | dev: false 254 | 255 | /sade@1.8.1: 256 | resolution: 257 | { integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A== } 258 | engines: { node: '>=6' } 259 | dependencies: 260 | mri: 1.2.0 261 | dev: false 262 | 263 | /sass@1.58.3: 264 | resolution: 265 | { integrity: sha512-Q7RaEtYf6BflYrQ+buPudKR26/lH+10EmO9bBqbmPh/KeLqv8bjpTNqxe71ocONqXq+jYiCbpPUmQMS+JJPk4A== } 266 | engines: { node: '>=12.0.0' } 267 | hasBin: true 268 | dependencies: 269 | chokidar: 3.5.3 270 | immutable: 4.1.0 271 | source-map-js: 1.0.2 272 | dev: false 273 | 274 | /source-map-js@1.0.2: 275 | resolution: 276 | { integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw== } 277 | engines: { node: '>=0.10.0' } 278 | dev: false 279 | 280 | /to-regex-range@5.0.1: 281 | resolution: 282 | { integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ== } 283 | engines: { node: '>=8.0' } 284 | dependencies: 285 | is-number: 7.0.0 286 | dev: false 287 | 288 | /update-browserslist-db@1.0.10(browserslist@4.21.5): 289 | resolution: 290 | { integrity: sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ== } 291 | hasBin: true 292 | peerDependencies: 293 | browserslist: '>= 4.21.0' 294 | dependencies: 295 | browserslist: 4.21.5 296 | escalade: 3.1.1 297 | picocolors: 1.0.0 298 | dev: false 299 | -------------------------------------------------------------------------------- /powercord_manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "MinimalCord", 3 | "description": "Changes Discord enough to give it a fresh feel while also making it darker. Supports both Light and Dark themes", 4 | "version": "2.0.0", 5 | "author": "Gibbu#1211", 6 | "theme": "dist/MinimalCord.theme.css", 7 | "consent": ["ext_listing"], 8 | "license": "MIT" 9 | } 10 | -------------------------------------------------------------------------------- /src/base.scss: -------------------------------------------------------------------------------- 1 | @use './theme'; 2 | -------------------------------------------------------------------------------- /src/core/_root.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap'); 2 | 3 | :root { 4 | /* 5 | * Accent variable 6 | * Use this website: https://htmlcolorcodes.com/color-picker/ 7 | * to get your desired RGB numbers. Then simply put each number in their respective area. 8 | * R,G,B 9 | */ 10 | --accent: 50, 131, 207; 11 | 12 | /* 13 | * Chat message variables 14 | */ 15 | --message-padding: 10px; /* Spacing in the messages. MUST END IN px | DEFAULT: 10px */ 16 | --message-spacing: 10px; /* Spacing around the messages. MUST END IN px | DEFAULT: 10px */ 17 | 18 | /* 19 | * Dark Mode variables 20 | */ 21 | --dark-bg-hue: 218; /* The HUE of the background. | DEFAULT: 218 */ 22 | --dark-bg-saturation: 15%; /* The SATURATION of the background. | DEFAULT: 15% */ 23 | --dark-bg-lightness: 11%; /* The LIGHTNESS of the background | DEFAULT: 11% */ 24 | 25 | /* 26 | * Light Mode variables 27 | */ 28 | --light-bg-hue: 200; /* The HUE of the background. | DEFAULT: 200 */ 29 | --light-bg-saturation: 12%; /* The SATURATION of the background. | DEFAULT: 12% */ 30 | --light-bg-lightness: 100%; /* The LIGHTNESS of the background | DEFAULT: 100% */ 31 | 32 | /* 33 | * To use a custom font. Visit https://fonts.google.com and select one to your liking. 34 | * Now just follow this tutorial: https://imgur.com/a/CNbw7xC 35 | */ 36 | --font: 'Inter'; 37 | } 38 | -------------------------------------------------------------------------------- /src/dev.scss: -------------------------------------------------------------------------------- 1 | @use './core/root'; 2 | @use './theme'; 3 | -------------------------------------------------------------------------------- /src/dist.scss: -------------------------------------------------------------------------------- 1 | @use './core/root'; 2 | -------------------------------------------------------------------------------- /src/theme/_dark.scss: -------------------------------------------------------------------------------- 1 | .theme-dark, 2 | html.theme-dark #app-mount .theme-light .root__49fc1, 3 | html.theme-dark .force-theme.theme-light { 4 | --dark-bg-h: var(--dark-bg-hue, 218); 5 | --dark-bg-s: var(--dark-bg-saturation, 15%); 6 | --dark-bg-l: var(--dark-bg-lightness, 11%); 7 | 8 | // Background 9 | --background-light: hsl(var(--dark-bg-h) var(--dark-bg-s) calc(var(--dark-bg-l) + 5%)); 10 | --background-light-alt: hsl(var(--dark-bg-h) var(--dark-bg-s) calc(var(--dark-bg-l) + 3.5%)); 11 | --background: hsl(var(--dark-bg-h) var(--dark-bg-s) var(--dark-bg-l)); 12 | --background-alt: hsl(var(--dark-bg-h) var(--dark-bg-s) calc(var(--dark-bg-l) + 2%)); 13 | --background-dark: hsl(var(--dark-bg-h) var(--dark-bg-s) calc(var(--dark-bg-l) - 2%)); 14 | 15 | // Text colours 16 | --text-normal: hsl(var(--dark-bg-h) 10% 65%); 17 | --text-muted: hsl(var(--dark-bg-h) 10% 30%); 18 | --text-focus: #fff; 19 | 20 | // Font weights 21 | --font-weight-light: 300; 22 | --font-weight-normal: 400; 23 | --font-weight-semibold: 500; 24 | --font-weight-bold: 700; 25 | 26 | // Box shadows 27 | --box-shadow: 0 4px 9px rgb(0 0 0 / 0.4); 28 | --box-shadow-alt: 0 2px 5px rgb(0 0 0 / 0.3); 29 | 30 | // Scrollbars 31 | --scrollbar-colour: var(--background-light); 32 | 33 | // Messages 34 | --edit-message-box: var(--background-light); 35 | --message-background: var(--background-alt); 36 | 37 | // Stupid Discord vars 38 | --header-primary: var(--text-focus); 39 | } 40 | -------------------------------------------------------------------------------- /src/theme/_index.scss: -------------------------------------------------------------------------------- 1 | @use './root'; 2 | @use './light'; 3 | @use './dark'; 4 | 5 | @use './app'; 6 | @use './guilds'; 7 | @use './sidebar'; 8 | @use './chat'; 9 | @use './members'; 10 | @use './popouts'; 11 | @use './pages'; 12 | @use './inputs'; 13 | @use './settings'; 14 | @use './modals'; 15 | -------------------------------------------------------------------------------- /src/theme/_light.scss: -------------------------------------------------------------------------------- 1 | .theme-light, 2 | html.theme-light #app-mount .theme-light .root-1gCeng, 3 | html.theme-light .force-theme.theme-light { 4 | --light-bg-h: var(--light-bg-hue, 200); 5 | --light-bg-s: var(--light-bg-saturation, 12%); 6 | --light-bg-l: var(--light-bg-lightness, 100%); 7 | 8 | // Background 9 | --background-light: hsl(var(--light-bg-h) var(--light-bg-s) var(--light-bg-l)); 10 | --background-light-alt: hsl(var(--light-bg-h) var(--light-bg-s) var(--light-bg-l)); 11 | --background: hsl(var(--light-bg-h) var(--light-bg-s) calc(var(--light-bg-l) - 7%)); 12 | --background-alt: hsl(var(--light-bg-h) var(--light-bg-s) calc(var(--light-bg-l) - 2%)); 13 | --background-dark: hsl(var(--light-bg-h) var(--light-bg-s) calc(var(--light-bg-l) - 15%)); 14 | 15 | // Text colours 16 | --text-normal: #2d3748; 17 | --text-muted: #718096; 18 | --text-focus: #1a202c; 19 | 20 | // Font weights 21 | --font-weight-light: 400; 22 | --font-weight-normal: 500; 23 | --font-weight-semibold: 700; 24 | --font-weight-bold: 700; 25 | 26 | // Box shadows 27 | --box-shadow: 0 4px 9px rgb(0 0 0 / 0.2); 28 | --box-shadow-alt: 0 2px 5px rgb(0 0 0 / 0.1); 29 | 30 | // Scrollbars 31 | --scrollbar-colour: rgb(0 0 0 / 0.2); 32 | 33 | // Messages 34 | --edit-message-box: var(--background-light); 35 | --message-background: var(--background-light); 36 | } 37 | -------------------------------------------------------------------------------- /src/theme/_root.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --minimalcord-version: '2.3.0'; 3 | 4 | --border-radius: 5px; 5 | 6 | --accent-text: white; 7 | 8 | // Discord variables 9 | --font-primary: var(--font); 10 | --font-display: var(--font); 11 | --discord-green: 67 181 129; 12 | --discord-yellow: 219 171 9; 13 | --discord-red: 215 58 73; 14 | --discord-purple: 89 54 149; 15 | --discord-invisible: 117 128 142; 16 | --discord-nitro: 255 115 250; 17 | --discord-blurple: 114 137 218; 18 | --discord-spotify: 29 185 84; 19 | --discord-twitch: 89 54 149; 20 | --discord-xbox: 16 124 16; 21 | 22 | --background-modifier-selected: var(--background-light); 23 | --background-modifier-hover: var(--background-alt); 24 | --background-modifier-active: var(--background-light); 25 | 26 | --channels-default: var(--text-normal); 27 | --text-link: rgb(var(--accent)); 28 | } 29 | -------------------------------------------------------------------------------- /src/theme/app/_app.scss: -------------------------------------------------------------------------------- 1 | #app-mount .bg__960e4 { 2 | background: var(--background-dark); 3 | } 4 | 5 | ::selection { 6 | background: rgb(var(--accent), 1); 7 | color: var(--accent-text); 8 | } 9 | 10 | #app-mount .info__2debe .line__2debe:first-child:before { 11 | content: 'MinimalCord ' var(--minimalcord-version); 12 | display: block; 13 | } 14 | -------------------------------------------------------------------------------- /src/theme/app/_font.scss: -------------------------------------------------------------------------------- 1 | ::-webkit-input-placeholder, 2 | body, 3 | button, 4 | input, 5 | select, 6 | textarea { 7 | font-family: var(--font, 'Roboto'), 'Whitney'; 8 | } 9 | html, 10 | span:not([class*='spinner_']):not([class*='spinnerItem']) { 11 | backface-visibility: hidden !important; 12 | } 13 | -------------------------------------------------------------------------------- /src/theme/app/_index.scss: -------------------------------------------------------------------------------- 1 | @forward './app'; 2 | @forward './font'; 3 | @forward './toolbar'; 4 | @forward './scrollbars'; 5 | @forward './scrollers'; 6 | @forward './tooltips'; 7 | -------------------------------------------------------------------------------- /src/theme/app/_scrollbars.scss: -------------------------------------------------------------------------------- 1 | ::-webkit-scrollbar { 2 | width: 8px !important; 3 | height: 8px !important; 4 | } 5 | ::-webkit-scrollbar, 6 | ::-webkit-scrollbar-track, 7 | ::-webkit-scrollbar-track-piece { 8 | border-color: transparent !important; 9 | background: transparent !important; 10 | } 11 | ::-webkit-scrollbar-thumb { 12 | border-radius: var(--border-radius) !important; 13 | border: none !important; 14 | background-clip: content-box !important; 15 | background: var(--scrollbar-colour) !important; 16 | } 17 | ::-webkit-scrollbar-corner { 18 | visibility: hidden !important; 19 | } 20 | .scrollerThemed-2oenus.themeHidden-2yP93k .scroller-2FKFPG::-webkit-scrollbar, 21 | .scrollerThemed-2oenus.themeHidden-2yP93k .scroller-2FKFPG::-webkit-scrollbar-corner, 22 | .scrollerThemed-2oenus.themeHidden-2yP93k .scroller-2FKFPG::-webkit-scrollbar-thumb, 23 | .scrollerThemed-2oenus.themeHidden-2yP93k .scroller-2FKFPG::-webkit-scrollbar-track { 24 | display: none !important; 25 | } 26 | -------------------------------------------------------------------------------- /src/theme/app/_scrollers.scss: -------------------------------------------------------------------------------- 1 | .scroller__99e7c, 2 | .scroller-305q3I { 3 | background: transparent; 4 | } 5 | -------------------------------------------------------------------------------- /src/theme/app/_toolbar.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .title-3qD0b-, 3 | .container__9293f { 4 | background: var(--background); 5 | } 6 | .children__9293f:after { 7 | content: none; 8 | } 9 | .searchBar__97492 { 10 | background: var(--background-dark); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/theme/app/_tooltips.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .tooltipGrey-lpLZjh { 3 | background: var(--background-light); 4 | } 5 | .tooltipPrimary-3qLMbS { 6 | background: var(--background-light); 7 | box-shadow: var(--box-shadow); 8 | } 9 | .tooltipPointer-3L49xb { 10 | border-top-color: var(--background-light); 11 | } 12 | .tooltipContent-Nejnvh { 13 | color: var(--text-focus); 14 | font-weight: var(--font-weight-bold); 15 | .guildNameText_b1f768 { 16 | color: var(--text-focus); 17 | } 18 | .muteText_b1f768 { 19 | color: var(--text-normal); 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/theme/chat/_bars.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .newMessagesBar__0f481 { 3 | background: rgb(var(--accent), 1); 4 | border-radius: var(--border-radius); 5 | top: 10px; 6 | left: 26px; 7 | right: 26px; 8 | button { 9 | color: var(--accent-text); 10 | font-weight: 600; 11 | } 12 | } 13 | .jumpToPresentBar__0f481 { 14 | background: var(--background-light); 15 | opacity: 1; 16 | border-radius: var(--border-radius); 17 | left: auto; 18 | box-shadow: var(--box-shadow); 19 | bottom: 20px; 20 | padding-bottom: 0; 21 | .barButtonMain-3K-jeJ { 22 | display: none; 23 | } 24 | .barButtonBase__0f481 { 25 | padding: 10px; 26 | height: auto; 27 | line-height: normal; 28 | color: var(--text-normal); 29 | } 30 | .spinner__0f481 { 31 | padding-left: 12px; 32 | } 33 | } 34 | 35 | // Reply to message 36 | .stackedBars__74017 { 37 | background: var(--background); 38 | } 39 | .replyBar__841c8 { 40 | background: var(--background-light); 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/theme/chat/_container.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .chat_f75fb0 { 3 | background: var(--background); 4 | .scrollerSpacer__36d07 { 5 | height: 25px; 6 | } 7 | .content_f75fb0:before { 8 | content: none; 9 | } 10 | } 11 | .chatContent_f75fb0 { 12 | background: transparent; 13 | } 14 | .operations_bab751 > a { 15 | color: rgb(var(--accent), 1); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/theme/chat/_dividers.scss: -------------------------------------------------------------------------------- 1 | #app-mount .divider__908e2 { 2 | &.isUnread__908e2 { 3 | margin: calc(var(--message-padding) / -1 + (var(--message-padding) / 2)) 8px var(--message-padding) 4 | calc(55px + (var(--message-padding) * 2)); 5 | height: 0; 6 | top: 0; 7 | &.beforeGroup__5126c { 8 | margin: var(--message-spacing) 8px var(--message-spacing) 20px; 9 | } 10 | } 11 | &.hasContent__908e2 { 12 | margin: calc(var(--message-spacing) * 2) 0 calc(var(--message-spacing) * 2) 20px; 13 | 14 | .content__908e2 { 15 | background: var(--background-light); 16 | padding: 4px 8px; 17 | line-height: normal; 18 | font-weight: var(--font-weight-semibold); 19 | border-radius: var(--border-radius); 20 | color: var(--text-normal); 21 | } 22 | 23 | &:not(.isUnread__908e2) { 24 | border-top: none; 25 | height: auto; 26 | &:before { 27 | content: ''; 28 | position: absolute; 29 | top: 50%; 30 | transform: translateY(-50%); 31 | width: 100%; 32 | background: var(--background-light); 33 | height: 1px; 34 | z-index: -1; 35 | } 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/theme/chat/_form.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | // Chat box 3 | .form_f75fb0 { 4 | --custom-channel-textarea-text-area-height: 52px; 5 | &::before { 6 | content: none; 7 | } 8 | } 9 | .scrollableContainer__74017 { 10 | background: var(--background-alt); 11 | box-shadow: var(--box-shadow); 12 | border-radius: var(--border-radius); 13 | } 14 | .placeholder__1b31f { 15 | text-transform: uppercase; 16 | font-weight: bold; 17 | letter-spacing: 1.5px; 18 | font-size: 12px; 19 | } 20 | .placeholder__1b31f, 21 | .slateTextArea_ec4baf { 22 | padding: 15px 15px 15px 0; 23 | } 24 | 25 | .attachButton__0923f { 26 | padding: 15px 16px; 27 | height: 52px; 28 | } 29 | .buttons__74017 { 30 | height: 52px; 31 | } 32 | // App launch button thing (WHY DISCORD????) 33 | .button_e6e74f { 34 | background: var(--background-alt); 35 | box-shadow: var(--box-shadow); 36 | &:hover { 37 | background: var(--background-light); 38 | } 39 | } 40 | 41 | // Announcement bar thingy 42 | .wrapper__44df5 { 43 | background: var(--background-light); 44 | } 45 | 46 | // No perms 47 | .channelTextArea_f75fb0 { 48 | background: var(--background-alt); 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/theme/chat/_forum.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .container-3wLKDe { 3 | background: var(--background); 4 | } 5 | 6 | // Header 7 | .header-1Uy0p6 { 8 | background: var(--background-light); 9 | border-radius: 5px; 10 | &.headerWithMatchingPosts-1lTrVT { 11 | border-radius: 5px 5px 0 0; 12 | } 13 | .container-JhuCwn { 14 | cursor: default; 15 | } 16 | .titleContainer-2YK93J { 17 | align-items: center; 18 | gap: 12px; 19 | } 20 | .prefixElement-1U4XhR { 21 | margin: 0; 22 | height: 58px; 23 | display: flex; 24 | align-items: center; 25 | position: absolute; 26 | z-index: 1; 27 | left: 24px; 28 | pointer-events: none; 29 | } 30 | .input-2g-os5 { 31 | height: 58px; 32 | min-height: unset; 33 | padding: 16px 16px 16px 48px; 34 | margin: 0; 35 | } 36 | .guidelinesButton-3Vrz0u { 37 | margin: 0; 38 | } 39 | } 40 | .matchingPostsRow_f369db { 41 | background: var(--background-alt); 42 | } 43 | 44 | // Tags 45 | .tag-19iIl1 { 46 | background: var(--background-light); 47 | } 48 | 49 | // Cards 50 | .container-2qVG6q { 51 | background: var(--background-alt); 52 | border-radius: 5px; 53 | .pill_a2c9e8 { 54 | background: var(--background-light); 55 | } 56 | } 57 | 58 | // Sidebar 59 | .sidebarCard-1Gn1ch { 60 | background: var(--background-alt); 61 | border: none; 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /src/theme/chat/_index.scss: -------------------------------------------------------------------------------- 1 | @forward './container'; 2 | @forward './form'; 3 | @forward './message'; 4 | @forward './dividers'; 5 | @forward './bars'; 6 | @forward './threads'; 7 | @forward './searchresults'; 8 | @forward './forum'; 9 | -------------------------------------------------------------------------------- /src/theme/chat/_message.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | // General messages 3 | .message__5126c { 4 | .scrollableContainer__74017 { 5 | background: var(--edit-message-box); 6 | box-shadow: none; 7 | .slateTextArea_ec4baf { 8 | padding-left: 15px; 9 | } 10 | } 11 | // Buttons 12 | .wrapper_f7ecac { 13 | background: var(--background-light); 14 | box-shadow: var(--box-shadow-alt); 15 | } 16 | .button_f7ecac { 17 | height: 100%; 18 | padding: 0 6px; 19 | &:hover { 20 | background: rgb(var(--accent), 1); 21 | color: var(--accent-text); 22 | } 23 | &.dangerous_f7ecac:hover { 24 | background: rgb(var(--discord-red) / 1); 25 | } 26 | } 27 | &.selected__5126c, 28 | &:hover { 29 | &::before { 30 | background: var(--message-hover, var(--background-alt)); 31 | } 32 | } 33 | } 34 | 35 | // Cozy 36 | .cozy_c19a55 { 37 | background: transparent; 38 | padding-top: var(--message-padding); 39 | padding-bottom: var(--message-padding); 40 | padding-left: 0; 41 | margin-left: 16px; 42 | margin-right: 8px; 43 | position: relative; 44 | // Rounded background 45 | &:before { 46 | content: ''; 47 | position: absolute; 48 | top: 0; 49 | left: 0; 50 | width: 100%; 51 | height: 100%; 52 | border-radius: var(--message-border-radius, var(--border-radius)); 53 | background: var(--background-alt); 54 | z-index: -1; 55 | } 56 | // Fix positioning for message contents (text and images) 57 | .contents_c19a55, 58 | .container_b7e1cb { 59 | margin-left: calc(40px + (var(--message-padding) * 2)); 60 | } 61 | // Fix positioning for avatar 62 | .avatar_c19a55 { 63 | left: var(--message-padding); 64 | top: var(--message-padding); 65 | margin-top: 0; 66 | } 67 | // Add custom spacing between messages 68 | &.groupStart__5126c { 69 | margin-top: var(--message-spacing); 70 | } 71 | // Every message after groupStart that's not groupStart 72 | &.cozy_c19a55:not(.groupStart__5126c) { 73 | margin-top: calc(var(--message-padding) / -1); 74 | padding-top: 0.175rem; 75 | } 76 | // Reduce negative margin and padding 77 | .messageContent_c19a55 { 78 | margin-left: -5px; 79 | padding-left: 5px; 80 | } 81 | 82 | // Timestamps 83 | .timestamp_c19a55.alt_c19a55 { 84 | width: calc(40px + var(--message-padding)); 85 | display: flex; 86 | justify-content: center; 87 | } 88 | 89 | // Mentioned 90 | &.mentioned__5126c { 91 | .messageContent_c19a55 { 92 | position: relative; 93 | &:not(.repliedTextContent-1R3vnK) { 94 | color: var(--text-focus); 95 | } 96 | &:after { 97 | content: ''; 98 | position: absolute; 99 | top: 0; 100 | left: 0; 101 | border-radius: 0 var(--border-radius) 0 0; 102 | height: 100%; 103 | width: calc(100% - var(--message-padding)); 104 | border-left: 2px solid rgb(var(--discord-yellow) / 1); 105 | background: var(--background-mentioned); 106 | pointer-events: none; 107 | } 108 | } 109 | .container_b7e1cb { 110 | position: relative; 111 | &:before { 112 | content: ''; 113 | position: absolute; 114 | pointer-events: none; 115 | top: 0; 116 | left: -5px; 117 | height: 100%; 118 | width: calc(100% - var(--message-padding) + 5px); 119 | border-left: 2px solid rgb(var(--discord-yellow) / 1); 120 | background: var(--background-mentioned); 121 | border-radius: 0 0 var(--border-radius) 0; 122 | } 123 | } 124 | } 125 | 126 | // Replied quote 127 | .repliedMessage_c19a55 { 128 | margin-left: calc(var(--message-padding) + 56px); 129 | & + .contents_c19a55 { 130 | .avatar_c19a55, 131 | img { 132 | top: 32px; 133 | } 134 | } 135 | &:before { 136 | border-color: var(--text-muted); 137 | } 138 | } 139 | .repliedTextPreview_c19a55 .messageContent_c19a55 { 140 | padding-left: 8px; 141 | padding-right: 4px; 142 | margin-left: 0; 143 | &::after { 144 | left: 4px; 145 | width: 100%; 146 | } 147 | } 148 | 149 | // Thread bar thingy 150 | &.hasThread_c19a55::after { 151 | left: 1.8rem; 152 | top: 3.5rem; 153 | width: 1.5rem; 154 | } 155 | } 156 | 157 | // Codeblocks 158 | .hljs-comment { 159 | color: var(--text-muted); 160 | } 161 | 162 | // Mentions & Chat jumps 163 | .wrapper_d4fa29 { 164 | background: rgb(var(--accent), 0.1); 165 | color: rgb(var(--accent), 1); 166 | &:hover, 167 | &.popout-open { 168 | background: rgb(var(--accent), 1); 169 | color: var(--accent-text); 170 | } 171 | } 172 | 173 | // Message placeholders 174 | .wrapper__0d1ef { 175 | background: transparent; 176 | } 177 | // Pretty much the same as #L3 178 | .wrapper_fc8177 { 179 | background: transparent; 180 | padding-top: var(--message-padding); 181 | padding-bottom: var(--message-padding); 182 | padding-left: 0; 183 | margin-left: 16px; 184 | margin-right: 8px; 185 | position: relative; 186 | &:before { 187 | content: ''; 188 | position: absolute; 189 | top: 0; 190 | left: 0; 191 | width: 100%; 192 | height: 100%; 193 | border-radius: var(--message-border-radius, var(--border-radius)); 194 | background: var(--background-alt); 195 | z-index: -1; 196 | } 197 | .contents_fc8177, 198 | .attachmentContainer_fc8177 { 199 | padding-left: calc(40px + (var(--message-padding) * 2)); 200 | } 201 | .avatar_c19a55 { 202 | left: var(--message-padding); 203 | top: var(--message-padding); 204 | margin-top: 0; 205 | } 206 | &[style*='margin-top'] { 207 | margin-top: var(--message-spacing) !important; 208 | } 209 | & + .wrapper_fc8177:not([style*='margin-top']) { 210 | margin-top: calc(var(--message-padding) / -1); 211 | padding-top: 0.175rem; 212 | } 213 | } 214 | 215 | // Embeds 216 | .embedFull__623de { 217 | background: var(--background-dark); 218 | } 219 | 220 | // Attachments 221 | .fileWrapper__0ccae, 222 | .wrapperAudio_f316dd { 223 | background: var(--background-dark); 224 | border-radius: var(--border-radius); 225 | border: none; 226 | } 227 | .textContainer__4d95d { 228 | border: none; 229 | background: var(--background-dark); 230 | border-radius: var(--border-radius) var(--border-radius) 0 0; 231 | } 232 | .footer__4d95d { 233 | background: var(--background); 234 | border: none; 235 | } 236 | 237 | // Code blocks 238 | pre code, 239 | code.inline { 240 | background: var(--background-dark); 241 | border-radius: var(--border-radius); 242 | border: none; 243 | } 244 | 245 | // Reactions 246 | .reaction_f8896c { 247 | background: var(--background); 248 | &.reactionMe_f8896c { 249 | background: rgb(var(--accent), 0.2); 250 | border-color: rgb(var(--accent), 1); 251 | .reactionCount_f8896c { 252 | color: rgb(var(--accent), 1); 253 | } 254 | } 255 | } 256 | 257 | // Spoilers 258 | .spoilerText-27bIiA.hidden-3B-Rum { 259 | background: var(--background-dark); 260 | } 261 | } 262 | -------------------------------------------------------------------------------- /src/theme/chat/_searchresults.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .searchResultsWrap_a9e706 { 3 | background: var(--background-alt); 4 | border-top-left-radius: var(--border-radius); 5 | } 6 | .searchHeader_f3b986 { 7 | background: var(--background-light); 8 | box-shadow: var(--box-shadow-alt); 9 | .item-3XjbnG.selected-g-kMVV { 10 | background: rgb(var(--accent)); 11 | } 12 | } 13 | .channelName-3w2Y3c { 14 | background: var(--background-alt); 15 | } 16 | 17 | .searchResult__02a39 { 18 | border: none; 19 | background: var(--background-light); 20 | .cozy_c19a55 { 21 | margin: 0 !important; 22 | } 23 | } 24 | .searchResultMessage-1fxgXh { 25 | .cozy_c19a55 { 26 | margin: 0; 27 | } 28 | 29 | &:not(.hit-1fVM9e) .cozy_c19a55:before { 30 | content: none; 31 | } 32 | &.hit-1fVM9e { 33 | box-shadow: 0 0 10px 6px var(--background-alt); 34 | border: none; 35 | border-radius: var(--border-radius); 36 | .cozy_c19a55 { 37 | background: var(--background-light); 38 | } 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/theme/chat/_threads.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .container__01ae2 { 3 | background: var(--background); 4 | } 5 | .divider_ee23ac { 6 | background: var(--background-light); 7 | } 8 | .container__34c2c { 9 | background: transparent; 10 | border: none; 11 | padding-right: 8px; 12 | } 13 | .chat_a44415::before { 14 | content: none; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/theme/guilds/_container.scss: -------------------------------------------------------------------------------- 1 | #app-mount .guilds_c48ade { 2 | background: var(--background-dark); 3 | .footer__214dc { 4 | --background-tertiary: var(--background-dark); 5 | } 6 | .scrollerBase_d125d2 { 7 | background: var(--background-dark); 8 | &::-webkit-scrollbar { 9 | display: none; 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/theme/guilds/_folder.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .expandedFolderBackground__48112 { 3 | background: var(--background-light); 4 | } 5 | .folder__48112 { 6 | background: var(--background-light); 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/theme/guilds/_index.scss: -------------------------------------------------------------------------------- 1 | @forward './container'; 2 | @forward './server'; 3 | @forward './folder'; 4 | -------------------------------------------------------------------------------- /src/theme/guilds/_server.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | // Server 3 | .wrapper__8436d { 4 | &.selected_ae80f7 .childWrapper_a6ce15 { 5 | background: rgb(var(--accent), 1); 6 | color: var(--accent-text); 7 | } 8 | } 9 | .childWrapper_a6ce15 { 10 | background: var(--background-light); 11 | } 12 | 13 | // Add/Join server & Server Discovery 14 | .circleIconButton__5bc7e { 15 | background: var(--background-light); 16 | &:hover, 17 | &.selected__5bc7e { 18 | background: rgb(var(--discord-green) / 1); 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/theme/inputs/_button.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | // Brand/Blurple buttons 3 | .lookFilled__201d5.colorBrand__201d5 { 4 | background: rgb(var(--accent), 1); 5 | color: var(--accent-text); 6 | font-weight: 600; 7 | transition: box-shadow 0.2s ease; 8 | &:hover { 9 | box-shadow: inset 0 0 0 100vmax rgb(0, 0, 0, 0.1); 10 | } 11 | &:focus, 12 | &:active { 13 | box-shadow: inset 0 0 0 100vmax rgb(0, 0, 0, 0.2); 14 | } 15 | } 16 | 17 | // Outlined 18 | .lookOutlined-3sRXeN.colorWhite-rEQuAQ { 19 | border-color: var(--text-normal); 20 | color: var(--text-normal); 21 | } 22 | 23 | // Panel buttons 24 | .button__201d5.buttonColor_e131a9 { 25 | background: var(--background-light); 26 | &:hover { 27 | background: rgb(var(--accent), 1); 28 | color: #fff; 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/theme/inputs/_checkbox.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .container__87bf1 { 3 | transition: 0.15s ease background-color; 4 | background: var(--background-dark) !important; 5 | &.checked__87bf1 { 6 | background: rgb(var(--accent)) !important; 7 | } 8 | &:not([style*='rgb(128'], .checked__87bf1) { 9 | background: rgb(var(--accent), 0.5) !important; 10 | } 11 | } 12 | 13 | // Checkbox row 14 | .control__0d850.row-31nALW { 15 | background: var(--background-light); 16 | &.checked-1pZh2h .slider__87bf1 { 17 | background: rgb(var(--accent), 1) !important; 18 | border-color: rgb(var(--accent), 1) !important; 19 | } 20 | } 21 | 22 | // Menu Checkbox 23 | [role='menuitemcheckbox'][aria-checked='true'] { 24 | .checkbox_c1e9c4 { 25 | color: rgb(var(--accent), 1); 26 | } 27 | .check_c1e9c4 { 28 | color: var(--accent-text); 29 | } 30 | &.focused_c1e9c4 { 31 | .checkbox_c1e9c4 { 32 | color: var(--accent-text); 33 | } 34 | .check_c1e9c4 { 35 | color: rgb(var(--accent), 1); 36 | } 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/theme/inputs/_index.scss: -------------------------------------------------------------------------------- 1 | @forward './button'; 2 | @forward './input'; 3 | @forward './select'; 4 | @forward './radiogroup'; 5 | @forward './slider'; 6 | @forward './checkbox'; 7 | -------------------------------------------------------------------------------- /src/theme/inputs/_input.scss: -------------------------------------------------------------------------------- 1 | #app-mount .input__0f084:not(.multiInput-1VARjC) { 2 | background: var(--background); 3 | border: 1px solid var(--background); 4 | border-radius: var(--border-radius); 5 | &:hover { 6 | border-color: var(--background-light); 7 | } 8 | &:focus { 9 | border-color: rgb(var(--accent), 1); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/theme/inputs/_radiogroup.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | [role='radiogroup'] .item__001a7 { 3 | background: var(--background-alt); 4 | &:hover { 5 | background: var(--background-light); 6 | } 7 | &[aria-checked='true'] { 8 | .radioBar__001a7 { 9 | background: rgb(var(--accent)); 10 | color: var(--accent-text); 11 | &[style*='--radio-bar-accent-color'] { 12 | background: var(--radio-bar-accent-color); 13 | color: #fff; 14 | .radioIconForeground__001a7 { 15 | color: #fff; 16 | } 17 | } 18 | } 19 | .radioIconForeground__001a7, 20 | .colorStandard-21JIj7, 21 | .colorHeaderSecondary-g5teka { 22 | color: var(--accent-text); 23 | } 24 | } 25 | } 26 | .children__7bffb > .marginBottom40_fd297e .item__001a7, 27 | .marginBottom20_fd297e .item__001a7 { 28 | background: var(--background-alt); 29 | &[aria-checked='true'] { 30 | background: rgb(var(--accent)); 31 | color: var(--accent-text); 32 | .radioIconForeground__001a7 { 33 | color: var(--accent-text); 34 | } 35 | } 36 | } 37 | 38 | // Menu Radio 39 | [role='menuitemradio'][aria-checked='true'] { 40 | .radioSelection_c1e9c4 { 41 | color: rgb(var(--accent), 1); 42 | } 43 | &.focused_c1e9c4 .radioSelection_c1e9c4 { 44 | color: #fff; 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/theme/inputs/_select.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | // Default 3 | .css-gvi9bl-control, 4 | .css-17e1tep-control, 5 | .select-2fjwPw { 6 | background: var(--background); 7 | border-radius: var(--border-radius); 8 | border-color: var(--background); 9 | cursor: pointer; 10 | &:hover { 11 | border-color: var(--background-light); 12 | } 13 | } 14 | 15 | // Selected 16 | .css-6fzn47-control { 17 | background: var(--background); 18 | border-radius: var(--border-radius); 19 | border-color: rgb(var(--accent), 1); 20 | } 21 | 22 | // Dropdown 23 | .popout-1KHNAq { 24 | background: var(--background-dark); 25 | border: none; 26 | border-radius: var(--border-radius); 27 | box-shadow: var(--box-shadow); 28 | padding-right: 0; 29 | &::-webkit-scrollbar { 30 | display: none; 31 | } 32 | } 33 | .option-2eIyOn { 34 | &:hover, 35 | &:focus, 36 | &.focused-1T6PE5 { 37 | background: var(--background-alt); 38 | } 39 | &[aria-selected='true'] { 40 | background: rgb(var(--accent), 1); 41 | color: #fff; 42 | .selectedIcon-19TbzU { 43 | color: #fff; 44 | } 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/theme/inputs/_slider.scss: -------------------------------------------------------------------------------- 1 | #app-mount .barFill_a562c8 { 2 | background: rgb(var(--accent), 1); 3 | } 4 | -------------------------------------------------------------------------------- /src/theme/members/_container.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .container_c8ffbb, 3 | .members_c8ffbb, 4 | .members_c8ffbb > div { 5 | background: transparent; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/theme/members/_index.scss: -------------------------------------------------------------------------------- 1 | @forward './container'; 2 | @forward './member'; 3 | -------------------------------------------------------------------------------- /src/theme/members/_member.scss: -------------------------------------------------------------------------------- 1 | #app-mount .member__5d473 { 2 | background: transparent; 3 | .botTagRegular_c89c9a { 4 | background: rgb(var(--accent), 1); 5 | color: var(--accent-text); 6 | .botText__82f07 { 7 | font-weight: 600; 8 | } 9 | } 10 | 11 | &:hover .layout__91a9d { 12 | background: var(--background-alt); 13 | } 14 | &:active .layout__91a9d { 15 | background: var(--background-light); 16 | } 17 | &.selected__91a9d .layout__91a9d { 18 | background: rgb(var(--accent), 1); 19 | .roleColor-rz2vM0, 20 | .activity__5d473, 21 | .premiumIcon-1rDbWQ, 22 | .username__5d473, 23 | .username__5d473 span { 24 | color: var(--accent-text) !important; 25 | } 26 | rect[fill='#43b581'], 27 | rect[fill='#faa61a'], 28 | rect[fill='#f04747'] { 29 | fill: #fff; 30 | } 31 | .botTagRegular_c89c9a { 32 | background: var(--accent-text); 33 | color: rgb(var(--accent), 1); 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/theme/modals/_addjoinserver.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .colorHeaderPrimary-jN_yGr { 3 | color: var(--text-focus); 4 | } 5 | .colorHeaderSecondary-g5teka { 6 | color: var(--text-normal); 7 | } 8 | 9 | .container-x8Y1ix { 10 | border-radius: var(--border-radius); 11 | background: var(--background-alt); 12 | &:hover { 13 | background: var(--background-light-alt); 14 | } 15 | } 16 | 17 | .backButton-2Ps-B8 { 18 | color: var(--text-muted); 19 | &:hover { 20 | color: var(--text-normal); 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/theme/modals/_deletemessage.scss: -------------------------------------------------------------------------------- 1 | #app-mount .message__89466 { 2 | background: var(--background-alt); 3 | box-shadow: none; 4 | .cozy_c19a55 { 5 | margin: 0 !important; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/theme/modals/_fileexpand.scss: -------------------------------------------------------------------------------- 1 | #app-mount .modalTextContainer__4d95d { 2 | background: var(--background-dark); 3 | border: none; 4 | } 5 | -------------------------------------------------------------------------------- /src/theme/modals/_index.scss: -------------------------------------------------------------------------------- 1 | @forward './modal'; 2 | @forward './quickswitcher'; 3 | @forward './userprofile'; 4 | @forward './fileexpand'; 5 | @forward './addjoinserver'; 6 | @forward './uploadfile'; 7 | @forward './deletemessage'; 8 | -------------------------------------------------------------------------------- /src/theme/modals/_modal.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .modal-3O0aXp, 3 | .root__49fc1 { 4 | background: var(--background-alt); 5 | box-shadow: var(--box-shadow); 6 | } 7 | .header__49fc1 { 8 | box-shadow: none; 9 | } 10 | .content-18dVld { 11 | padding: 0 24px 24px 24px; 12 | } 13 | .footer__49fc1 { 14 | background: var(--background); 15 | box-shadow: none; 16 | padding: 24px; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/theme/modals/_quickswitcher.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .quickswitcher_ac6cb0 { 3 | background: var(--background); 4 | } 5 | .scroller_ac6cb0 { 6 | background: transparent; 7 | } 8 | .input_ac6cb0 { 9 | background: var(--background-light); 10 | box-shadow: var(--box-shadow); 11 | padding: 0 24px; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/theme/modals/_uploadfile.scss: -------------------------------------------------------------------------------- 1 | #app-mount .uploadModal_dbca3c { 2 | background: var(--background); 3 | border-radius: var(--border-radius); 4 | box-shadow: var(--box-shadow); 5 | .footer_dbca3c { 6 | background: var(--background-alt); 7 | box-shadow: none; 8 | } 9 | .slateTextArea_ec4baf { 10 | padding-left: 15px; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/theme/modals/_userprofile.scss: -------------------------------------------------------------------------------- 1 | #app-mount .root-8LYsGj { 2 | // Global styles 3 | .size12-oc4dx4, 4 | .activityName__2ef49, 5 | .nameNormal__2ef49, 6 | .nameWrap__2ef49 { 7 | color: var(--text-normal); 8 | } 9 | 10 | // Playing banner 11 | .topSection-13QKHs { 12 | background: var(--background-alt); 13 | } 14 | 15 | .headerFill-adLl4x { 16 | background: transparent; 17 | } 18 | .tabBarContainer-sCZC4w { 19 | border: none; 20 | } 21 | .avatar-3QF_VA { 22 | border-color: var(--background-alt); 23 | background: var(--background-alt); 24 | } 25 | 26 | // Tab btns 27 | .tabBarItem-1b8RUP { 28 | color: var(--text-normal); 29 | &[style*='255, 255, 255'] { 30 | color: var(--text-focus) !important; 31 | border-color: var(--text-focus) !important; 32 | } 33 | } 34 | 35 | .userInfoSection-2u2hir { 36 | border: none; 37 | } 38 | .connectedAccounts-1YaT2t { 39 | display: grid; 40 | grid-template-columns: 1fr 1fr; 41 | grid-gap: 16px; 42 | } 43 | .connectedAccount-1xKpli { 44 | background: var(--background-alt); 45 | border-radius: var(--border-radius); 46 | border: none; 47 | margin: 0; 48 | width: 100%; 49 | box-sizing: border-box; 50 | } 51 | 52 | .body-1Ukv50 { 53 | background: var(--background); 54 | height: 320px; 55 | border: none; 56 | } 57 | 58 | .note-3M15gE { 59 | margin: 0; 60 | } 61 | textarea { 62 | padding: 8px; 63 | height: auto !important; 64 | } 65 | 66 | &[style*='--user-background'] { 67 | .banner__68edb:not(.bannerPremium_c3e427) { 68 | height: 240px; 69 | background: var(--user-background) center/cover; 70 | } 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /src/theme/pages/_discovery.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .categoryItem-1QIroW.selectedCategoryItem-FHKU_o .itemInner-gPkiWb { 3 | background: rgb(var(--accent), 1); 4 | } 5 | 6 | .pageWrapper_a3a4ce { 7 | background: var(--background); 8 | .input-2g-os5 { 9 | background: #fff; 10 | border: none; 11 | } 12 | } 13 | 14 | .card_e90879 { 15 | border-radius: var(--border-radius); 16 | background: var(--background-alt); 17 | foreignObject[mask='url(#svg-mask-squircle)'] { 18 | mask: none; 19 | } 20 | &:hover { 21 | background: var(--background-light-alt); 22 | box-shadow: var(--box-shadow); 23 | .iconMask_e90879 { 24 | background: var(--background-light-alt); 25 | } 26 | } 27 | } 28 | .iconMask_e90879 { 29 | border-radius: var(--border-radius); 30 | background: var(--background-alt); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/theme/pages/_friends.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .container__133bf { 3 | background: var(--background); 4 | .title_d1da5f { 5 | margin: 20px; 6 | } 7 | } 8 | .tabBody__133bf:before { 9 | content: none; 10 | } 11 | 12 | .peopleListItem_cc6179 { 13 | background: var(--background-alt); 14 | border-radius: var(--border-radius); 15 | border: none; 16 | line-height: normal; 17 | margin: 0 20px 10px 20px; 18 | padding: 0 15px; 19 | &:hover { 20 | background: var(--background-light); 21 | .actionButton_f8fa06 { 22 | background: var(--background); 23 | } 24 | } 25 | } 26 | .actionButton_f8fa06 { 27 | background: var(--background-dark); 28 | } 29 | 30 | .scroller__7d20c { 31 | border: none; 32 | padding-left: 0; 33 | } 34 | .container__7d20c { 35 | background: var(--background); 36 | } 37 | .nowPlayingColumn__133bf { 38 | background: transparent; 39 | } 40 | .nowPlayingScroller__5cd67 { 41 | padding: 20px; 42 | } 43 | .header-13Cw0- { 44 | padding: 0 0 20px 0; 45 | } 46 | .emptyCard__7e549 { 47 | background: var(--background-alt); 48 | border-radius: var(--border-radius); 49 | } 50 | 51 | .wrapper__00943 { 52 | background: var(--background-alt); 53 | border-radius: var(--border-radius); 54 | border: none; 55 | &:hover { 56 | background: var(--background-light); 57 | .inset_bf1984 { 58 | background: var(--background-alt); 59 | } 60 | } 61 | } 62 | .section__00943 { 63 | background: var(--background-light); 64 | } 65 | .inset_bf1984 { 66 | background: var(--background); 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /src/theme/pages/_index.scss: -------------------------------------------------------------------------------- 1 | @forward './friends'; 2 | @forward './serverboost'; 3 | @forward './nitro'; 4 | @forward './discovery'; 5 | -------------------------------------------------------------------------------- /src/theme/pages/_nitro.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .scroller__244e5 { 3 | background: var(--background); 4 | } 5 | .detailsBlock-FoDTGA { 6 | background: var(--background-alt); 7 | } 8 | .feature-2IUcBI { 9 | background: var(--background-alt); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/theme/pages/_serverboost.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .perksModal-fSYqOq { 3 | background: var(--background); 4 | } 5 | .ctaBar-2UsjF2 { 6 | background: var(--background-alt); 7 | } 8 | 9 | .tierBody-16Chc9 { 10 | background: var(--background-alt); 11 | } 12 | .tierHeaderLocked-1s2JJz { 13 | background: var(--background-light-alt); 14 | } 15 | .perk-2WeBWW { 16 | background: var(--background-alt); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/theme/popouts/_autocomplete.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .autocomplete__13533 { 3 | background: var(--background-light); 4 | box-shadow: var(--box-shadow); 5 | .categoryHeader_d1405b { 6 | background: var(--background-light); 7 | } 8 | } 9 | .selected-3H3-RC { 10 | background: var(--background-alt); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/theme/popouts/_contextmenu.scss: -------------------------------------------------------------------------------- 1 | .theme-light .menu_c1e9c4 { 2 | background: var(--background-light); 3 | } 4 | .theme-dark .menu_c1e9c4 { 5 | background: var(--background-light-alt); 6 | } 7 | 8 | #app-mount { 9 | .menu_c1e9c4 { 10 | box-shadow: var(--box-shadow); 11 | 12 | // Quick reactions 13 | .button_f563df { 14 | background: var(--background); 15 | } 16 | } 17 | .item_c1e9c4 { 18 | line-height: normal; 19 | 20 | .iconContainer_c1e9c4 { 21 | display: flex; 22 | align-items: center; 23 | justify-content: center; 24 | } 25 | .caret_c1e9c4 { 26 | color: var(--text-normal); 27 | } 28 | 29 | &:active, 30 | &.focused_c1e9c4:not(.colorDanger_c1e9c4) { 31 | background: rgb(var(--accent), 1); 32 | color: var(--accent-text); 33 | .caret_c1e9c4 { 34 | color: var(--accent-text); 35 | } 36 | } 37 | &.colorBrand_c1e9c4 { 38 | color: rgb(var(--accent)); 39 | &.focused_c1e9c4 { 40 | color: var(--accent-text); 41 | } 42 | } 43 | &.colorPremium-p4p7qO { 44 | color: rgb(var(--discord-nitro) / 1); 45 | &.focused_c1e9c4 { 46 | color: #fff; 47 | background: rgb(var(--discord-nitro) / 1); 48 | } 49 | } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/theme/popouts/_emojipicker.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .contentWrapper__08434 { 3 | background: var(--background-light-alt); 4 | box-shadow: var(--box-shadow); 5 | border-radius: var(--border-radius); 6 | } 7 | .scroller_affa7e::-webkit-scrollbar { 8 | display: none; 9 | } 10 | .container_fea832 { 11 | background: var(--background); 12 | border: 1px solid var(--background); 13 | transition: border-color 0.15s ease; 14 | &:hover { 15 | border-color: var(--background-light); 16 | } 17 | &:focus-within { 18 | border-color: rgb(var(--accent), 1); 19 | } 20 | } 21 | 22 | .wrapper_dc0b29 { 23 | background: var(--background); 24 | } 25 | 26 | .list_c656ac { 27 | .listItems_affa7e { 28 | left: 0 !important; 29 | } 30 | ul[role='row'] { 31 | padding-left: 8px; 32 | } 33 | .wrapper__14245 { 34 | background: var(--background-light-alt); 35 | padding-left: 12px; 36 | } 37 | .inspector_aeaaeb { 38 | background: var(--background-light); 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/theme/popouts/_inbox.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .container__95796 { 3 | margin: 20px 0; 4 | } 5 | .channelHeader__35a7e { 6 | background: var(--background-light-alt); 7 | padding: 16px; 8 | } 9 | .messageContainer__95796 { 10 | border-radius: 0 0 var(--border-radius) var(--border-radius); 11 | background: var(--background-alt); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/theme/popouts/_index.scss: -------------------------------------------------------------------------------- 1 | @forward './userpopout'; 2 | @forward './contextmenu'; 3 | @forward './pins'; 4 | @forward './search'; 5 | @forward './inbox'; 6 | @forward './emojipicker'; 7 | @forward './autocomplete'; 8 | @forward './threads'; 9 | -------------------------------------------------------------------------------- /src/theme/popouts/_pins.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .messagesPopoutWrap__45690 { 3 | background: var(--background-light); 4 | box-shadow: var(--box-shadow); 5 | border-radius: var(--border-radius); 6 | } 7 | .header__45690 { 8 | background: var(--background-alt); 9 | box-shadow: var(--box-shadow); 10 | z-index: 2; 11 | } 12 | .messageGroupWrapper__45690 { 13 | background: var(--background-alt); 14 | border: none; 15 | } 16 | .messageGroupCozy__45690 { 17 | margin: 0 !important; 18 | padding: 8px 8px 8px 0 !important; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/theme/popouts/_search.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .container__55c99 { 3 | background: var(--background-light); 4 | box-shadow: var(--box-shadow); 5 | } 6 | .option__56fec { 7 | &:after { 8 | background: linear-gradient(90deg, transparent, var(--background-light)); 9 | } 10 | &.selected-rZcOL- { 11 | background: var(--background-alt); 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/theme/popouts/_threads.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .container_d9c882 { 3 | background: var(--background-light); 4 | box-shadow: var(--box-shadow); 5 | border-radius: var(--border-radius); 6 | } 7 | .header_d9c882 { 8 | background: var(--background-alt); 9 | } 10 | .container__6764b { 11 | background: var(--background-alt); 12 | border-radius: var(--border-radius); 13 | border: none; 14 | &:hover { 15 | background: var(--background); 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/theme/popouts/_userpopout.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .userPopoutOuter_c69a7b { 3 | .messageInputContainer_f2c0a8 { 4 | border: none; 5 | } 6 | 7 | .roles_fa2f72 { 8 | gap: 4px; 9 | } 10 | .role_dfa8b6 { 11 | margin: 0; 12 | background: transparent; 13 | position: relative; 14 | border-radius: 10px; 15 | overflow: hidden; 16 | gap: 6px; 17 | padding: 6px; 18 | .roleCircle__4f569 { 19 | position: unset; 20 | overflow: visible; 21 | filter: none; 22 | margin: 0; 23 | &::before { 24 | content: ''; 25 | position: absolute; 26 | inset: 0; 27 | background: inherit; 28 | opacity: 0.15; 29 | z-index: 0; 30 | pointer-events: none; 31 | } 32 | } 33 | .roleRemoveButton_dfa8b6 { 34 | position: unset; 35 | & + .roleName__48c1c { 36 | position: relative; 37 | z-index: 1; 38 | } 39 | } 40 | .roleRemoveIcon__48c1c { 41 | left: 12px; 42 | } 43 | .roleName__48c1c { 44 | margin: 0; 45 | color: var(--text-focus); 46 | } 47 | } 48 | 49 | &.userPopoutUnthemed-3WS0Xb { 50 | background: var(--background-light-alt); 51 | } 52 | &.userProfileOuterUnthemed_c69a7b { 53 | background: var(--background-light-alt); 54 | .userPopoutInner_c69a7b { 55 | background: transparent; 56 | } 57 | .overlayBackground_c69a7b { 58 | background: var(--background-light); 59 | } 60 | } 61 | } 62 | .userPopoutInner_c69a7b { 63 | &.userPopoutInnerNonPremium-3zrFkp { 64 | background: transparent; 65 | .overlayBackground-arbZMT, 66 | .profileBadges-31rDHI { 67 | background: var(--background); 68 | } 69 | } 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /src/theme/settings/_global.scss: -------------------------------------------------------------------------------- 1 | #app-mount .layer__960e4:not(.baseLayer__960e4) { 2 | background: var(--background); 3 | 4 | // Groups 5 | .children__7bffb { 6 | & > .marginBottom40_fd297e:not(.divider-3y7HAB) { 7 | background: var(--background-alt); 8 | border-radius: var(--border-radius); 9 | padding: 16px; 10 | border: none; 11 | .marginTop8_fd297e { 12 | margin-top: 0; 13 | } 14 | } 15 | & > .marginBottom20_fd297e:not(.title-3hptVQ) { 16 | background: var(--background-alt); 17 | border-radius: var(--border-radius); 18 | padding: 16px; 19 | border: none; 20 | } 21 | & > [class*='marginBottom'] { 22 | .container-1zDvAE:last-child { 23 | margin-bottom: 0; 24 | } 25 | [class*='marginBottom'] { 26 | padding: 0; 27 | } 28 | } 29 | & > .divider-3wNib3 { 30 | background: var(--background-alt); 31 | border-radius: var(--border-radius); 32 | padding: 16px; 33 | border: none; 34 | } 35 | .children__7bffb .flex__7c0ba.flex_abf706 { 36 | padding: 0 !important; 37 | } 38 | } 39 | 40 | // Dividers 41 | .divider-3y7HAB { 42 | display: none; 43 | } 44 | 45 | // Notices 46 | .formNotice-2nS8ey { 47 | padding: 0; 48 | background: transparent; 49 | } 50 | .card-16VQ8C { 51 | background: var(--background-light); 52 | border: none; 53 | } 54 | 55 | .sidebarRegionScroller__23e6b { 56 | background: var(--background-dark); 57 | } 58 | 59 | .contentRegionScroller__23e6b, 60 | .contentRegion__23e6b { 61 | background: var(--background); 62 | } 63 | 64 | // Save changes 65 | .elevationHigh__08882 { 66 | background: var(--background-light) !important; 67 | box-shadow: var(--box-shadow); 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /src/theme/settings/_index.scss: -------------------------------------------------------------------------------- 1 | @forward './global'; 2 | @forward './user'; 3 | @forward './guild'; 4 | @forward './bd'; 5 | -------------------------------------------------------------------------------- /src/theme/settings/bd/_index.scss: -------------------------------------------------------------------------------- 1 | @forward './list'; 2 | -------------------------------------------------------------------------------- /src/theme/settings/bd/_list.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .bd-addon-card { 3 | background: var(--background-alt); 4 | } 5 | .bd-addon-header { 6 | background-color: var(--background-light-alt); 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/theme/settings/guild/_auditlog.scss: -------------------------------------------------------------------------------- 1 | #app-mount [aria-label='GUILD_SETTINGS'] { 2 | [data-list-id='audit-log'] { 3 | background: var(--background-alt); 4 | border-radius: var(--border-radius); 5 | margin-top: 20px; 6 | [role='listitem'] { 7 | background: transparent; 8 | &[aria-expanded='true'] { 9 | background: var(--background-light); 10 | } 11 | } 12 | } 13 | .auditLog-3jNbM6 { 14 | border: none; 15 | margin: 0; 16 | .divider-1pnAR2 { 17 | display: none; 18 | } 19 | &:hover { 20 | background: var(--background-light); 21 | } 22 | } 23 | .headerExpanded-CUEwZ5, 24 | .changeDetails-bk98pu { 25 | background: var(--background-light); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/theme/settings/guild/_booststatus.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .tierBody-x9kBBp { 3 | background: var(--background-alt); 4 | } 5 | .tierHeaderLocked-1a2opw { 6 | background: var(--background-light-alt); 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/theme/settings/guild/_community.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .featureCard-1RR4Tl { 3 | background: var(--background-alt); 4 | } 5 | .featureIcon-3p1TC_ { 6 | background: var(--background-light); 7 | } 8 | 9 | .upsellContainer-L9xv7w { 10 | background: var(--background-alt); 11 | } 12 | .upsellFooter-ZYsio_ { 13 | background: var(--background-light-alt); 14 | } 15 | 16 | // Overview 17 | .twoColumnFormSection-3aoF-Y { 18 | margin-top: 20px; 19 | } 20 | 21 | // Server insights 22 | .developerPortalCtaWrapper-2XNafh, 23 | .analyticsCard-qckucw { 24 | background: var(--background-alt); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/theme/settings/guild/_index.scss: -------------------------------------------------------------------------------- 1 | @forward './auditlog'; 2 | @forward './roles'; 3 | @forward './booststatus'; 4 | @forward './community'; 5 | -------------------------------------------------------------------------------- /src/theme/settings/guild/_roles.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .sidebar_e29cd7 { 3 | border: none; 4 | } 5 | .titleContainer_e29cd7 { 6 | background: var(--background); 7 | box-shadow: none; 8 | } 9 | .header_c6bf1b { 10 | background: var(--background); 11 | box-shadow: none; 12 | } 13 | .scroller_ff90b2 { 14 | background: transparent; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/theme/settings/user/_authapps.scss: -------------------------------------------------------------------------------- 1 | #app-mount .layer__960e4:not(.baseLayer__960e4) { 2 | .authedApp__50a54 { 3 | background: var(--background-alt); 4 | border-radius: var(--border-radius); 5 | border: none; 6 | } 7 | .accountBtnInner-3XK70s { 8 | background-color: var(--background-light); 9 | } 10 | .connection-107AGH { 11 | background: var(--background-alt); 12 | } 13 | .connectionHeader-2rV1ze { 14 | background: var(--background-light-alt); 15 | } 16 | .integration-1f5IUi { 17 | background: var(--background); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/theme/settings/user/_billing.scss: -------------------------------------------------------------------------------- 1 | #app-mount .layer__960e4:not(.baseLayer__960e4) { 2 | .paymentPane__01014 { 3 | background: var(--background-alt); 4 | } 5 | .paginator__01014 { 6 | background: transparent; 7 | } 8 | .bottomDivider__01014 { 9 | border: none; 10 | &::-webkit-scrollbar { 11 | display: none; 12 | } 13 | } 14 | .payment_e9cb00 { 15 | background: transparent; 16 | &:hover { 17 | background: var(--background-light-alt); 18 | } 19 | &:not(.hoverablePayment_e9cb00) { 20 | background: var(--background-light); 21 | padding-bottom: 20px; 22 | } 23 | } 24 | .expandedInfo_e9cb00 { 25 | background: var(--background-light-alt); 26 | margin: 0 20px; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/theme/settings/user/_connections.scss: -------------------------------------------------------------------------------- 1 | #app-mount .layer__960e4:not(.baseLayer__960e4) { 2 | .connectContainer_c7f964 { 3 | background: var(--background-light); 4 | margin-bottom: 55px; 5 | } 6 | .accountButtonInner_c7f964 { 7 | background-color: var(--background-light-alt); 8 | &:hover { 9 | background-color: var(--background); 10 | } 11 | } 12 | 13 | .connection_c7f964 { 14 | background: var(--background-alt); 15 | } 16 | .connectionHeader_c7f964 { 17 | background: var(--background-light-alt); 18 | } 19 | 20 | .metadataContainer_c7f964 { 21 | background: var(--background); 22 | padding: 16px; 23 | } 24 | .integration_c7f964 { 25 | background: var(--background-alt); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/theme/settings/user/_index.scss: -------------------------------------------------------------------------------- 1 | @forward './myaccount'; 2 | @forward './authapps'; 3 | @forward './connections'; 4 | @forward './voicevideo'; 5 | @forward './billing'; 6 | -------------------------------------------------------------------------------- /src/theme/settings/user/_myaccount.scss: -------------------------------------------------------------------------------- 1 | #app-mount .layer__960e4:not(.baseLayer__960e4) { 2 | .accountProfileCard__1fed1 { 3 | background: var(--background-alt); 4 | } 5 | .background__1fed1, 6 | .fieldList__1fed1 { 7 | background: var(--background); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/theme/settings/user/_voicevideo.scss: -------------------------------------------------------------------------------- 1 | #app-mount [aria-label='GUILD_SETTINGS'] { 2 | .children__7bffb > .flex-1xMQg5.flex_abf706 { 3 | background: var(--background-alt); 4 | border-radius: var(--border-radius); 5 | padding: 16px; 6 | } 7 | .micTest-bjZA-b { 8 | background: var(--background-alt); 9 | border-radius: var(--border-radius); 10 | padding: 16px; 11 | margin-top: 20px; 12 | .marginTop8_fd297e { 13 | margin-top: 0; 14 | } 15 | } 16 | .container_e5cdf3 { 17 | width: 530px !important; 18 | } 19 | .notches_e5cdf3 { 20 | background: none; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/theme/sidebar/_channel.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .wrapper__2ea32 { 3 | height: auto; 4 | margin-bottom: 2px; 5 | &.modeMuted__2ea32 .name__2ea32 { 6 | color: var(--text-muted); 7 | } 8 | 9 | &.modeUnreadImportant__2ea32 .icon__2ea32 { 10 | color: var(--text-focus); 11 | } 12 | 13 | &.modeSelected__2ea32 { 14 | .icon__2ea32 { 15 | color: var(--text-focus); 16 | } 17 | &:before { 18 | content: ''; 19 | position: absolute; 20 | top: 1px; 21 | height: calc(100% - 2px); 22 | width: 4px; 23 | background: rgb(var(--accent), 1); 24 | z-index: 1; 25 | } 26 | } 27 | 28 | &.typeThread__2ea32 .link__2ea32 { 29 | padding-left: 42px; 30 | } 31 | } 32 | .spine__5b40b { 33 | z-index: 1; 34 | } 35 | .wrapper__2ea32 { 36 | margin-left: 0; 37 | border-radius: 0 var(--border-radius) var(--border-radius) 0; 38 | } 39 | .link__2ea32 { 40 | padding-left: 16px; 41 | } 42 | .unread__2ea32 { 43 | z-index: 2; 44 | left: 0; 45 | } 46 | 47 | // Voice 48 | .avatarSpeaking__07f91 { 49 | box-shadow: 50 | inset 0 0 0 2px rgb(var(--accent), 1), 51 | inset 0 0 0 3px var(--background); 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/theme/sidebar/_container.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .container__2637a, 3 | .sidebar_c48ade { 4 | background: var(--background); 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /src/theme/sidebar/_dms.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .privateChannels__35e86 { 3 | background: transparent; 4 | .scroller__99e7c { 5 | background: transparent; 6 | } 7 | } 8 | .channel__972a0 { 9 | margin-left: 0; 10 | border-radius: 0 4px 4px 0; 11 | padding: 0; 12 | margin-bottom: 3px; 13 | .layout__20a53 { 14 | border-radius: 0 var(--border-radius) var(--border-radius) 0; 15 | padding-left: 16px; 16 | } 17 | 18 | .selected-3veCBZ::before { 19 | content: ''; 20 | position: absolute; 21 | left: 0; 22 | width: 4px; 23 | height: 100%; 24 | background: rgb(var(--accent), 1); 25 | } 26 | } 27 | 28 | // right user profile 29 | .userPanelOuter-xc-WYi { 30 | background: var(--background-alt); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/theme/sidebar/_header.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .selected_f37cb1 .header_f37cb1 { 3 | background: transparent; 4 | } 5 | .header_f37cb1 { 6 | box-shadow: none; 7 | &:hover { 8 | background: transparent; 9 | } 10 | } 11 | 12 | .searchBar__35e86 { 13 | box-shadow: none; 14 | } 15 | .searchBarComponent__35e86 { 16 | background: var(--background-dark); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/theme/sidebar/_index.scss: -------------------------------------------------------------------------------- 1 | @forward './container'; 2 | @forward './panels'; 3 | @forward './channel'; 4 | @forward './header'; 5 | @forward './unreadbar'; 6 | @forward './dms'; 7 | -------------------------------------------------------------------------------- /src/theme/sidebar/_panels.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .panels_c48ade { 3 | background: var(--background); 4 | } 5 | .activityPanel_c48ade .container__37e49 { 6 | background: transparent; 7 | } 8 | .container__37e49, 9 | .activityPanel_c48ade { 10 | background: transparent; 11 | border: none; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/theme/sidebar/_unreadbar.scss: -------------------------------------------------------------------------------- 1 | #app-mount .sidebar_c48ade .bar__3b95d { 2 | border-radius: var(--border-radius); 3 | background: var(--background-light); 4 | box-shadow: var(--box-shadow); 5 | color: var(--text-normal); 6 | } 7 | --------------------------------------------------------------------------------