melanie/GoComics Dark Mode

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