a dark color swap of hacker news, without any layout changes. also supports documentation pages, login, and algolia search.
catppuccin + hacker news by o_o
Details
Authoro_o
LicenseMIT
Categorynews.ycombinator
Created
Updated
Size8.2 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
browser requirements
this userstyle notably uses :has() and nested selectors.
- Chrome 120
- Edge 120
- Firefox 121
- Opera 106
- Safari 17.2
features
- swaps the colors of hacker news for catppuccin mocha
- attempts to NOT change the layout or attempt to modernize hacker news in any way. besides using catppuccin, it should look 1:1.
- inputs are changed to their dark color scheme
- everything is styled using the variables declared at the top of the userstyle
- supports:
- homepage
- login
- documentation (like the FAQ and guidelines)
- Hacker News Algolia search
- comments becoming fading as they're downvoted
bugs
- extra tabs in the nav bar (like favorites) are bolded instead of being set to white due to extremely poor contrast. it would be nice if they more closely matched hacker news instead of being bolded.
- comments fading out is done with opacity instead of color, so text selection is also faded.
Source code
/* ==UserStyle==
@name catppuccin + hacker news
@namespace github.com/openstyles/stylus
@version 1.1.0
@description a personal color swap of hacker news, with support for algolia search
@author Me
==/UserStyle== */
@-moz-document domain("news.ycombinator.com"), domain("hn.algolia.com") {
:root {
--surface-lowest: #181825;
--surface: #1e1e2e;
--surface-container: #313244;
--on-surface: #cdd6f4;
--on-surface-var: #cdd6f4;
--on-surface-var-high: #9399b2;
--outline: #9399b2;
--outline-variant: #7f849c;
--primary: #fab387;
--on-primary: #1e1e2e;
--warning: #f9e2af;
--on-warning: #1e1e2e;
--link: #74c7ec;
--link-visited: #cba6f7;
--link-active: #f38ba8;
--highlight: #f9e2af;
--on-highlight: #1e1e2e;
--green: #a6e3a1;
--blue: #89b4fa;
--dabric-hn-target-background: var(--surface-container);
/*--surface-lowest: #140c09;
--surface: #1a110e;
--surface-container: #271e1a;
--on-surface: #f1dfd8;
--on-surface-var: #d8c2ba;
--on-surface-var-high: #a08d85;
--outline: #a08d85;
--outline-variant: #53443d;
--primary: #ffb596;
--on-primary: #542106;
--link: #bfc2ff;
--link-visited: #dbb9f9;
--link-active: #ffb4a8;
--highlight: #dec56e;
--on-highlight: #3b2f00;*/
}
}
@-moz-document domain("news.ycombinator.com") {
:root:has(head > link[rel=stylesheet][href*="news"]) {
body {
background: var(--surface-lowest);
color: var(--on-surface);
}
body > center > table {
background: var(--surface);
/* header */
> tbody > tr:first-child > td {
background: var(--primary);
.pagetop {
&, & a {
color: var(--on-primary);
}
font[color="#FFFFFF"] {
color: var(--on-primary);
font-weight: bold;
}
}
}
}
[bgcolor="#ff6600"] {
background: var(--primary);
}
td[bgcolor="#ffffaa"] {
background: var(--warning);
&, & td {
color: var(--on-warning);
}
}
a:link {
color: var(--on-surface);
}
a:visited {
color: var(--on-surface-var-high);
}
.comhead, .comhead a:link, .subtext a:link, .subtext a:visited, td, .subtext, .title {
color: var(--on-surface-var-high);
}
.commtext, .commtext a:link, .commtext a:visited {
color: var(--on-surface);
}
.c5a { opacity: 0.3529411765 }
.c73 { opacity: 0.4509803922 }
.c82 { opacity: 0.5098039216 }
.c88 { opacity: 0.5333333333 }
.c9c { opacity: 0.6117647059 }
.cae { opacity: 0.6823529412 }
.cbe { opacity: 0.7450980392 }
.cce { opacity: 0.8078431373 }
.cdd { opacity: 0.8666666667 }
.ca2 { color:#a30000; }
* {
color-scheme: dark;
}
.votearrow {
background: var(--on-surface-var-high);
mask-image: url("triangle.svg");
mask-size: cover;
}
font[color="#3c963c"] {
color: var(--green);
}
font[color="#AFAFAF"] {
color: var(--on-surface-var-high);
}
}
:root:has(head > link[rel=stylesheet][href*="yc.css"]) {
body {
background: var(--surface-lowest);
color: var(--on-surface);
}
a:link { color:var(--on-surface); }
a:visited { color:var(--on-surface-var); }
a[style*="color: #777"] {
color: var(--on-surface-var-high) !important;
}
b { color:var(--on-surface-var); }
td[bgcolor="#fafaf0"] {
background: var(--surface)
}
[bgcolor="#ff6600"] {
background: var(--primary);
}
img[src="yc500.gif"] {
filter: invert(1) hue-rotate(180deg);
}
}
:root:not(:has(head > link[rel=stylesheet][href*=news])):not(:has(head > link[rel=stylesheet][href*="yc.css"])) {
body {
background: var(--surface);
color: var(--on-surface);
}
* {
color-scheme: dark;
}
:link {
color: var(--link);
}
:visited {
color: var(--link-visited);
}
:any-link:active {
color: var(--link-active);
}
}
}
@-moz-document domain("hn.algolia.com") {
#root > div:not(.experimental) {
.SearchHeader_search {
background: var(--primary);
color: var(--on-primary);
}
.SearchHeader {
.SearchIcon {
color: var(--primary);
}
.SearchInput {
background: var(--surface);
color: var(--on-surface);
}
.PoweredBy {
color: var(--on-surface-var);
img {
mask-image: url("/public/38a9c67b12016b52267071c530ff2e78.svg");
mask-size: cover;
background: var(--on-surface-var);
object-position: 1000px 1000px;
}
}
}
.SearchHeader_label {
color: var(--on-primary);
}
html, body {
color: var(--on-surface);
background: var(--surface-lowest);
}
.SearchFilters, .SearchResults, .Pagination {
background: var(--surface);
color: var(--on-surface);
}
.Dropdown_label {
color: var(--on-surface-var);
border-color: var(--outline);
}
.Dropdown_list, .Dropdown_list li button {
background: var(--surface-container);
color: var(--on-surface);
}
.Dropdown_list li:not(:last-child), .Dropdown_list {
border-color: var(--outline);
}
.Pagination_item button {
color: var(--on-surface-var);
border-color: var(--outline);
}
.Pagination_item-current button {
color: var(--primary);
border-color: var(--primary);
}
.Footer_list li, .Footer_list a {
color: var(--on-surface);
}
.Story {
em {
background: var(--highlight) !important;
color: var(--on-highlight) !important;
}
.Story_title a, .Story_comment {
color: var(--on-surface);
}
.Story_title .Story_link {
color: var(--on-surface-var-high)
}
.Story_meta a, .Story_separator {
color: var(--on-surface-var-high)
}
}
section.Settings {
background: var(--surface);
label {
color: var(--on-surface-var);
}
h2 {
color: var(--on-surface-var);
border-color: var(--outline-variant);
}
button {
background: var(--primary);
color: var(--on-primary);
}
}
section.Layout {
background: var(--surface);
color: var(--on-surface);
p {
color: var(--on-surface-var);
}
h3 {
color: var(--on-surface);
}
a {
color: var(--link);
}
code {
background: var(--surface-container);
color: var(--primary);
}
.Layout_label {
background: var(--primary);
color: var(--on-primary);
}
.Layout_panel {
border-color: var(--outline);
}
th {
border-color: var(--outline)
}
td {
border-color: var(--outline-variant);
}
pre {
background: unset;
border-color: var(--outline-variant);
.type-string {
color: var(--green);
}
.type-number {
color: var(--blue);
}
.type-null {
color: var(--on-surface-var-high);
}
}
}
}
}