DEV Community

Cover image for [UPDATED] CSS theme for newReddit (night mode need to be activated).
Marco Colonna
Marco Colonna

Posted on • Updated on

[UPDATED] CSS theme for newReddit (night mode need to be activated).

crossposted from my Reddit accountoriginal Reddit post

advice: desktop browser theme only (not support for mobile), and newReddit interface users only.

I not will make a version for the oldReddit interface, so... not ask please. I like the new design, the old is ugly and confusing; I know, this theme is is a mess, but is WIP and work, and I like it, so... (here the code).

// check the Gregorian calendar date in this format day.month.year for the last update version.

fully compatible with Dark Reader and Reddit Filter (addons).

updated version: 1.6.2022 (changelog at the end of the post)

/* newReddit interface theme by TOVOT */

/* start hide some useless things (my opinion) */
::-webkit-scrollbar,
.redesign-beta-optin,
.avKlJzxZU3brq4nAX0_i1, /* sidebar ADS */
.Ii7DEkcMDxQHElTHeeaci,
.m0n699kowSp8Wfa40lqpF,
._2oY_N7NWiAv9m_mFIRdwVX,
._2-aCCpAklEV0DkVWrpodjE {
    display: none !important }
/* end hide some useless things (my opinion) */

/* hide the invasive but helpfull weird button*/
._3A5WTC_rfbijxxWBmIP4Yx { display: none }

/* temp fix hide nonsense commas */
._37WD6iicVS6vGN0RomNTwh { display: none }

html, body { font-family: sans-serif !important }

a,
button,
.jEUbSHJJx8vISKpWirlfx,
._2FKpII1jz0h6xCAw1kQAvS,
._1JaK9h42mq2UXvugO7VriI {
    border-radius: 1px !important }

/* search bar */
._1DeR7_QiQnu2UK0e2dDfYD._2cQyXGCHzUUwjteF5E1eO7 {
    border-radius: 1px !important }

._272M2gvxto_0X0pq5TeO62,
._1oQRGKLqEtbGwWUMbhCDZj,
._3PZhYrOiAsgZIW2cezS6tI {
    border-radius: 30px !important }

._1JaK9h42mq2UXvugO7VriI {
    width: 111px }

a { color: #f7ffe9eb !important }

.next-button a,
._1qiHDKK74j6hUNxM0p9ZIp a,
._3fyECztJ8AQeIuhZWW-tNU a {
    color: #fff !important }

blockquote {
    color: #747474 !important }

textarea {
    color: #5dcb7c;
    background: #151515;
    font-size: 1.1em !important;
    width: 99% !important;
    padding: 5px !important }

._1gw9QnHhIreAAaTWBI3fUH input {
    background: #202020 }

/* covering header background
    ._2L5G9B5yaoqW3IegiYN-FL {
    background: #0079D3 !important } */

._34q3PgLsx9zIU5BiSOjFoM {
    background: transparent !important }

._2TuF8LuTZGoynMOwiccrRC {
    background-color: #1a1a1b }

._27zThB3Syksyv8gLdDJqep,
._2ZyL7luKQghNeMnczY3gqW {
    width: 99.5%;
    border: 1px solid #474748;
    border-bottom: 0 }

._2c1ElNxHftd8W_nZtcG9zf {
    border: unset }

.embedded-page #header {
    background: #000 }

.md {
    font-size: unset }

.save,
.cancel {
    border-radius: 2px !important;
    margin-left: 2px !important;
    background: #408251e0 !important;
    border: 1px solid #73ac83c9 !important;
    color: #fff !important }

.embedded-page #header .tabmenu li a,
.embedded-page #header .tabmenu li.selected a {
    color: #fff;
    letter-spacing: 0px }

.menuarea {
    padding: 10px !important; }

.embedded-page .flat-list a {
    color: #878787 !important;
    text-transform: uppercase;
    letter-spacing: 0px }

._2hd15zHzBDXNYbCUS85McI {
    padding: 5px }

._1oQyIsiPHYt6nx7VOmd1sz,
.post-content {
    background: #000;
    color: #c1c1c1 !important }

.embedded-page .content {
    background: #151515 }

._eYtD2XCVieq6emjKBH3m {
    color: #DAE0E6;
    padding: 5px;
    text-shadow: -1px -2px 2px #9c9ed4, 1px -1px 0px #000, -2px 2px 2px #900b0b, 2px 1px 4px #000;
    font-size: 1.94em !important;
    /* safe back
    text-shadow: -1px -1px 0px #000587,
                 1px -1px 0px #000587,
                 -1px 1px 0px #000587,
                 1px 1px 4px #000587; */
    font-weight: bold;
    letter-spacing: .074px }

code { color: #55ef68 !important}

.TmlaIdEplCzZ0F1aRGYQh {
    background: unset }

._1rZYMD_4xY3gRcSS3p8ODO {
    color: #c1c1c1 !important }

/* main column */
._1OVBBWLtHoSPfGCRaPzpTf {
    position: relative;
    width: 100% !important }

/* Join button */
._10BQ7pjWbeYP63SAPNS8Ts {
    background-color: #3C5E45;
    color: #fff }

/* Join button position */
.yIt5UPS176eVebNGNRQtf {
    padding-right: 1.22em }

/* Join button position */
._14-YvdFiW5iVvfe5wdgmET {
    padding-right: 1em }

/* Follow button */
._55hUWVhbF34AzbWr7SAMi,
._2XCKBYzBTZpjOAFEWv1tSy {
    margin: 0;
    margin-right: 10px !important;
}

/* ! filter extension */
.subButton {
    padding: 5px }

._1vyLCp-v-tE5QvZovwrASa {
    background: #202020 }

* { /* temp fix */
    --pseudo-before-background: #202020 !important;
    --background: #202020 !important;
    --canvas: #202020 !important }

._1BFbVxT49QnrAN3fqGZ1z8 {
    position: absolute;
    right: 13px }

._1m03hmspTHlre1O1CXbY9Y {
    position: fixed !important;
    bottom: 0px;
    right: .5px;
    width: 312px;
    height: 27px;
    border-radius: 3px;
    border: 1px solid #3c5e45;
    background: #3c5e45;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0px -4px 4px -2px rgba(0,0,0,0.68) }

#TrendingPostsContainer {
    padding: 10px }

.arrow {
    margin: 5px 0 0 0 }

.bottommenu {
    font-size: 11px; }

._25K6Ujp7eqOAHEdYuHm3pY,
.menuarea {
    background: #000 !important }

.embedded-page .menuarea .tabmenu li.selected a,
.embedded-page .menuarea .flat-list li.selected a {
    border-bottom-color: #d8d8d8 }

._1eNkAwmWuXZFmNLfie958 {
    color: #c1c1c1;
    text-transform: uppercase;
    font-weight: bold }

.nextprev,
.next-suggestions {
    color: #151515 }

.nextprev a,
.next-suggestions a {
    background: #3c5e45 !important;
    border-color: #50785b !important }

._3eEGmb1TERzQ2jBCUr-XNg {
    padding: 10px;
    margin-right: -100px }

._2mO8vClBdPxiJ30y_C6od2 a {
    border-top: 1px solid #4a4a4a }

._2mO8vClBdPxiJ30y_C6od2 button {
    margin-top: 8px }

._2torGbn_fNOMbGw3UAasPl {
    font-size: 0.9em !important }

/* chat window */
.yU9j1WJPhK5O625xcz254,
._1ScY1cHS-Vgv6eoU-LmjTi,
._3Txi0nOg7zVE4_CBYqUaRq,
._29tNelkz3zQzbXmYFOCncy {
    box-shadow: 0 0 1px 1px #4d8778c4, 0 10px 40px #000;
    border: 1px solid #323232;
    border-radius: 0px;
    bottom: -1px }

.lh9ssPWZKUR3-eXgoIPnX textarea {
    color: #fff !important;
    padding: 11px !important }

/* fix text "Report Description" */
.atALXaor5Ayh46CWiPfDR label {
    color: transparent !important }

/* overview pinned post */
._3Ud8ZDEFc0kXFg6R9KhDPS {
    min-width: 100% !important }

/* shadows fix for Coins/User/... panels */
._2uYY-KeuYHKiwl-9aF0UiL {
    box-shadow: 0 0 0 1px #151515 }

._3HTtcITrR-crvsRovLrijl {
    height: 20px;
    width: 20px }

/* growing comunities */
._3J5RkbDcTmj01rM7fNcvO7 {
    position: absolute;
    right: 13px }

.footer,
.footer .col {
    border: 0 }
Enter fullscreen mode Exit fullscreen mode

changelog:

  • 1.6.2022 fix on follow button and some comments
  • 12.5.2022 restored back to top button
  • 7.5.2022 changed color for embended code
  • 5.5.2022 a bit of minor fixes and changes

Oldest comments (0)