-
Notifications
You must be signed in to change notification settings - Fork 2
/
MaterialYouColors.theme.css
95 lines (82 loc) · 8.39 KB
/
MaterialYouColors.theme.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
/**
* @name Material You Colors
* @author JustAlittleWolf#7032
* @version 1.1.0
* @description A Material You color implementation for Discord
* @source https://github.com/JustAlittleWolf/Material-You-Discord-Theme
*/
/* Variables */
:root {
/*
* Select which hue of color you want Discord to be themed in.
* You can select a hue by going to https://htmlcolorcodes.com/color-picker/,
* selecting a color, then copying the "H" value and pasting it in below.
* range: 0.0-360.0
*/
--myc-background-hue: 0;
/* suggested range: 0.5-10.0 */
--myc-background-saturation: 1.0;
/* suggested range: 0.8-2.5 */
--myc-background-lightness: 1.0;
/* suggested range: 0.5-2.0 */
--myc-link-lightness: 1.5;
/* suggested range: 0.7-1.2 */
--myc-ui-lightness: 1.0;
}
:root,
.default-colors,
.profileColors-3Y0XaR {
/* changes all of the main colors of the discord client */
--primary-100-hsl: var(--myc-background-hue) min(calc(var(--saturation-factor, 1) * 5.9% * var(--myc-background-saturation)), 100%) min(calc(96.7% * var(--myc-background-lightness)), 100%) !important;
--primary-130-hsl: var(--myc-background-hue) min(calc(var(--saturation-factor, 1) * 9.1% * var(--myc-background-saturation)), 100%) min(calc(95.7% * var(--myc-background-lightness)), 100%) !important;
--primary-160-hsl: var(--myc-background-hue) min(calc(var(--saturation-factor, 1) * 9.7% * var(--myc-background-saturation)), 100%) min(calc(93.9% * var(--myc-background-lightness)), 100%) !important;
--primary-200-hsl: var(--myc-background-hue) min(calc(var(--saturation-factor, 1) * 10% * var(--myc-background-saturation)), 100%) min(calc(92.2% * var(--myc-background-lightness)), 100%) !important;
--primary-230-hsl: var(--myc-background-hue) min(calc(var(--saturation-factor, 1) * 8.8% * var(--myc-background-saturation)), 100%) min(calc(88.8% * var(--myc-background-lightness)), 100%) !important;
--primary-260-hsl: var(--myc-background-hue) min(calc(var(--saturation-factor, 1) * 7.7% * var(--myc-background-saturation)), 100%) min(calc(84.7% * var(--myc-background-lightness)), 100%) !important;
--primary-300-hsl: var(--myc-background-hue) min(calc(var(--saturation-factor, 1) * 6.7% * var(--myc-background-saturation)), 100%) min(calc(79.4% * var(--myc-background-lightness)), 100%) !important;
--primary-330-hsl: var(--myc-background-hue) min(calc(var(--saturation-factor, 1) * 5.2% * var(--myc-background-saturation)), 100%) min(calc(73.5% * var(--myc-background-lightness)), 100%) !important;
--primary-345-hsl: var(--myc-background-hue) min(calc(var(--saturation-factor, 1) * 6% * var(--myc-background-saturation)), 100%) min(calc(67.5% * var(--myc-background-lightness)), 100%) !important;
--primary-360-hsl: var(--myc-background-hue) min(calc(var(--saturation-factor, 1) * 5.1% * var(--myc-background-saturation)), 100%) min(calc(61.6% * var(--myc-background-lightness)), 100%) !important;
--primary-400-hsl: var(--myc-background-hue) min(calc(var(--saturation-factor, 1) * 5.5% * var(--myc-background-saturation)), 100%) min(calc(53.5% * var(--myc-background-lightness)), 100%) !important;
--primary-430-hsl: var(--myc-background-hue) min(calc(var(--saturation-factor, 1) * 4.8% * var(--myc-background-saturation)), 100%) min(calc(44.9% * var(--myc-background-lightness)), 100%) !important;
--primary-460-hsl: var(--myc-background-hue) min(calc(var(--saturation-factor, 1) * 5.2% * var(--myc-background-saturation)), 100%) min(calc(38% * var(--myc-background-lightness)), 100%) !important;
--primary-500-hsl: var(--myc-background-hue) min(calc(var(--saturation-factor, 1) * 6% * var(--myc-background-saturation)), 100%) min(calc(32.5% * var(--myc-background-lightness)), 100%) !important;
--primary-530-hsl: var(--myc-background-hue) min(calc(var(--saturation-factor, 1) * 6.5% * var(--myc-background-saturation)), 100%) min(calc(27.3% * var(--myc-background-lightness)), 100%) !important;
--primary-560-hsl: var(--myc-background-hue) min(calc(var(--saturation-factor, 1) * 6.7% * var(--myc-background-saturation)), 100%) min(calc(23.5% * var(--myc-background-lightness)), 100%) !important;
--primary-600-hsl: var(--myc-background-hue) min(calc(var(--saturation-factor, 1) * 6.7% * var(--myc-background-saturation)), 100%) min(calc(20.6% * var(--myc-background-lightness)), 100%) !important;
--primary-630-hsl: var(--myc-background-hue) min(calc(var(--saturation-factor, 1) * 6.5% * var(--myc-background-saturation)), 100%) min(calc(18% * var(--myc-background-lightness)), 100%) !important;
--primary-645-hsl: var(--myc-background-hue) min(calc(var(--saturation-factor, 1) * 7% * var(--myc-background-saturation)), 100%) min(calc(16.9% * var(--myc-background-lightness)), 100%) !important;
--primary-660-hsl: var(--myc-background-hue) min(calc(var(--saturation-factor, 1) * 6.7% * var(--myc-background-saturation)), 100%) min(calc(14.7% * var(--myc-background-lightness)), 100%) !important;
--primary-700-hsl: var(--myc-background-hue) min(calc(var(--saturation-factor, 1) * 6.3% * var(--myc-background-saturation)), 100%) min(calc(12.5% * var(--myc-background-lightness)), 100%) !important;
--primary-730-hsl: var(--myc-background-hue) min(calc(var(--saturation-factor, 1) * 7.1% * var(--myc-background-saturation)), 100%) min(calc(11% * var(--myc-background-lightness)), 100%) !important;
--primary-760-hsl: var(--myc-background-hue) min(calc(var(--saturation-factor, 1) * 6.4% * var(--myc-background-saturation)), 100%) min(calc(9.2% * var(--myc-background-lightness)), 100%) !important;
--primary-800-hsl: var(--myc-background-hue) min(calc(var(--saturation-factor, 1) * 8.1% * var(--myc-background-saturation)), 100%) min(calc(7.3% * var(--myc-background-lightness)), 100%) !important;
--primary-830-hsl: var(--myc-background-hue) min(calc(var(--saturation-factor, 1) * 4% * var(--myc-background-saturation)), 100%) min(calc(4.9% * var(--myc-background-lightness)), 100%) !important;
--primary-860-hsl: var(--myc-background-hue) min(calc(var(--saturation-factor, 1) * 7.7% * var(--myc-background-saturation)), 100%) min(calc(2.5% * var(--myc-background-lightness)), 100%) !important;
/*
* Changes the color of the discord logo and some buttons
* DELETE THIS if you want to keep the discord-blue logo
*/
--brand-260-hsl: var(--myc-background-hue) calc(var(--saturation-factor, 1) * 86.2%*calc(1 / calc(var(--myc-ui-lightness) + 0.5))) min(calc(88.6% * var(--myc-ui-lightness)), 98.6%) !important;
--brand-360-hsl: var(--myc-background-hue) calc(var(--saturation-factor, 1) * 86.1%*calc(1 / calc(var(--myc-ui-lightness) + 0.5))) min(calc(77.5% * var(--myc-ui-lightness)), 87.5%) !important;
--brand-500-hsl: var(--myc-background-hue) calc(var(--saturation-factor, 1) * 85.6%*calc(1 / calc(var(--myc-ui-lightness) + 0.5))) min(calc(64.7% * var(--myc-ui-lightness)), 74.7%) !important;
--brand-560-hsl: var(--myc-background-hue) calc(var(--saturation-factor, 1) * 51.4%*calc(1 / calc(var(--myc-ui-lightness) + 0.5))) min(calc(52.4% * var(--myc-ui-lightness)), 42.4%) !important;
--brand-600-hsl: var(--myc-background-hue) calc(var(--saturation-factor, 1) * 46.7%*calc(1 / calc(var(--myc-ui-lightness) + 0.5))) min(calc(44.1% * var(--myc-ui-lightness)), 34.1%) !important;
/* changes the color of clickable links */
--blue-330-hsl: var(--myc-background-hue) calc(var(--saturation-factor, 1) * 100% * calc(1 / calc(var(--myc-link-lightness) + 0.5))) min(calc(59% * var(--myc-link-lightness)), 99%) !important;
--blue-345-hsl: var(--myc-background-hue) calc(var(--saturation-factor, 1) * 100% * calc(1 / calc(var(--myc-link-lightness) + 0.5))) min(calc(49.4% * var(--myc-link-lightness)), 89.4%) !important;
--blue-430-hsl: var(--myc-background-hue) calc(var(--saturation-factor, 1) * 100% * calc(1 / calc(var(--myc-link-lightness) + 0.5))) min(calc(45.3% * var(--myc-link-lightness)), 85.3%) !important;
}
.theme-dark .container__03ec9,
.theme-dark .header__71942,
.theme-dark .scrollerContainer_dda72c,
.theme-dark .emptyPage_feb902 {
background-color: var(--background-primary) !important;
}
.theme-dark .container__6b2e5 {
background-color: var(--background-secondary-alt) !important;
}
*::selection {
/* Changes the color when selecting text */
background-color: hsl(var(--myc-background-hue) calc(var(--saturation-factor, 1) * 51.4% * calc(1 / calc(var(--myc-ui-lightness) + 0.5))) min(calc(52.4% * var(--myc-ui-lightness)), 42.4%) / 1) !important;
}