Skip to content

Reddit × OLED Pro Deep Black Dark Theme by greatday

Screenshot of Reddit × OLED Pro Deep Black Dark Theme

Details

Authorgreatday

LicenseMIT

Categoryreddit.com

Created

Updated

Size10 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

This is a pure black dark theme for Reddit. It is optimized for "old" Reddit interface.

Notes

This theme is meant for OLED displays but it should work well for Extreme Dynamic Range (XDR) displays as well.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name           Reddit × OLED Pro Deep Black Dark Theme
@namespace      userstyles.world/user/greatday
@version        0.3
@description    Reddit optimized for OLED screens
@author         GoodDay
@license        MIT
@advanced dropdown sr-top-bar "Subreddits top bar" {
  show "Show" <<<EOT
  EOT;
  hide "Hide" <<<EOT
    .sr-list > .separator,
    .sr-list > .separator + .sr-bar,
    #sr-more-link {
        display: none !important;
    }
    #sr-header-area {
        height: 0 !important;
    }
    .sr-bar,
    .dropdown.srdrop {
        float: right !important;
        margin-left: 1em;
    }
  EOT;
}
==/UserStyle== */
@-moz-document domain("reddit.com") {
    /* Color Variables */
    :root {
        --color-background-dark: #000;
        --color-border: #333;
        --color-text: #e2e2e2;
        --color-link: #6caadf;
        --color-link-visited: #6e7470;
        --color-link-hover: #66b9eb;
        --color-selected-background: #2a2a2a;
        --color-input-background: #222;
        --color-input-border: #555;
        --color-domain-title: #b5bd78;
        --color-tag-subtext: #e8b7b6;
        --color-hover-background: #111;
        --color-listing-selected: #262626;
        --color-comment-background: #282828;
        --color-gray: #777;
        --color-red: #ff4c4c;
    }

    /* Hide subreddits top bar */
    /*[[sr-top-bar]]*/
    /* Hide ads & annoyances */
    #redesign-beta-optin-btn,
    .redesign-beta-optin,
    .give-gold-button,
    .goldvertisement,
    .premium-banner-outer,
    .premium-banner,
    .promotedlink,
    .promoted-tag,
    .embed-comment,
    .nub {
        display: none !important;
    }
    /* Reset */
    * {
        background-color: transparent;
        border-color: var(--color-border);
        color: var(--color-text);
    }
    html,
    body {
        color-scheme: dark;
        background-color: var(--color-background-dark) !important;
    }
    a,
    a * {
        color: var(--color-link) !important;
    }
    a:visited,
    a:visited * {
        color: var(--color-link-visited) !important;
    }
    a:hover,
    a:hover * {
        color: var(--color-link-hover) !important;
    }
    /* Top bar */
    #header * {
        background-color: transparent;
        border: none;
    }
    #newlink-with-image-upload #new-link-preview {
        background-color: transparent;
    }
    #header,
    #sr-more-link {
        background-color: var(--color-background-dark) !important;
        background-blend-mode: soft-light;
        border: none;
    }
    #header-img,
    #mail,
    .sidebox.create .spacer a,
    .users-online:before {
        filter: invert(70%) hue-rotate(180deg) !important;
    }
    .tabmenu a {
        background-color: transparent !important;
        border-color: var(--color-border) !important;
    }
    .tabmenu .selected a {
        background-color: var(--color-selected-background) !important;
        color: var(--color-text) !important;
    }
    /*
    .havemail {
        color: red !important;
        background: red !important;
    }
    */
    /* Side bar */
    .side,
    .side *,
    .listing-chooser,
    .listing-chooser * {
        background-color: transparent !important;
        border-color: var(--color-border) !important;
        color: var(--color-gray);
    }
    .listing-chooser li.selected {
        background-color: var(--color-listing-selected) !important;
        box-shadow: none !important;
    }
    .listing-chooser .grippy:after {
        background-color: transparent !important;
        border: none !important;
    }
    .listing-chooser .grippy:not(:hover):before,
    .listing-chooser-collapsed .listing-chooser .grippy:not(:hover),
    .listing-chooser-collapsed .listing-chooser .contents {
        opacity: 0 !important;
    }
    .tagline {
        color: var(--color-tag-subtext);
    }
    .domain a {
        color: var(--color-domain-title) !important;
    }
    /* Footer */
    .footer,
    .footer * {
        border-color: var(--color-border) !important;
    }
    /* Inputs and buttons */
    input,
    textarea,
    .linkinfo .shortlink input,
    .morelink a,
    .morelink:hover a,
    .nav-buttons a,
    .fancy-toggle-button a,
    .usertext button,
    .image-upload-drop-target {
        background: var(--color-input-background) !important;
        border-color: var(--color-input-border);
        color: var(--color-text) !important;
        font-weight: normal !important;
    }
    button {
        border-width: 1px;
    }
    .drop-choices,
    .hover-bubble,
    .modal-dialog {
        background: var(--color-hover-background) !important;
    }
    .dropdown .selected {
        color: var(--color-text) !important;
    }
    .drop-choices a:hover {
        background: var(--color-input-background) !important;
    }
    .hover-bubble:after {
        filter: invert(1);
    }
    .roundfield,
    .linefield {
        background-color: #181818 !important;
    }
    .formtabs-content {
        border-color: var(--color-selected-background);
    }
    /* Listing */
    .thing .title {
        color: var(--color-text) !important;
    }
    .title:visited {
        color: var(--color-link-visited) !important;
    }
    .thing .title:hover {
        color: var(--color-link-hover) !important;
    }
    .arrow {
        filter: brightness(45%);
    }
    .arrow.upmod,
    .arrow.downmod {
        filter: brightness(50%) contrast(120%);
    }
    .rank,
    .score {
        color: var(--color-gray) !important;
    }
    .link .score.likes {
        color: #ff8052 !important;
    }
    .link .score.dislikes {
        color: #7070c2 !important;
    }
    .expando-button,
    .thumbnail:empty {
        filter: brightness(50%) contrast(250%);
        background-color: transparent !important;
    }
    .friend,
    .friend:visited {
        color: #c83 !important;
    }
    .submitter,
    .submitter:visited {
        color: #3ab !important;
    }
    .moderator,
    .moderator:visited,
    .green {
        color: #3a3 !important;
    }
    .admin,
    .admin:visited,
    .nsfw-stamp * {
        color: var(--color-red) !important;
    }
    .nsfw-stamp {
        border-color: var(--color-red) !important;
    }
    .pagename a,
    .trophy-name {
        color: #999 !important;
    }
    .buttons li {
        padding: 0 !important;
    }
    .buttons a {
        margin-right: 8px !important;
        color: var(--color-text) !important;
    }
    .buttons a:visited {
        color: var(--color-gray) !important;
    }
    .buttons a:hover {
        color: var(--color-link-hover) !important;
    }
    .buttons a.c-btn,
    .expando-gate__controls {
        color: var(--color-text) !important;
    }
    .pagename,
    .tabmenu li,
    .link .midcol,
    .buttons a,
    .subreddit {
        font-weight: normal !important;
    }
    .search-expando.collapsed:before,
    .comment-fade {
        display: none !important;
    }
    .recommended-link,
    .last-clicked,
    .menuarea,
    .searchpane {
        border-color: var(--color-border) !important;
    }
    .searchpane,
    .reddit-infobar {
        background-color: transparent;
    }
    .flair,
    .flairrichtext,
    .linkflairlabel {
        background-color: transparent !important;
        border-color: var(--color-gray);
        color: var(--color-text);
        font-size: x-small;
    }
    .flairrichtext {
        border-style: inset outset outset inset;
        filter: saturate(0.3);
    }
    .flairemoji {
        vertical-align: bottom;
        opacity: 0.7;
    }
    /* Comments */
    .panestack-title,
    .child,
    .author-tooltip {
        border-color: var(--color-border) !important;
    }
    .author-tooltip__head,
    .pinnable-content.pinned,
    .crosspost-preview-content,
    .interstitial-subreddit-description,
    .link .usertext .md,
    .form-bar,
    blockquote,
    pre,
    code {
        background-color: #191919 !important;
        border: none !important;
    }
    .linklisting .link {
        background-color: transparent;
        border-color: var(--color-border);
    }
    .link .usertext .md pre,
    .link .usertext .md code {
        background-color: var(--color-background-dark) !important;
    }
    .gold-accent,
    .title-button.gold {
        background-color: transparent !important;
        border-color: #542 !important;
    }
    .md,
    .usertext.grayed .usertext-body,
    .admin_takedown {
        background-color: transparent !important;
        color: var(--color-text);
        border-color: var(--color-border) !important;
    }
    .md blockquote {
        border-left: solid 4px var(--color-border) !important;
    }
    .md blockquote * {
        color: var(--color-gray);
    }
    .md td,
    .md th {
        border: solid 1px var(--color-border) !important;
    }
    hr {
        background-color: transparent !important;
        border: solid var(--color-border) !important;
        border-width: 0 0 1px 0 !important;
    }
    .comment .author,
    .morecomments a {
        font-weight: normal !important;
    }
    .comment.collapsed a.expand:after {
        color: transparent !important;
    }
    .new-comment .usertext-body,
    .usertext.border .usertext-body,
    .message.new > .entry,
    .crosspost-preview,
    .infobar {
        background-color: var(--color-comment-background) !important;
        border: none;
    }
    /* mod tools */
    .thing.spam {
        background-color: #a1463c;
    }
    .pretty-button.access-required.positive,
    .pretty-button.access-required.negative,
    .pretty-button.access-required.neutral,
    .roun...

Reviews

No reviews yet.