Skip to content

Reddit: Re-imagined by misspent

Screenshot of Reddit: Re-imagined

Details

Authormisspent

LicenseMIT

Categoryreddit

Created

Updated

Size196 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

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.

Notes

This is currently a work in progress, and I would not advise downloading it expecting everything to be to your taste.

Preview

Reddit - Home Page

❗ Important! [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

Reddit - Viewing Subreddit page

Viewing an actual post

Reddit - 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 Reddit 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      20241209.11.05
@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 {
		background: url("https://b.thumbs.redditmedia.com/ByDpJS_TIsnHeHRX3mktRAB6RLKGCJ7etqHc-uYHU9s.png") -9999px -9999px no-repeat;
	}

	#header-bottom-right #mail {
		top: 1px;
	}

	#header-bottom-right #mail.nohavemail {
		background-position: 0 -50px;
	}

	#header-bottom-right #mail.havemail {
		background-position: -16px -50px;
	}

	.gold-only #header #header-bottom-right #mail.havemail {
		background-position: -32px -50px;
	}

	#header-bottom-right #modmail {
		top: -3px;
	}

	#hea...

Reviews

No reviews yet.