├── assets └── preview.png ├── manifest.json ├── Material-Discord.theme.css └── README.md /assets/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CapnKitten/Material-Discord/HEAD/assets/preview.png -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Material-Discord", 3 | "description": "A theme based on Google's Material Design", 4 | "version": "3.0.3", 5 | "author": "CapnKitten", 6 | "theme": "Material-Discord.theme.css", 7 | "license": "MIT" 8 | } 9 | -------------------------------------------------------------------------------- /Material-Discord.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Material Discord 3 | * @version 3.0.5 4 | * @description A theme based on Google's Material Design 5 | * @author CapnKitten 6 | * 7 | * @website http://github.com/CapnKitten 8 | * @source https://github.com/CapnKitten/BetterDiscord/blob/master/Themes/Material-Discord/css/source.css 9 | * @donate https://paypal.me/capnkitten 10 | * @invite jzJkA6Z 11 | */ 12 | 13 | @import url(https://capnkitten.github.io/BetterDiscord/Themes/Material-Discord/css/source.css); 14 | 15 | /* Material You addon */ 16 | @import url(https://capnkitten.github.io/BetterDiscord/Themes/Material-Discord/css/addons/material-you/source.css); 17 | 18 | /* MATERIAL YOU DARK THEME SETTINGS */ 19 | .theme-dark { 20 | --saturation-modifier: 0.31; 21 | --lightness-modifier: 0.225; 22 | --text-lightness-modifier: 1.0; 23 | --ui-darkness-modifier: 1.0; 24 | } 25 | 26 | /* MATERIAL YOU LIGHT THEME SETTINGS */ 27 | .theme-light { 28 | --saturation-modifier: 0.74; 29 | --lightness-modifier: 2.125; 30 | --text-lightness-modifier: 1.0; 31 | } 32 | 33 | :root { 34 | /* ACCENT HSL AND TEXT COLOR SETTINGS */ 35 | --accent-hue: 227; 36 | --accent-saturation: 71%; 37 | --accent-lightness: 61%; 38 | --accent-text-color: hsl(0,0%,100%); /* DOES NOTHING WITH MATERIAL YOU ENABLED */ 39 | --accent-button-action: hsl(0,0%,100%); 40 | 41 | /* ALERT HSL AND TEXT COLOR SETTINGS */ 42 | --alert-hue: 0; 43 | --alert-saturation: 85%; 44 | --alert-lightness: 61%; 45 | --alert-text-color: hsl(0,0%,100%); /* DOES NOTHING WITH MATERIAL YOU ENABLED */ 46 | 47 | /* WARNING HSL AND TEXT COLOR SETTINGS*/ 48 | --warning-hue: 40; 49 | --warning-saturation: 86.4%; 50 | --warning-lightness: 56.9%; 51 | --warning-text-color: hsl(0,0%,100%); /* DOES NOTHING WITH MATERIAL YOU ENABLED */ 52 | 53 | /* MESSAGE SETTINGS */ 54 | --message-radius: 18px; 55 | --message-padding-top: 8px; 56 | --message-padding-side: 12px; 57 | 58 | /* MESSAGE MEDIA SETTINGS */ 59 | --media-radius: 10px; 60 | 61 | /* CARD SETTINGS */ 62 | --card-radius: 8px; 63 | --card-radius-big: 18px; 64 | 65 | /* BUTTON SETTINGS */ 66 | --button-height: 36px; 67 | --button-padding: 0 24px; 68 | --button-action-color: hsl(0,0%,100%); 69 | 70 | /* INPUT SETTINGS */ 71 | --input-height: 36px; 72 | --input-padding: 0 12px; 73 | 74 | /* POPOUT AND MODAL SETTINGS */ 75 | --popout-radius: 8px; 76 | --popout-radius-big: 18px; 77 | 78 | /* TOOLTIP SETTINGS */ 79 | --tooltip-color: hsl(0,0%,38%,0.9); 80 | --tooltip-text-color: hsl(0,0%,87%); 81 | --tooltip-font-size: 12px; 82 | --tooltip-padding: 8px; 83 | --tooltip-radius: 8px; 84 | 85 | /* SCROLLBAR SETTINGS */ 86 | --scrollbar-width: 10px; 87 | --scrollbar-thin-width: 6px; 88 | } 89 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Material Discord Theme - [![Paypal][paypal-logo]][paypal-url] [![GitHub][github-logo]][github-url] [![Discord][discord-logo]][discord-url] 2 | #### A theme based on Google's Material Design 3 |
4 | 5 | Current version: v3.0.4 (24/01/2022) 6 | 7 | [BetterDiscord download](https://betterdiscord.app/theme/MaterialDiscord) 8 |
9 | [Material Discord Customization plugin](https://github.com/CapnKitten/BetterDiscord/tree/master/Plugins/MaterialDiscordCustomization) 10 | 11 | [View add-on themes](https://github.com/CapnKitten/BetterDiscord/tree/master/Themes/Material-Discord/css/addons) 12 |
13 | [View source files](https://github.com/CapnKitten/BetterDiscord/tree/master/Themes/Material-Discord) 14 | 15 | Vencord link 16 | ``` 17 | https://capnkitten.github.io/BetterDiscord/Themes/Material-Discord/css/source.css 18 | ``` 19 | 20 | ## Previews 21 | 22 | (Previews are subject to be out of date) 23 | 24 | #### Main chat area 25 | 26 | ![discord-801](https://github.com/user-attachments/assets/11b835a5-01ee-45fc-9bb5-827950d0e8a5) 27 | 28 | #### User popout info 29 | 30 | ![discord-802](https://github.com/user-attachments/assets/90fbb99b-49cc-45c1-866f-d94f33ad32dd) 31 | 32 | #### User profile 33 | 34 | ![discord-803](https://github.com/user-attachments/assets/34f16046-8f61-49da-b0ee-f34c68896931) 35 | 36 | #### User settings 37 | 38 | ![discord-804](https://github.com/user-attachments/assets/6fb817ef-4bdb-4d44-9d8b-770b08a51721) 39 | 40 | ![discord-805](https://github.com/user-attachments/assets/7243e737-9aab-4a94-9cac-41ab20515008) 41 | 42 | #### DMs 43 | 44 | ![discord-806](https://github.com/user-attachments/assets/a5e24ed7-f41e-4076-99f6-071d34d662f6) 45 | 46 | ## Variables 47 | 48 | ** **Indicates that it has two values for both the dark and light themes of Discord. Instead of using `:root`, use `.theme-dark` or `.theme-light`.** 49 | 50 | #### Material You 51 | - `--saturation-modifier` - The value that controls the saturation for the entire ui, including buttons. Default: `0.31` - `0.74`** 52 | - `--lightness-modifier` - The value that controls the lightness for the entire ui, including buttons. Default: `0.225` - `2.125`** 53 | - `--text-lightness-modifier` - The value that controls the text lightness. Default: `1.0` - `1.0`** 54 | - `--ui-darkness-modifier` - The value that controls the darkness for the entire ui, excluding buttons and is __*ONLY*__ for the dark theme. Default: `1.0`** 55 | 56 | #### App elements 57 | - `--app-font` - The font used throughout the entire theme. The font must either be installed or imported. Default: `"Google Sans"` 58 | - `--app-bg` - The background for the entire Discord app. Default: `var(--main-alt)` 59 | - `--main-color` - The background color for main content areas like in the settings menu. Default: `hsl(225,8%,9%)` - `hsl(0,0%,98%)`** 60 | - `--main-alt` - An alternative background color for main content areas. Default: `hsl(220,9%,6%)` - `hsl(0,0%,91%)`** 61 | - `--server-color` - The background color for the servers list. Default: `transparent` - `transparent`** 62 | - `--status-picker-color` - The background color for the status area with the settings button. Default: `hsl(228,5%,18%)` - `hsl(180,3%,87%)`** 63 | - `--sidebar-panel-color` - The background color for the sidebar panels in the channels list. Default: `hsl(228,7%,14%)` - `hsl(210,5%,93%)`** 64 | - `--chat-color` - The background color the main chat area. Default: `var(--main-color)` 65 | - `--avatar-radius` - The border radius of avatars and servers. Default: `24px` 66 | - `--tooltip-color` - The background color for tooltips. Default: `hsl(0,0%,38%,0.9)` 67 | - `--tooltip-text-color` - The text color for tooltips. Default: `hsl(0,0%,87%)` 68 | - `--tooltip-shadow` - The box shadow for tooltips. Default: `0px 5px 15px rgba(0,0,0,0.2)` 69 | 70 | #### Accent elements 71 | - `--accent-hue` - The hue value for the accent color of the theme. Default: `224` 72 | - `--accent-saturation` - The saturation percentage for the accent color of the theme. Default: `71%` 73 | - `--accent-lightness` - The lightness percentage for the accent color of the theme. Default: `61%` 74 | - `--accent-text-color` - The text color for buttons and other various elements with the accent background color. Default: `hsl(0,0%,100%)` 75 | 76 | #### Alert elements 77 | - `--alert-hue` - The hue value for various elements that use the alert color. Default: `0` 78 | - `--alert-saturation` - The saturation percentage for various elements that use the alert color. Default: `85%` 79 | - `--alert-lightness` - The lightness percentage for various elements that use the alert color. Default: `61%` 80 | - `--alert-text-color` - The text color for various elements with the alert background color. Default: `hsl(0,0%,100%)` 81 | 82 | #### Warning elements 83 | - `--warning-hue` - The hue value for various elements that use the warning color. Default: `44`** 84 | - `--warning-saturation` - The saturation percentage for various elements that use the warning color. Default: `71%`** 85 | - `--warning-lightness` - The lightness percentage for various elements that use the warning color. Default: `61%`** 86 | - `--warning-text-color` - The text color for various elements with the warning background color. Default: `hsl(0,0%,100%)`** 87 | 88 | #### Message elements 89 | - `--message-color` - The background color for message bubbles. Default: `hsl(216,7%,14%)` - `hsl(210,4%,90%)`** 90 | - `--message-color-hover` - The hover background color for message bubbles. Default: `hsl(216,7%,18%)` - `hsl(210,4%,86%)`** 91 | - `--message-color-alt` - An alternative background color for message bubbles in areas like pinned messages. Default: `hsl(216,7%,13%)` - `hsl(210,4%,84%)`** 92 | - `--message-radius` - The border radius for the message bubbles. Default: `19px` 93 | - `--message-padding-top` - The top and bottom padding of message bubbles. Default: `8px` 94 | - `--message-padding-side` - The side padding of message bubbles. Default: `12px` 95 | - `--media-radius` - The border radius for images, videos, and audio. Default: `19px` 96 | - `--attachment-color` - The background color for all attachments. Default: `hsl(216,7%,9%)` - `hsl(210,4%,79%)`** 97 | - `--main-textarea-color` - The background color for the main chat text box. Default: `hsl(240,4%,16%)` - `hsl(0,0%,89%)`** 98 | - `--main-textarea-color-alt` - An alternative background color for the main chat text box. Default: `hsl(240,2%,22%)` - `hsl(0,0%,100%)`** 99 | - `--main-textarea-border` - The border color for the main chat text box. Default: `hsl(0,0%,29%)` - `hsl(0,0%,66%)`** 100 | - `--main-textarea-radius` - The border radius for the main chat text box. Default: `24px` 101 | 102 | #### Popout menu elements 103 | - `--popout-color` - The background color for popout menus and modals. Default: `hsl(214,7%,19%)` - `hsl(0,0%,100%)`** 104 | - `--popout-color-alt` - An alternative background color for popout menus and modals. Default: `hsl(216,7%,14%)` - `hsl(0,0%,90%)`** 105 | - `--popout-header-border` - The border color for popout menu headers. Default: `hsl(0,0%,100%,0.125)` - `hsl(0,0%,80%)`** 106 | - `--separator-color` - The background color for the separator lines in various popout menus. Default: `hsl(0,0%,100%,0.125)` - `hsl(0,0%,0%,0.195)`** 107 | - `--popout-radius` - The border radius for popout menus. Default: `8px` 108 | - `--popout-radius-big` - The bigger border radius for modals. Default: `18px` 109 | 110 | #### Card elements 111 | - `--card-color-filled` - The background color for cards. Default: `hsl(225,6%,13%)` - `hsl(0,0%,92%)`** 112 | - `--card-color-hover` - The background color for hovering over cards. Default: `hsl(225,6%,16%)` - `hsl(0,0%,85%)`** 113 | - `--card-color-active`- The background color for active cards. Default: `hsl(225,6%,25%)` - `hsl(0,0%,80%)`** 114 | - `--card-color-alt` - An background color for cards. Default: `hsl(225,6%,18%)` - `hsl(0,0%,98%)`** 115 | - `--card-color-alt-hover` - An background color for hovering over cards. Default: `hsl(225,6%,21%)` - `hsl(0,0%,88%)`** 116 | - `--card-border-color` - The border color for outlined cards. Default `hsl(220,3%,26%)` - `hsl(0,0%,78%)`** 117 | - `--card-header-text-color` - The text color for card headers. Default: `hsl(0,0%,93%)` - `hsl(0,0%,20%)`** 118 | - `--card-radius` - The border radius for cards. Default: `8px` 119 | - `--card-radius-big` - The bigger border radius for cards. Default: `18px` 120 | 121 | #### Button elements 122 | - `--button-height` - The height for buttons. Default: `36px` 123 | - `--button-padding` - The left and right padding for buttons. Default: `0 24px` 124 | - `--button-radius` - The border radius for buttons. Default: `18px` 125 | - `--button-link-color` - The background color for transparent buttons. Default: `0,0%,100%` - `0,0%,0%`** 126 | - `--button-link-text-color` - The text color for transparent buttons. Default: `hsl(0,0%,100%)` - `hsl(0,0%,20%)`** 127 | 128 | #### Slider and switch elements 129 | - `--switch-knob-color` - The background color for the knob on switches. Default: `hsl(0,0%,47%)` - `hsl(0,0%,47%)`** 130 | - `--switch-slider-color` - The background color for the background slider on switches. Default: `hsl(240,1%,20%)` - `hsl(240,1%,20%)`** 131 | 132 | #### Input elements 133 | - `--input-color` - The background color for text fields that don't have the animated border. Default: `hsl(0,0%,89%)` - `hsl(0,0%,89%)`** 134 | - `--input-color-alt` - The alternate background color for text fields that don't have the animated border. Default: `hsl(0,0%,100%)` - `hsl(0,0%,100%)`** 135 | - `--input-border-color` - The border color for text fields. Default: `hsl(0,0%,66%)` - `hsl(0,0%,66%)`** 136 | - `--input-text-color` - The text color for text fields. Default: `hsl(0,0%,17%)` - `hsl(0,0%,17%)`** 137 | - `--input-placeholder-color` - The placeholder text color for text fields. Default: `hsl(0,0%,39%)` - `hsl(0,0%,39%)`** 138 | 139 | #### Various elements 140 | - `--md-ripple-color` - The color of the ripple effect. Default: `0,100%,100%` - `0,0%,0%`** 141 | - `--scrollbar-color` - The background color for scrollbars. Default: `hsl(0,0%,82%)` - `hsl(0,0%,10%)`** 142 | 143 | [paypal-logo]: https://img.shields.io/static/v1?label=PayPal&message=Donate&style=flat&logo=paypal&color=blue 144 | [paypal-url]: https://paypal.me/capnkitten 145 | 146 | [github-logo]: https://img.shields.io/static/v1?label=GitHub&message=Sponsor&style=flat&logo=github&color=black 147 | [github-url]: https://github.com/sponsors/CapnKitten 148 | 149 | [discord-logo]: https://img.shields.io/static/v1?label=Discord&message=Server&style=flat&logo=discord&color=blue 150 | [discord-url]: https://discord.gg/jzJkA6Z 151 | --------------------------------------------------------------------------------