Skip to content

Instantly share code, notes, and snippets.

@1player
Created February 5, 2020 14:51
Show Gist options
  • Save 1player/af5f02ccbe7c930f793fc104c99975df to your computer and use it in GitHub Desktop.
Save 1player/af5f02ccbe7c930f793fc104c99975df to your computer and use it in GitHub Desktop.
Auto dark mode HN - Cascadea
/* Hey there! Thanks for buying Cascadea.
Since it looks like this is your first custom style,
here's a few tips to get you started.
First, you need to write some CSS code for the site
you'd like to customize. That's what this handy
editor is for! I recommend using Safari's Web
Inspector to check out the layout and stylesheet
of the website you'd like to modify, so you can
figure out what you need to customize.
The "Rule Editor" up top lets you specify what
websites your style should apply to. You can
specify a specific domain name, a specific URL,
all URLs starting with a specific prefix, or even
all URLs matching a regular expression.
But what if you need to apply a different block
of CSS code to different pages, all within a single
"style"? That's where "sections" come in. Each
"section" of your style has its own block of CSS,
as well as its own set of rules. You can add or
remove sections and switch between them in the
toolbar up top.
Once you're all done, you can export your style to a
CSS file from the Share button up top. Then, you can
send that file to any other Cascadea user (or even
users of similar extensions for other browsers), and
they can use it, too.
Have fun, and make something beautiful! */
:root {
--background: #222;
--body-background: #333;
--text: 210,210,210;
--subtext: #888;
--link: #ddd;
--visited-link: #999;
}
body, textarea {
background: var(--background);
color: rgb(var(--text));
}
#hnmain {
background: var(--body-background);
}
.subtext, .subtext a:visited {
color: var(--subtext) !important;
}
.comhead, .comhead a:link, .comhead a:visited {
color: var(--subtext);
}
a:link, a.storylink:link {
color: var(--link);
}
a:visited, a.storylink:visited {
color: var(--visited-link);
}
.pagetop a {
color: black;
}
.votearrow {
filter: brightness(60%);
}
.c00, .c00 a:link { color: rgba(var(--text),1); }
.c5a, .c5a a:link, .c5a a:visited { color: rgba(var(--text),0.9); }
.c73, .c73 a:link, .c73 a:visited { color: rgba(var(--text),0.8); }
.c82, .c82 a:link, .c82 a:visited { color: rgba(var(--text),0.7); }
.c88, .c88 a:link, .c88 a:visited { color: rgba(var(--text),0.6); }
.c9c, .c9c a:link, .c9c a:visited { color: rgba(var(--text),0.5); }
.cae, .cae a:link, .cae a:visited { color: rgba(var(--text),0.4); }
.cbe, .cbe a:link, .cbe a:visited { color: rgba(var(--text),0.3); }
.cce, .cce a:link, .cce a:visited { color: rgba(var(--text),0.2); }
.cdd, .cdd a:link, .cdd a:visited { color: rgba(var(--text),0.1); }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment