melanie/GoComics Dark Mode

gocomics-dark-mode.css · 1.5 KiB · CSS Raw

@media (prefers-color-scheme: dark) {
	:root,
	* {
		--color-alert-error-100: #3a1d18;
		--color-alert-error-200: #5c251d;
		--color-alert-error-300: #e27055;
		--color-alert-info-100: #10243e;
		--color-alert-info-200: #183863;
		--color-alert-info-300: #5c93f0;
		--color-alert-success-100: #132e16;
		--color-alert-success-200: #1f4d25;
		--color-alert-success-300: #82c986;
		--color-alert-warning-100: #36280c;
		--color-alert-warning-200: #594215;
		--color-alert-warning-300: #ebb15b;
		--color-black: #fff;
		--color-white: #000;
		--color-blue-100: #000;
		--color-blue-200: #133a9a;
		--color-blue-300: #a1baf9;
		--color-blue-400: #e0e9ff;
		--color-blue-500: #e7eff9;
		--color-blue-600: #edf0f3;
		--color-gocomics-blue: #4a78e8;
		--color-gray-100: #242424;
		--color-gray-200: #313131;
		--color-gray-300: #585858;
		--color-gray-400: #777;
		--color-gray-500: #888;
		--color-gray-600: #bbb;
		--color-gray-700: #000;
		--color-gray-800: #eee;
		--color-green: #6bc492;
		--color-light-beige: #5c5043;
		--color-light-blue: #a3d1f0;
		--color-pink: #f2d8db;
		--color-purple: #7d7ab0;
		--color-red: #e06c6f;
		--color-yellow: #f9d36e;
		--color-text-dark: var(--color-gray-800);
		--color-text-light: #fff;
		--hr-color: #133a9a;
	}

[class^="MyComicsDatePicker"]::before,
	[class^="MyComicsDatePicker"]::after {
		--color-white: #000;
	}

svg[fill="var(--color-white)"] {
		--color-white: #fff;
	}

body {
		background-color: #000;
		color: #fff;
	}

[class^="DesktopMyAccountNav"] {
		--color-gray-700: #fff;
	}

[class^="Typography"] {
		color: #fff;
	}
}

1	@media (prefers-color-scheme: dark) {
2	:root,
3	* {
4	--color-alert-error-100: #3a1d18;
5	--color-alert-error-200: #5c251d;
6	--color-alert-error-300: #e27055;
7	--color-alert-info-100: #10243e;
8	--color-alert-info-200: #183863;
9	--color-alert-info-300: #5c93f0;
10	--color-alert-success-100: #132e16;
11	--color-alert-success-200: #1f4d25;
12	--color-alert-success-300: #82c986;
13	--color-alert-warning-100: #36280c;
14	--color-alert-warning-200: #594215;
15	--color-alert-warning-300: #ebb15b;
16	--color-black: #fff;
17	--color-white: #000;
18	--color-blue-100: #000;
19	--color-blue-200: #133a9a;
20	--color-blue-300: #a1baf9;
21	--color-blue-400: #e0e9ff;
22	--color-blue-500: #e7eff9;
23	--color-blue-600: #edf0f3;
24	--color-gocomics-blue: #4a78e8;
25	--color-gray-100: #242424;
26	--color-gray-200: #313131;
27	--color-gray-300: #585858;
28	--color-gray-400: #777;
29	--color-gray-500: #888;
30	--color-gray-600: #bbb;
31	--color-gray-700: #000;
32	--color-gray-800: #eee;
33	--color-green: #6bc492;
34	--color-light-beige: #5c5043;
35	--color-light-blue: #a3d1f0;
36	--color-pink: #f2d8db;
37	--color-purple: #7d7ab0;
38	--color-red: #e06c6f;
39	--color-yellow: #f9d36e;
40	--color-text-dark: var(--color-gray-800);
41	--color-text-light: #fff;
42	--hr-color: #133a9a;
43	}
44
45	[class^="MyComicsDatePicker"]::before,
46	[class^="MyComicsDatePicker"]::after {
47	--color-white: #000;
48	}
49
50	svg[fill="var(--color-white)"] {
51	--color-white: #fff;
52	}
53
54	body {
55	background-color: #000;
56	color: #fff;
57	}
58
59	[class^="DesktopMyAccountNav"] {
60	--color-gray-700: #fff;
61	}
62
63	[class^="Typography"] {
64	color: #fff;
65	}
66	}
67