Login
melanie

melanie / GoComics Dark Mode

Last active 5 hours ago

Like 0

melanie revised this gist 5 hours ago · ed2dc26

1 file changed, 69 insertions, 59 deletions

gocomics-dark-mode.css
@@ -1,66 +1,76 @@
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 - }
1 + /* ==UserStyle==
2 + @name GoComics Dark Mode
3 + @namespace userstyles.club/style/did:plc:ygq3j4yme7aivue6mcuxhwvg/3mz5jvhgj6v2u
4 + @version 1
5 + @description Read Nancy in bed without waking your partner
6 + @author melanie kat
7 + ==/UserStyle== */
44 8
45 - [class^="MyComicsDatePicker"]::before,
46 - [class^="MyComicsDatePicker"]::after {
47 - --color-white: #000;
48 - }
9 + @-moz-document domain("gocomics.com") {
10 + @media (prefers-color-scheme: dark) {
11 + :root,
12 + * {
13 + --color-alert-error-100: #3a1d18;
14 + --color-alert-error-200: #5c251d;
15 + --color-alert-error-300: #e27055;
16 + --color-alert-info-100: #10243e;
17 + --color-alert-info-200: #183863;
18 + --color-alert-info-300: #5c93f0;
19 + --color-alert-success-100: #132e16;
20 + --color-alert-success-200: #1f4d25;
21 + --color-alert-success-300: #82c986;
22 + --color-alert-warning-100: #36280c;
23 + --color-alert-warning-200: #594215;
24 + --color-alert-warning-300: #ebb15b;
25 + --color-black: #fff;
26 + --color-white: #000;
27 + --color-blue-100: #000;
28 + --color-blue-200: #133a9a;
29 + --color-blue-300: #a1baf9;
30 + --color-blue-400: #e0e9ff;
31 + --color-blue-500: #e7eff9;
32 + --color-blue-600: #edf0f3;
33 + --color-gocomics-blue: #4a78e8;
34 + --color-gray-100: #242424;
35 + --color-gray-200: #313131;
36 + --color-gray-300: #585858;
37 + --color-gray-400: #777;
38 + --color-gray-500: #888;
39 + --color-gray-600: #bbb;
40 + --color-gray-700: #000;
41 + --color-gray-800: #eee;
42 + --color-green: #6bc492;
43 + --color-light-beige: #5c5043;
44 + --color-light-blue: #a3d1f0;
45 + --color-pink: #f2d8db;
46 + --color-purple: #7d7ab0;
47 + --color-red: #e06c6f;
48 + --color-yellow: #f9d36e;
49 + --color-text-dark: var(--color-gray-800);
50 + --color-text-light: #fff;
51 + --hr-color: #133a9a;
52 + }
49 53
50 - svg[fill="var(--color-white)"] {
51 - --color-white: #fff;
52 - }
54 + [class^="MyComicsDatePicker"]::before,
55 + [class^="MyComicsDatePicker"]::after {
56 + --color-white: #000;
57 + }
53 58
54 - body {
55 - background-color: #000;
56 - color: #fff;
57 - }
59 + svg[fill="var(--color-white)"] {
60 + --color-white: #fff;
61 + }
58 62
59 - [class^="DesktopMyAccountNav"] {
60 - --color-gray-700: #fff;
61 - }
63 + body {
64 + background-color: #000;
65 + color: #fff;
66 + }
67 +
68 + [class^="DesktopMyAccountNav"] {
69 + --color-gray-700: #fff;
70 + }
62 71
63 - [class^="Typography"] {
64 - color: #fff;
72 + [class^="Typography"] {
73 + color: #fff;
74 + }
65 75 }
66 76 }

melanie revised this gist 5 hours ago · b027ccc

1 file changed, 64 insertions, 63 deletions

gocomics-dark-mode.css
@@ -1,65 +1,66 @@
1 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 - }
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 + }
65 66 }

melanie revised this gist 11 hours ago · e07a433

1 file changed, 65 insertions

gocomics-dark-mode.css (file created)
@@ -0,0 +1,65 @@
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 + }