Download

MaterialDesign

By The Commie Axolotl Version 1.0.0 Updated 12/23/2022 47.7K downloads

A clean theme inspired by Google's Material Design Guidelines.

flat layout customizable dark light

Live preview

Full Discord interface with this theme applied — powered by ThemePreview.

Screenshot

MaterialDesign screenshot
MaterialDesign.theme.css
GitHub

Open source

https://raw.githubusercontent.com/TheCommieAxolotl/BetterDiscord-Stuff/2ac5b8a215e35a4c66777b469da4ce858be49092/MaterialDesign/MaterialDesign.theme.css
1/**
2 * @name MaterialDesign
3 * @version 1.0.0
4 * @author TheCommieAxolotl#0001
5 * @authorId 538487970408300544
6 * @description A clean theme inspired by Google's Material Design Guidelines.
7 * @source https://github.com/TheCommieAxolotl/BetterDiscord-Stuff/tree/main/MaterialDesign
8 * @website https://thecommieaxolotl.github.io/BetterDiscord-Stuff/
9 * @license MIT
10 * @invite g2KnUw7u7N
11*/
12
13/* Imports */
14@import url("https://discord-custom-covers.github.io/usrbg/dist/usrbg.css");
15@import url("https://thecommieaxolotl.github.io/BetterDiscord-Stuff/Imports/UserBadges.css");
16@import url("https://maendisease.github.io/BetterDiscordStuff/css/bettterInvites.css");
17@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
18@import url("https://fonts.googleapis.com/css2?family=Source Code Pro:wght@550&display=swap");
19
20/* Source */
21@import url("https://thecommieaxolotl.github.io/BetterDiscord-Stuff/MaterialDesign/Clients/betterdiscord.css");
22
23:root {
24 --font-primary: ";Roboto";, ";Helvetica Neue";, Helvetica, Arial, sans-serif;
25 --font-code: ";Source Code Pro";;
26 --01dpShadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
27 --02dpShadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
28 --03dpShadow: 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
29 --04dpShadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
30 --06dpShadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
31 --08dpShadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
32 --12dpShadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12);
33 --16dpShadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
34 --24dpShadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
35
36 --brand-experiment: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.75% * var(--skin-accent-l, 100)), calc(1% * var(--skin-accent-a, 100)));
37 --brand-experiment-100: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.98% * var(--skin-accent-l, 100)), calc(1% * var(--skin-accent-a, 100)));
38 --brand-experiment-130: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.961% * var(--skin-accent-l, 100)), calc(1% * var(--skin-accent-a, 100)));
39 --brand-experiment-160: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.942% * var(--skin-accent-l, 100)), calc(1% * var(--skin-accent-a, 100)));
40 --brand-experiment-200: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.923% * var(--skin-accent-l, 100)), calc(1% * var(--skin-accent-a, 100)));
41 --brand-experiment-230: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.93% * var(--skin-accent-l, 100)), calc(1% * var(--skin-accent-a, 100)));
42 --brand-experiment-260: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.884% * var(--skin-accent-l, 100)), calc(1% * var(--skin-accent-a, 100)));
43 --brand-experiment-300: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.865% * var(--skin-accent-l, 100)), calc(1% * var(--skin-accent-a, 100)));
44 --brand-experiment-330: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.846% * var(--skin-accent-l, 100)), calc(1% * var(--skin-accent-a, 100)));
45 --brand-experiment-360: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.827% * var(--skin-accent-l, 100)), calc(1% * var(--skin-accent-a, 100)));
46 --brand-experiment-400: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.88% * var(--skin-accent-l, 100)), calc(1% * var(--skin-accent-a, 100)));
47 --brand-experiment-430: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.788% * var(--skin-accent-l, 100)), calc(1% * var(--skin-accent-a, 100)));
48 --brand-experiment-460: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.769% * var(--skin-accent-l, 100)), calc(1% * var(--skin-accent-a, 100)));
49 --brand-experiment-500: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.75% * var(--skin-accent-l, 100)), calc(1% * var(--skin-accent-a, 100)));
50 --brand-experiment-530: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.69% * var(--skin-accent-l, 100)), calc(1% * var(--skin-accent-a, 100)));
51 --brand-experiment-560: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.63% * var(--skin-accent-l, 100)), calc(1% * var(--skin-accent-a, 100)));
52 --brand-experiment-600: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.57% * var(--skin-accent-l, 100)), calc(1% * var(--skin-accent-a, 100)));
53 --brand-experiment-630: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.51% * var(--skin-accent-l, 100)), calc(1% * var(--skin-accent-a, 100)));
54 --brand-experiment-660: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.45% * var(--skin-accent-l, 100)), calc(1% * var(--skin-accent-a, 100)));
55 --brand-experiment-700: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.39% * var(--skin-accent-l, 100)), calc(1% * var(--skin-accent-a, 100)));
56 --brand-experiment-730: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.33% * var(--skin-accent-l, 100)), calc(1% * var(--skin-accent-a, 100)));
57 --brand-experiment-760: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.27% * var(--skin-accent-l, 100)), calc(1% * var(--skin-accent-a, 100)));
58 --brand-experiment-800: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.21% * var(--skin-accent-l, 100)), calc(1% * var(--skin-accent-a, 100)));
59 --brand-experiment-830: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.15% * var(--skin-accent-l, 100)), calc(1% * var(--skin-accent-a, 100)));
60 --brand-experiment-860: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.9% * var(--skin-accent-l, 100)), calc(1% * var(--skin-accent-a, 100)));
61 --brand-experiment-900: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.3% * var(--skin-accent-l, 100)), calc(1% * var(--skin-accent-a, 100)));
62 --brand-experiment-05a: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.75% * var(--skin-accent-l, 100)), calc(0.0005 * var(--skin-accent-a, 100)));
63 --brand-experiment-10a: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.75% * var(--skin-accent-l, 100)), calc(0.001 * var(--skin-accent-a, 100)));
64 --brand-experiment-15a: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.75% * var(--skin-accent-l, 100)), calc(0.0015 * var(--skin-accent-a, 100)));
65 --brand-experiment-20a: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.75% * var(--skin-accent-l, 100)), calc(0.002 * var(--skin-accent-a, 100)));
66 --brand-experiment-25a: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.75% * var(--skin-accent-l, 100)), calc(0.0025 * var(--skin-accent-a, 100)));
67 --brand-experiment-30a: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.75% * var(--skin-accent-l, 100)), calc(0.003 * var(--skin-accent-a, 100)));
68 --brand-experiment-35a: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.75% * var(--skin-accent-l, 100)), calc(0.0035 * var(--skin-accent-a, 100)));
69 --brand-experiment-40a: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.75% * var(--skin-accent-l, 100)), calc(0.004 * var(--skin-accent-a, 100)));
70 --brand-experiment-45a: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.75% * var(--skin-accent-l, 100)), calc(0.0045 * var(--skin-accent-a, 100)));
71 --brand-experiment-50a: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.75% * var(--skin-accent-l, 100)), calc(0.005 * var(--skin-accent-a, 100)));
72 --brand-experiment-55a: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.75% * var(--skin-accent-l, 100)), calc(0.0055 * var(--skin-accent-a, 100)));
73 --brand-experiment-60a: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.75% * var(--skin-accent-l, 100)), calc(0.006 * var(--skin-accent-a, 100)));
74 --brand-experiment-65a: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.75% * var(--skin-accent-l, 100)), calc(0.0065 * var(--skin-accent-a, 100)));
75 --brand-experiment-70a: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.75% * var(--skin-accent-l, 100)), calc(0.007 * var(--skin-accent-a, 100)));
76 --brand-experiment-75a: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.75% * var(--skin-accent-l, 100)), calc(0.0075 * var(--skin-accent-a, 100)));
77 --brand-experiment-80a: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.75% * var(--skin-accent-l, 100)), calc(0.008 * var(--skin-accent-a, 100)));
78 --brand-experiment-85a: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.75% * var(--skin-accent-l, 100)), calc(0.0085 * var(--skin-accent-a, 100)));
79 --brand-experiment-90a: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.75% * var(--skin-accent-l, 100)), calc(0.009 * var(--skin-accent-a, 100)));
80 --brand-experiment-95a: hsla(var(--skin-accent-h, 264), calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), calc(0.75% * var(--skin-accent-l, 100)), calc(0.0095 * var(--skin-accent-a, 100)));
81}
82
83.theme-dark {
84 --skin-name: ";Default";;
85 --skin-author: ";TheCommieAxolotl";;
86
87 --skin-accent-h: 264;
88 --skin-accent-s: 84%;
89 --skin-accent-l: 100;
90 --skin-accent-a: 100;
91
92 --skin-background-h: 0;
93 --skin-background-s: 0%;
94 --skin-background-l: 100;
95 --skin-background-a: 100;
96
97 --00dp: hsla(var(--skin-background-h, 0), calc(var(--saturation-factor, 1) * var(--skin-background-s, 0%)), calc(0.07% * var(--skin-background-l, 0)), calc(1% * var(--skin-background-a, 100)));
98 --01dp: hsla(var(--skin-background-h, 0), calc(var(--saturation-factor, 1) * var(--skin-background-s, 0%)), calc(0.11% * var(--skin-background-l, 0)), calc(1% * var(--skin-background-a, 100)));
99 --02dp: hsla(var(--skin-background-h, 0), calc(var(--saturation-factor, 1) * var(--skin-background-s, 0%)), calc(0.13% * var(--skin-background-l, 0)), calc(1% * var(--skin-background-a, 100)));
100 --03dp: hsla(var(--skin-background-h, 0), calc(var(--saturation-factor, 1) * var(--skin-background-s, 0%)), calc(0.14% * var(--skin-background-l, 0)), calc(1% * var(--skin-background-a, 100)));
101 --04dp: hsla(var(--skin-background-h, 0), calc(var(--saturation-factor, 1) * var(--skin-background-s, 0%)), calc(0.15% * var(--skin-background-l, 0)), calc(1% * var(--skin-background-a, 100)));
102 --06dp: hsla(var(--skin-background-h, 0), calc(var(--saturation-factor, 1) * var(--skin-background-s, 0%)), calc(0.17% * var(--skin-background-l, 0)), calc(1% * var(--skin-background-a, 100)));
103 --08dp: hsla(var(--skin-background-h, 0), calc(var(--saturation-factor, 1) * var(--skin-background-s, 0%)), calc(0.18% * var(--skin-background-l, 0)), calc(1% * var(--skin-background-a, 100)));
104 --12dp: hsla(var(--skin-background-h, 0), calc(var(--saturation-factor, 1) * var(--skin-background-s, 0%)), calc(0.19% * var(--skin-background-l, 0)), calc(1% * var(--skin-background-a, 100)));
105 --16dp: hsla(var(--skin-background-h, 0), calc(var(--saturation-factor, 1) * var(--skin-background-s, 0%)), calc(0.2% * var(--skin-background-l, 0)), calc(1% * var(--skin-background-a, 100)));
106 --24dp: hsla(var(--skin-background-h, 0), calc(var(--saturation-factor, 1) * var(--skin-background-s, 0%)), calc(0.22% * var(--skin-background-l, 0)), calc(1% * var(--skin-background-a, 100)));
107 --26dp: hsla(var(--skin-background-h, 0), calc(var(--saturation-factor, 1) * var(--skin-background-s, 0%)), calc(0.27% * var(--skin-background-l, 0)), calc(1% * var(--skin-background-a, 100)));
108
109 --background-primary: var(--02dp); /* 02dp */
110 --background-secondary: var(--01dp); /* 01dp */
111 --background-mobile-secondary: var(--01dp); /* 01dp */
112 --background-accent: var(--12dp); /* 12dp */
113 --background-tertiary: var(--00dp); /* 00dp */
114 --background-secondary-alt: var(--06dp); /* 06dp */
115 --channeltextarea-background: var(--24dp); /* 24dp */
116 --background-floating: var(--24dp); /* 24dp */
117 --background-modifier-selected: var(--06dp); /* 06dp */
118 --background-modifier-hover: var(--02dp); /* 02dp */
119 --background-modifier-active: var(--04dp); /* 04dp */
120 --background-mentioned: transparent;
121 --modal-background: var(--24dp); /* 24dp */
122 --background-mentioned-hover: #e7c21f04;
123 --info-warning-foreground: hsl(54, calc(var(--saturation-factor, 1) * var(--skin-accent-s, 84%)), 75%);
124 --scrollbar-thin-thumb: var(--12dp); /* 12dp */
125 --scrollbar-thin-track: transparent;
126 --scrollbar-auto-thumb: var(--12dp); /* 12dp */
127 --scrollbar-auto-track: var(--04dp); /* 04dp */
128 --input-background: var(--08dp); /* 08dp */
129 --switch-checked-background: hsl(101, calc(var(--saturation-factor) * 54%), 27%);
130 --switch-unchecked-background: #74796e33;
131 --switch-unchecked-color: #74796e;
132}
133
134.theme-light {
135 --skin-name: ";Default Light";;
136 --skin-author: ";TheCommieAxolotl";;
137
138 --skin-accent-h: 264;
139 --skin-accent-s: 84%;
140 --skin-accent-l: 100;
141 --skin-accent-a: 100;
142
143 --switch-checked-background: hsl(101, calc(var(--saturation-factor) * 54%), 27%);
144 --switch-unchecked-background: #74796e33;
145 --switch-unchecked-color: #74796e;
146}
147
148/* Made By The Commie Axolotl */
149

Full theme source (MaterialDesign.theme.css). Copy or download from GitHub.

Download theme

FiveCord for Windows

Free. One click. Windows.

Download