MaterialDiscord
A theme based on Google's Material Design
215
Live preview
Full Discord interface with this theme applied — powered by ThemePreview.
Screenshot
1
/**2
* @name Material Discord3
* @version 3.0.74
* @description A theme based on Google's Material Design5
* @author CapnKitten6
*7
* @website http://github.com/CapnKitten8
* @source https://github.com/CapnKitten/BetterDiscord/blob/master/Themes/Material-Discord/css/source.css9
* @donate https://paypal.me/capnkitten10
* @invite jzJkA6Z11
*/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
}24
25
/* MATERIAL YOU LIGHT THEME SETTINGS */26
.theme-light {27
--saturation-modifier: 0.74;28
--lightness-modifier: 2.125;29
--text-lightness-modifier: 1.0;30
}31
32
:root {33
/* APP FONT SETTINGS */34
--app-font: ";Google Sans Flex";;35
--app-font-width: 100;36
--app-font-roundness: 100;37
38
/* ACCENT HSL AND TEXT COLOR SETTINGS */39
--accent-hue: 227;40
--accent-saturation: 71%;41
--accent-lightness: 61%;42
--accent-text-color: hsl(0,0%,100%); /* DOES NOTHING WITH MATERIAL YOU ENABLED */43
--accent-button-action: hsl(0,0%,100%);44
45
/* ALERT HSL AND TEXT COLOR SETTINGS */46
--alert-hue: 0;47
--alert-saturation: 85%;48
--alert-lightness: 61%;49
--alert-text-color: hsl(0,0%,100%); /* DOES NOTHING WITH MATERIAL YOU ENABLED */50
51
/* WARNING HSL AND TEXT COLOR SETTINGS */52
--warning-hue: 40;53
--warning-saturation: 86.4%;54
--warning-lightness: 56.9%;55
--warning-text-color: hsl(0,0%,100%); /* DOES NOTHING WITH MATERIAL YOU ENABLED */56
57
/* MESSAGE SETTINGS */58
--message-radius: 18px;59
--message-padding-top: 8px;60
--message-padding-side: 12px;61
62
/* MESSAGE MEDIA SETTINGS */63
--media-radius: 10px;64
65
/* CARD SETTINGS */66
--card-radius: 8px;67
--card-radius-big: 18px;68
69
/* BUTTON SETTINGS */70
--button-height: 40px;71
--button-padding: 16px;72
--button-action-color: hsl(0,0%,100%);73
74
/* INPUT SETTINGS */75
--input-height: 40px;76
--input-padding: 12px;77
78
/* POPOUT AND MODAL SETTINGS */79
--popout-radius: 8px;80
--popout-radius-big: 18px;81
82
/* TOOLTIP SETTINGS */83
--tooltip-color: hsl(0,0%,38%,0.9);84
--tooltip-text-color: hsl(0,0%,87%);85
--tooltip-font-size: 12px;86
--tooltip-padding: 8px;87
--tooltip-radius: 8px;88
89
/* SCROLLBAR SETTINGS */90
--scrollbar-width: 10px;91
--scrollbar-thin-width: 6px;92
}93