Not very customizable? I would appreciate it if you could open an issue on GitHub as I might need to tweak. I don't moderate/use everything reddit offers.
Reddit: Re-imagined by misspent
Details
Authormisspent
LicenseMIT
Categoryreddit
Created
Updated
Code size205 kB
Code checksum88626ed3
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
This is currently a work in progress, and I would not advise downloading it expecting everything to be to your taste.
Preview
❗ Read
📢 IMPORTANT: Disable Use new Reddit as my default experience & allow subreddits to show me custom themes in preferences.
📢 IMPORTANT: If you use Reddit Enhancement Suite, then enable the whole section.
📢 IMPORTANT: You MUST be signed in.
📢 Required: Your browser has to support :has selector for this and most of my other themes to work properly | Set layout.css.has-selector.enabled to “true” in about:config for Mozilla browsers.
📢 Support: If you have issues, please click the "Homepage" button and go to issues on the GitHub page or click this.
✅ Features
- ✔️ More Results
- ✔️ Actually dark
- ✔️ Supports Highlight New Comment Extension
- ✔️ Colour coded moderator and author messages
- ❌ Can't change much of anything unless you know what you're doing.
- ⭕ Work in progress, not perfect and more than likely never will be.
- ⛔ I use LibreWolf & Floorp browsers.
- ⛔ This was mainly made for myself and a friend as we don't like bloat, white-space or scrolling.
🖥️ Scripts/Extension I use
Extensions
Reddit Comment Collapser - Collapse a comment and all of it's replies by clicking on the column of the comment you wish to collapse.
Reddit Enhancement Suite - Reddit Enhancement Suite (RES) is a suite of tools to enhance your Reddit browsing experience. This might be a pain to setup.
Themes
Reddit colored comments - Not needed if you install "Reddit Comment Collapser".
Theme I use with Reddit Enhancement Suite - Only use this if you use Reddit Enhancement Suite theme + have the section enabled in the reddit theme
📷 More Screenshots
(Previews/screenshots may become out-of-date at some point)
Viewing Subreddit page
Viewing an actual post
🍻 My uBlock Origin Filters
⌛ Add this to your "My Filters" page
! =====================================> Reddit <=====================================
! Reddit Media UI fix/tweak | https://www.reddit.com/r/uBlockOrigin/comments/176rrjv/can_i_block_the_reddit_media_ui
reddit.com##:matches-path(/media) :root:style(background-color: black !important;)
preview.redd.it##.theme-beta.fixed
i.redd.it##.theme-beta.fixed
i.redd.it##zoomable-img:style(top: 0 !important; padding: 0 !important; height: unset !important;)
i.redd.it##post-bottom-bar
preview.redd.it##zoomable-img:style(top: 0 !important; padding: 0 !important; height: unset !important;)
preview.redd.it##post-bottom-bar
reddit.com##zoomable-img:style(top: 0 !important; padding: 0 !important; height: unset !important;)
reddit.com##post-bottom-bar
preview.redd.it##.border-neutral-border-weak.border-solid
www.reddit.com##.pointer-events-auto.l\:px-lg.px-md.bg-neutral-background.v2
preview.reddit.com##.border-neutral-border-weak.border-solid.border-r-0.border-l-0.border-t-0.border-b-sm.pointer-events-auto.m\:px-lg.px-md.bg-neutral-background.v2
! Reddit Domain Cleaner | Should only clean your main page (I use Reddit Enhanced Suite instead of using this now)
reddit.com##.listing-page.with-listing-chooser.loggedin .thing:has(.domain:has-text(/youtu.be|youtube|igorslab.de/i))
! Reddit - You can now drag and drop text when signed out... Bye bye lock
www.reddit.com##+js(aeld, mousedown, isSelectionOutOfRange)
www.reddit.com##+js(aeld, mouseup, shouldShowButton)
! Removes deleted comments + Filters remove botted comments by users
reddit.com##.commentarea .deleted .entry:has(.usertext.grayed)
reddit.com##.commentarea .entry:has-text(This post/comment has been automatically overwritten)
! Ublock Filter For Hiding "Blocked account" Comments
reddit.com##.Comment [id^="UserInfoTooltip"]>:not([data-testid="comment_author_link"]):upward(.Comment)
! 💬 Reddit Chat Iframe | Stylus doesn't apply it; this does
chat.reddit.com##.theme-beta, .theme-light.theme-beta:style(--color-tone-6: #202020 !important; --color-tone-7: #202020 !important;)
chat.reddit.com##.button:hover:style(border-radius: 0px !important; background: #202020 !important; color: #ccc !important;)
chat.reddit.com##rs-app:style(background: #151515 !important;)
reddit.com##[src="https://chat.reddit.com"], .border-b-tone-5, rs-rooms-nav:style(border-color: #202020 !important;)
chat.reddit.com##.bg-\[var\(--color-tone-7\)\], .container:has(.avatar):style(background: #101010 !important;)
chat.reddit.com##.text-tone-1, .room-name, .text-neutral-content:style(color: cornflowerblue !important;)
chat.reddit.com##.container, .text-\[color\:var\(--color-tone-1\)\]:style(color: #ccc !important;)
chat.reddit.com##.timeline-event-menu-container:style(border-radius: 0px !important; color: #ccc !important;)
chat.reddit.com##.message-box:style(background: #090909 !important; border-radius: 0px !important;)
📜 Configurable & Extra's
⌨ Variables
In the "❗ Main content" section:
:root {
--Sidebar: initial; /* none = removed EVERYWHERE, initial = enabled */
--Comment-Box: block; /* none = removed, block = on */
--AutoModerator-Message: none; /* none = removed, block = on */
--Flat-list-buttons: inherit; /* none = removed unless entry is hovered over, inherit = normal | This is the bar with permalink, source,embed, save, etc */
/* Buttons | none = off, initial = on */
--Permalink-button: initial;
--Source-button: none;
--Embed-button: none;
--Report-button: none;
}
🎨 My settings
My Other Themes
🎉 Credit
Credits: ggitaliano & brian6932
Base: Reddit Carbon Theme
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: Theme
@version 20250122.22.38
@namespace userstyles.world/user/misspent
@description Tis a theme for old reddit
@author misspent
@license MIT
==/UserStyle== */
@-moz-document domain("reddit.com") {
/* |=====> 😂 Not Mine [Important] <=====| */ /* Source is this iirc: https://github.com/brian6932/Reddit-Carbon-Theme | 10/05/2023 */
/* .res-image-media.res-media-zoomable {max-width: 685px !important;} */
/* MINE -> TESTING THIS FOR IMAGES */
.res-expando-box .res-media-independent {position: relative !important;}
.res-image-media.res-media-zoomable {max-width: 100% !important;}
/* Makes it easier to Read? Damn this didn't half change the feel of it! */
.md textarea, .md .-text, .md p, .md pre > code, .md th, .md td, .md li {
font-size: 15px;
margin: 0px !important;
}
/* source https://b.thumbs.redditmedia.com/6OltOW6Xbz1dZNVKJfoWSbtycXGThq6mGDiNtEeOQTw.css */
body {
color: #ddd;
}
.comment .usertext .md p> a:visited,
.md a,
.res.res-nightmode .tagline a,
a,
h2 a:visited {
color: #3498db;
-webkit-transition: color .15s ease-in-out;
-moz-transition: color .15s ease-in-out;
-o-transition: color .15s ease-in-out;
transition: color .15s ease-in-out;
}
a:hover {
text-decoration: none !important;
}
.md {
color: #ddd;
}
.md blockquote {
padding: 5px;
margin-left: 0;
background: #292929;
border: 1px solid #3c3c3c;
border-left-width: 3px;
color: #ccc;
}
.md blockquote blockquote {
background: #262626;
border-color: #3c3c3c;
}
.md blockquote blockquote blockquote {
background: #292929;
border-color: #3c3c3c;
}
.md code,
.md pre {
background: #2c2c2c;
border-color: #3c3c3c;
border-radius: 0;
color: #ccc;
}
.link .usertext .md *> code,
.link .usertext .md pre,
.usertext.border div.md *> code,
.usertext.border div.md pre {
background: #2c2c2c;
}
.new-comment div.md *> code,
.new-comment div.md pre {
background: #282828;
}
.usertext.grayed .usertext-body {
padding: 0;
background: 0 0;
}
.md del,
.usertext.grayed .usertext-body .md {
color: #888;
}
.md table {
margin: 1em 0;
font-size: 12px;
}
.titlebox .md table {
font-size: 11px;
width: 100%;
}
.md table td,
.md table th {
padding: 5px 8px;
border: 1px solid #222222;
}
.md table th {
background: #191919;
}
.md table tbody tr:nth-of-type(odd) {
background: #151515;
}
.md table tbody tr:nth-of-type(even) {
background: #191919;
}
.md hr {
height: 1px;
background: #2d2d2d;
}
.linefield input[type=text],
.linefield textarea,
.pretty-form input[type=text],
.pretty-form textarea,
.roundfield input[type=text],
.roundfield input[type=url],
.roundfield input[type=password],
.roundfield input[type=number],
.roundfield textarea,
input[type=text],
input[type=url],
input[type=password],
input[type=number],
textarea {
background: #292929;
border: 1px solid #393939;
box-shadow: none;
font-family: sans-serif;
color: #eee;
}
.link .usertext-edit textarea {
padding: 5px 7px;
}
.comment .usertext-edit textarea,
.commentarea> .usertext .usertext-edit textarea {
padding: 3px 5px;
}
.stylesheet-customize-container textarea {
font-family: "Bitstream Vera Sans Mono", "Consolas", monospace;
}
.linefield input[type=text]:hover,
.pretty-form textarea:active,
.pretty-form textarea:focus,
.pretty-form textarea:hover,
input[type=text]:active,
input[type=text]:focus,
input[type=text]:hover,
input[type=url]:active,
input[type=url]:focus,
input[type=url]:hover,
textarea:active,
textarea:focus,
textarea:hover {
border-color: #494949;
outline: 0;
}
#header {
height: 90px;
background: #202020;
border-bottom: 1px solid #101010;
}
#header:before {
content: "";
height: 1px;
position: absolute;
top: 21px;
left: 0;
right: 0;
background: #272727;
}
#sr-header-area,
#sr-header-area a#sr-more-link {
height: 20px;
background: #1a1a1a;
border-bottom: 1px solid #101010;
font-family: sans-serif;
line-height: 22px;
}
#sr-header-area .sr-list .separator {
visibility: hidden;
}
#sr-header-area .selected {
padding-right: 0;
}
#sr-header-area .selected,
#sr-header-area .selected a,
#sr-header-area a {
background: 0 0;
color: #444;
-webkit-transition: color .3s;
-moz-transition: color .3s;
-o-transition: color .3s;
transition: color .3s;
}
#sr-header-area .drop-choices.srdrop.inuse a,
#sr-header-area:hover .selected,
#sr-header-area:hover .selected a,
#sr-header-area:hover a {
color: #777;
}
#sr-header-area .drop-choices.srdrop.inuse a:hover,
#sr-header-area .selected a:hover,
#sr-header-area .selected:hover,
#sr-header-area a:hover {
color: #fff;
}
#sr-header-area .drop-choices.srdrop.inuse {
padding: 1px;
margin: -1px 0 0;
background: #2b2b2b;
border: 1px solid #101010;
border-top: 0;
border-left: 0;
box-shadow: 0 0 1px rgba(16, 16, 16, .5);
}
#sr-header-area .drop-choices.srdrop.inuse a {
background: #252525;
}
#sr-header-area .drop-choices.srdrop.inuse a:hover {
background: #202020;
}
#sr-header-area .drop-choices.srdrop.inuse .choice.bottom-option {
border-color: #333;
color: #999;
}
#header-bottom-left {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: #202020;
border-bottom: 1px solid #272727;
}
#header-img-a #header-img {
width: 80px;
height: 28px;
margin: 0;
}
#header-img-a,
#header-img.default-header {
width: 80px;
height: 28px;
display: inline-block;
margin: 0 30px 0 0;
position: relative;
bottom: 17px;
left: 15px;
vertical-align: bottom;
}
.pagename {
margin: 0 15px 0 0;
display: inline-block;
font-family: "lato", "verdana", sans-serif;
font-size: 12px;
font-variant: normal;
font-weight: 400;
letter-spacing: 1px;
line-height: 46px;
text-transform: uppercase;
color: #fb8500;
}
.messages-page .pagename,
.profile-page .pagename {
color: #eee;
}
body.with-listing-chooser #header .pagename {
margin-left: 0 !important;
position: static;
}
.pagename a {
display: inline-block;
color: #eee;
}
.pagename a:hover {
color: #fff;
}
.pagename a:before {
content: "/R/";
color: #bbb;
}
#header .tabmenu {
margin: 0;
line-height: 46px;
text-align: center;
}
body.with-listing-chooser #header .tabmenu,
body.with-listing-chooser #header .tabmenu li:first-child.selected {
margin-left: 0;
}
#header .tabmenu li,
#header .tabmenu li a {
padding: 0;
margin: 0;
display: inline-block;
background: 0 0;
}
#header .tabmenu li a {
margin: 0 10px;
font-family: "lato", "verdana", sans-serif;
font-size: 12px;
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
color: #bbb;
-webkit-transition: .3s color, .2s background-position;
-moz-transition: .3s color, .2s background-position;
-o-transition: .3s color, .2s background-position;
transition: .3s color, .2s background-position;
position: relative;
}
#header .tabmenu li a:hover {
color: #eee;
}
#header .tabmenu li.selected a {
position: relative;
border: none;
color: #fb8500;
}
#header .tabmenu li.selected a:hover {
color: #fb8500;
}
#header .tabmenu li a:after,
#header .tabmenu li.selected a:after {
content: "";
width: 16px;
height: 10px;
margin: 0 auto;
position: absolute;
right: 0;
bottom: -2px;
left: 0;
background: url("https://b.thumbs.redditmedia.com/ByDpJS_TIsnHeHRX3mktRAB6RLKGCJ7etqHc-uYHU9s.png") -9999px -9999px no-repeat;
}
#header .tabmenu li a:after {
background-position: center 10px;
-webkit-transition: .2s background-position ease-in-out;
-moz-transition: .2s background-position ease-in-out;
-o-transition: .2s background-position ease-in-out;
transition: .2s background-position ease-in-out;
}
#header .tabmenu li a:hover:after,
#header .tabmenu li.selected a:after {
background-position: center 0;
}
#header .tabmenu li a[href$="/ads/"]:after {
right: 4px;
}
#header-bottom-right {
height: 40px;
padding: 0 15px 0 8px;
bottom: 0;
background: #1d1d1d;
border-top: 1px solid #272727;
border-bottom: 1px solid #222;
border-radius: 0;
font-family: "lato", "verdana", sans-serif;
font-size: 11px;
font-weight: 400;
letter-spacing: 1px;
line-height: 40px;
text-transform: uppercase;
}
.gold-only #header #header-bottom-right {
background: #1d1d1d;
}
#header-bottom-right:before {
content: "";
width: 21px;
height: 40px;
display: block;
position: absolute;
left: -21px;
background: url("https://b.thumbs.redditmedia.com/ByDpJS_TIsnHeHRX3mktRAB6RLKGCJ7etqHc-uYHU9s.png") 0 -367px no-repeat;
border-bottom: 1px solid #222;
}
#header-bottom-right .user,
#header-bottom-right a,
.gold-only #header #header-bottom-right a {
color: #bbb;
}
#header-bottom-right a:hover,
.gold-only #header #header-bottom-right a:hover {
color: #eee;
}
#header-bottom-right .pref-lang {
font-weight: 400;
}
#header-bottom-right .user a.login-required {
margin-left: 5px;
color: #fb8500;
}
.loggedin #header-bottom-right .user {
color: #1d1d1d;
}
#header-bottom-right .user .userkarma {
border: none;
color: #ddd;
}
#header-bottom-right .separator {
visibility: hidden;
}
#header-bottom-right #mail,
#header-bottom-right #modmail,
.gold-only #header #header-bottom-right #mail.havemail,
.gold-only #header #header-bottom-right #modmail.havemail {
backg...