A high-contrast dark mode theme for Neocities. Based on the original NeoDark theme!!
Note: This CSS does not apply to any subdomains, just all pages on neocities.org.
/* ==UserStyle==
@name NeoContrast
@namespace github.com/openstyles/stylus
@version 1.0.0
@description High cntrast dark theme for neocities. Credit: thewikion.neocities.org/wiki/dark_theme_for_neocities
@author dog w/ computer
==/UserStyle== */
@-moz-document url-prefix('https://neocities.org') {
/* Dropdown menu */
.header-Nav .dropdown-menu { background: #121212; }
.header-Nav .dropdown-menu .divider { border-bottom: 1px solid #555555; }
/* Main layouts */
body .content.misc-page.columns.right-col,
body .col-left {
background: #121212;
border: none;
}
body .page,
body .col.col-66,
body .content.misc-page.columns .col-66,
body .misc-page.columns.footer-Content .col-66 {
background: #121212;
color: #FFFFFF;
}
body .col.col-33 { background: #121212; }
/* Navigation */
body .header-Nav.clearfix,
body .header-Base {
background: #000000;
border-bottom: 3px solid #333333;
}
.header-Nav a:hover { background: #333333; }
/* Header and footer backgrounds */
body .header-Outro.with-columns,
body .row.conten,
body .footer-Outro,
body .header-Outro {
background: #000000;
border: none;
}
.interior .header-Outro.with-columns .col-66 { border: none; }
/* News feed container */
.container.news-feed { box-shadow: none; }
/* Site action typography */
body .title .text { color: #FFFFFF; }
body .title .text a { color: #8AB4F8; }
body h3 a,
body .page p a { color: #8AB4F8; }
/* Site previews */
body .files,
body .news-item .files { background: #1E1E1E; }
/* Site avatars */
.news-item.update .icon { background: #4285F4; }
.news-item.follow .icon { background: #185ABC; }
.news-item.comment .icon { background: #8AB4F8; }
/* Post message input */
body .post-comment {
background: #1E1E1E;
border: 1px solid #555555;
border-radius: 2px;
}
body .post-comment input {
background: #121212;
color: #FFFFFF;
border-radius: 2px;
border: 1px solid #555555;
}
/* Rounded buttons */
body .btn-Action.edit,
body .btn-Action {
background: #4285F4;
background: -webkit-linear-gradient(top, #4285F4, #4285F4);
color: #FFFFFF;
}
/* Follower lists */
.following-list,
.follower-list { filter: grayscale(100%); }
.following-list:hover,
.follower-list:hover { filter: grayscale(0); }
/* Tags */
a.tag,
a.tag:visited {
background: #333333 !important;
color: #FFFFFF !important;
border: 1px solid #777777;
border-radius: 2px;
}
body .clear a { color: #E8EAED; }
/* Logo */
.logo.int-Logo img { filter: hue-rotate(200deg) brightness(1.5); }
/* News items and comments */
.news-item { border: none; color: #FFFFFF; }
body .news-item .user,
body .news-item .you,
body .news-item .comment,
body .news-item.for-me .title > .comment {
color: #FFFFFF !important;
}
body .news-item.comment .content,
body .news-item.update .content,
body .news-item.tip .content,
body .news-item.follow .content {
color: #FFFFFF;
}
body .news-item.comment .content a,
body .news-item.update .content a,
body .news-item.tip .content a,
body .news-item.follow .content a {
color: #8AB4F8;
}
body .news-item.comment .content .comments .comment,
body .news-item.update .content .comments .comment,
body .news-item.tip .content .comments .comment,
body .news-item.follow .content .comments .comment {
color: #F1F3F4;
}
body .news-item.comment .actions,
body .news-item.update .actions,
body .news-item.tip .actions,
body .news-item.follow .actions,
body a#reply,
body a#like,
body .news-item.update .content a {
color: #A8C7FA;
}
/* Pagination */
body .pagination a { color: #8AB4F8; }
/* Websites gallery */
body .row.website-Gallery.content.int-Gall li {
background: #121212;
border: 9px solid #121212;
}
body .row.website-Gallery.content.int-Gall li .title a,
body .fa-heart { color: #8AB4F8; }
/* More pagination */
body .content.single-Col.misc-page {
background: #121212;
color: #FFFFFF;
}
body .content.single-Col.misc-page .files { background: #121212; }
body .content.single-Col.misc-page a { color: #8AB4F8; }
/* Tutorials */
body .section.plans.welcome,
body .section,
body .plan-chart td,
body .col.supporter,
body .col.free {
background: #121212;
color: #FFFFFF;
border: solid 1px #555555;
}
/* Supporter page elements */
body .col.supporter h3,
body .col.free h3,
body .row.content.txt-Center a { color: #8AB4F8; }
body .col.supporter .row.content .col.col-66 { background: #121212; }
.face.front.invalid { filter: invert(1) contrast(1.2); }
/* General site elements */
body .stats,
body .stats strong,
body .stats .col {
color: #A8C7FA;
}
body .stats a { color: #8AB4F8; }
body .header-Outro .signup-Form,
body fieldset.content { background: #000000; }
body main.content-Base { background: #000000; }
body .files.list-view .list .file:nth-child(even) { background: #121212; }
body .files .header { background: #000000; }
body .overlay a { color: #8AB4F8; }
body .row.content.wide .col.col-50 a { color: #8AB4F8; }
/* Comic elements */
body .comic .dialogue {
color: #000000 !important;
background: rgba(255, 255, 255, 0.95);
border: 2px solid #000000;
border-radius: 8px;
z-index: 6;
}
/* Additional layout elements */
body .welcome {
background-color: #121212;
border: 1px solid #555555;
border-radius: 6px;
}
code, pre {
border-color: #A8C7FA;
color: #FFFFFF;
}
body .header-Nav a.small-Nav { background: rgba(0, 0, 0, 0); }
body .press-news h3 a { color: #FFFFFF; }
body .press-news blockquote { color: #E8EAED; }
.brand-asset {
background: #000000;
border: 1px solid #555555;
border-radius: 4px;
}
/* Accordion */
.accordion-group { border: none; }
.accordion-group a {
text-decoration: none !important;
color: #8AB4F8;
}
}