Skip to content

zen mode new.reddit.com, read note to use old UI by GitEin11

Screenshot of zen mode new.reddit.com, read note to use old UI

Details

AuthorGitEin11

LicenseNo License

Categorynew.reddit.com

Created

Updated

Size128 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

zen mode for reddit

Notes

rewrite of zen reddit for easier update and maintenance:

activate the reddit darkmode first

features:
1. simplified community banner
2. user avatar is replaced with vote count
3. home button "⌂" is added on the top of a post
4. to upvote/downvote hover over the vote count, a line will be shown to indicate your vote
5. to reply to a comment hover below the redditors name.
6. resizable screen
7. added: "Reader mode, good for read aloud extension (CTRL+A the page then right click choose Read aloud selected text)"

and many more.

work around to use old UI:

add "https://new.reddit.com/user/YOURUSERNAME/followers/" to your bookmark
load it, then click "Go Home" button
or install https://greasyfork.org/en/scripts/508588-autoclick-reddit-home

if it doesn't work load old.reddit.com first then load
https://new.reddit.com/user/YOURUSERNAME/followers/
then click "Go Home" button

will revert to new UI if a link is opened in new tab/window

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name           zen reddit 2.0 -
@namespace      github.com/openstyles/stylus
@version        2.3.1
@description    zen mode for your reddit experience
@homepageURL    https://github.com/GitEin11
@author         ein
@preprocessor   stylus
@var checkbox   toggleCommentFocusCode "focusing on comment fades background" 1
@var checkbox	toggleCommentAsButton "[comment as] in post compressed to a button" 1
@var checkbox	toggleReplyComment "Dont show reply button|share|... in comment (useful when it obstruct while selecting/copying the reply text)" 0
@var checkbox	toggleContentMaxheight "expand content to full height: feeds shows tall images/ long post" 1
@var checkbox	toggleCleanComment "Reader mode, good for read aloud extension (CTRL+A the page then right click choose `Read aloud selected text`)" 0


==/UserStyle== */
/*
tips: to use on mobile install firefox nightly then
apply this:
https://blog.mozilla.org/addons/2020/09/29/expanded-extension-support-in-firefox-for-android-nightly/
so you can install more add-ons
		
install stylus to use this css style

then install https://addons.mozilla.org/en-US/firefox/addon/uaswitcher/
to force reddit to use desktop mode

install this https://addons.mozilla.org/en-US/firefox/addon/redirector/		
then apply:
Redirect:
https://www.reddit.com/(?!media.)(.*)
to:
https://new.reddit.com/$1
to always redirects to new.reddit.com
		
if you have darkreader extension or Dark Background and Light Text, turn it off in reddit


this style is tested on mozilla firefox
*/
@-moz-document domain("new.reddit.com") {

	/* reddit r/popular message */
	._3Tl09Mc2pqGPdIu3beZW4b {
		._11KlaBYJq9fbo0p9We9Q-X {
			font-size: 0;
			color: #aaa;
			&:before {
				font-size: 18px;
				content: "reddit broke this page, browse r/all instead"
			}
		}
		._10BQ7pjWbeYP63SAPNS8Ts {
			display: none;
		}
	}
	/* content to full height */
	/*copied from https://greasyfork.org/en/scripts/489074-reddit-show-images-with-real-full-height*/
	if toggleContentMaxheight {

		.STit0dLageRsa2yR4te_b:has(._3hUbl08LBz2mbXjy0iYhOS),
		.STit0dLageRsa2yR4te_b:has(._3b8u2OJXaSDdBWoRB7zUoK),
		.STit0dLageRsa2yR4te_b:has(mg.media-element),
		.KVyBaj7FjzElWsqJDmw7v:has(._3b8u2OJXaSDdBWoRB7zUoK) {
			height: max-content !important;
			& ._1apobczT0TzIKMWpza0OhL {
				display: flex !important;
			}

			& ._3gBRFDB5C34UWyxEe_U6mD {
				display: none !important;
			}

			& ._3JgI-GOrkmyIeDeyzXdyUD,
			& [style*="left:0px"],
			& [style*="left: 0px"],
			& ._2Ev7WJU0f45KxlmClce9t8 {
				position: relative !important;
				height: max-content !important;
			}

			& .media-element,
			& .m3aNC6yp8RrNM_-a0rrfa,
			& [style*="max-height: 512px"],
			&& [style*="max-height:512px"] {
				max-height: unset !important;
			}

			& :is(figure, li, ul),
			& ._1ti9kvv_PMZEF2phzAjsGW,
			& .KVyBaj7FjzElWsqJDmw7v {
				height: max-content !important;
			}
		}

		.rpBJOHq2PR60pnwJlUyP0 > div[style^="height"] {
			height: unset !important;
			& > .wwHbgRV0ZXGp5CHHlpo5u {
				display: unset !important;
			}
		}
		/* small screen */
		@media screen and (max-width: 600px) {
			._3gBRFDB5C34UWyxEe_U6mD {
				padding-bottom: 0 !important;
			}

			& ._3JgI-GOrkmyIeDeyzXdyUD,
			& [style*="left:0px"],
			& [style*="left: 0px"],
			& ._2Ev7WJU0f45KxlmClce9t8 {
				position: relative !important;
				height: max-content !important;
			}
			& :is(figure, li, ul),
			& ._1ti9kvv_PMZEF2phzAjsGW,
			& .KVyBaj7FjzElWsqJDmw7v {
				height: max-content !important;
			}
		}

		/* expands text, so instead of loading the "comment page", you can read the full post on "feed page" */
		.Chtkt3BCZQruf0LtmFg2c {
			mask-image: unset !important;
		}

		._3hUbl08LBz2mbXjy0iYhOS,
		._3b8u2OJXaSDdBWoRB7zUoK {
			display: none;
		}

		.Chtkt3BCZQruf0LtmFg2c {
			max-height: max-content !important;
			height: max-content !important;
		}
	}

	* {
		/* this are fixes for small screen device example mobile phones */
		@media screen and (max-width: 906px) {
			._1RYN-7H8gYctjOQeL8p2Q7 {
				max-width: 100vw !important;
				*:not(._2yB7G9L-6O_6Lp6D0n7EAl):not(._3-miAEojrCvx_4FQ8x3P-s) {
					max-width: calc(100vw - 4px) !important;
				}

				img {
					max-width: calc(100vw - 6px) !important;
				}

				._21pmAV9gWG6F_UKVe7YIE0 {
					max-width: 0 !important;
				}
			}
		}

		@media screen and (max-width: 512px) {
			._2L5G9B5yaoqW3IegiYN-FL ._26j3FxU4jTfjqi8m96HMmI {
				max-width: calc(100vw) !important;
			}
		}

		.grecaptcha-badge {
			display: none !important;
			right: 0 !important;
		}

		._3MC4c3Q_Y41YKtl1TcvyMt {
			max-width: calc(100vw - 6px);
		}

		@media screen and (max-width: 900px) {
			._1VP69d9lk-Wk9zokOaylL::after {
				display: none;
			}
		}
	}

	/* general web experience */
	:root {
		--newCommunityTheme-linkTextWithBody: #6f8e9e!important;
	}

	* {
		/* always blue i.e. button links
		[just put !important to gray if neccesary] */
		._3t5uN8xUmg0TOwRCOGQEcU,
		._3t5uN8xUmg0TOwRCOGQEcU:visited,
		a:link {
			color: #6f8e9e;
			font-weight: normal !important;
			&:hover {
				color: #6f8e9e;
			}
		}

		a:hover .icon-external_link {
			color: #6f8e9e;
		}

		/* need both blue and purple */
		._13svhQIUZqD9PVzFcLwOKT {
			color: #6f8e9e;
			&:visited,
			&:visited i,
			&:visited:hover,
			&:visited:hover i {
				color: #917494 !important;
			}
		}

		/* need purple but does not always need to blue */
		._19FzInkloQSdrf0rh3Omen a:visited,
		._3cjCphgls6DH-irkVaA0GM a:visited,
		.SQnoC3ObvgnGjWt90zD9Z:visited * {
			color: #917494 !important;
		}

		/* always gray */
		._10wC0aXnrUKfdJ4Ssz-o14._1-PD0_zreH-KVwpFoCLvQF {
			.icon-external_link_fill::before {
				color: #666;
				fill: #666;
			}
		}
		::selection {
			background-color: #4a6675!important;
			color: #000!important;
		}

		i,
		svg {
			color: #666;
			fill: #666;
		}

		::-webkit-scrollbar {
			width: 5px!important;
			&:active {
				background: #252627;
			}
		}

		::-webkit-scrollbar-track {
			background: #000 !important
		}

		::-webkit-scrollbar-thumb {
			background: #252627;
			border-radius: 0 !important
		}

		scrollbar-color: #252627 transparent !important;
		scrollbar-width: thin !important
	}

	/* removes giphy watermark START */
	* {
		._1gg1MfJZaNkaPmqHpGQHni {
			border-radius: 4px;
		}

		.U76N5pdhVpwLUkKv0jpDZ {
			visibility: hidden;
			height: 0;
			padding-top: 0px;
			margin-bottom: -10px;
		}

		._292iotee39Lmt0MkQZ2hPV.RichTextJSON-root {
			overflow: hidden;
		}

		/* giphy END */
	}

	/*-------------------------------------------------*/
	/* CHECK BOX, RADIO-BOX START */
	:root {
		--newCommunityTheme-button: #343536 !important;
	}

	* {
		input[type='checkbox'],
		input[type='radio'] {
			appearance: none;
			position: relative;
			top: 3px;
			width: 13px;
			height: 13px;
			border: 2px solid #444;
			border-radius: 50%;
			background: transparent;
			&:checked {
				border: 2px solid #6f8e9e;
			}
		}

		/* vote button */
		._2tU8R9NTqhvBrhoNAXWWcP {
			color: #666;
			border-color: #343536;
			&:hover {
				color: #6f8e9e;
				border-color: #6f8e9e;
			}

			&:before {
				background: #0000;
			}
		}

		._2tU8R9NTqhvBrhoNAXWWcP {
			&:disabled,
			&[data-disabled],
			&[disabled] {
				border-color: #333;
				color: #444;
			}
		}

		._1IRL40baisCHOgVx5-nRcF > .voteButton {
			visibility: visible;
		}

		.DTBgaoab9JdaywJZPiOUg {
			border-bottom-color: #5d7886;
			color: #5d7886;
		}

		.Jz1mV4fpTSzPIgl2ROwml {
			background-color: #6f8e9e;
		}

		/* label */
		._1InAvR50xXN8IvYYJXBzeH,
		._3P07HZTvGYr8jZJqBNVWlC,
		._2i69-XcdWxCweTZ_Q5eQsd {
			color: #666 !important;
		}

		._1D-ia-yMo19N_oSZaVggIv {
			fill: #555;
		}

		/* CHECK BOX, RADIO-BOX END */
	}

	/*-------------------------------------------------*/
	/* New Comment/Post notification START */
	* {
		:root,
		[class^="subredditvars-"] {
			--newRedditTheme-active: #202022 !important;
		}

		._2X4xugrTQ5e3TVxPPEHqGh ._3JKnqeBKw2wp7eHzFXNXSe {
			button {
				background: #1a1a1b !important;
				border: 1px solid #343536 !important;
				top: -40px;
				padding: 4px 10px !important;
				box-shadow: none !important;
				._2nAeJnoRM4DyyVYoJhvMc4._2q-ZKRaT1WjKg092R6La5J {
					color: #666;
				}

				&:hover {
					border-color: #545e67 !important;
					border-width: 2px !important;
					padding: 3px 9px !important;
					._2nAeJnoRM4DyyVYoJhvMc4._2q-ZKRaT1WjKg092R6La5J {
						color: #7d8d9c;
					}
				}
			}

			._2nAeJnoRM4DyyVYoJhvMc4,
			._1W1pLIfaIb8rYU6YeTdAk6 {
				margin: 0;
			}
		}

		/* New Post notification start */
		._2w46GjyOK9f8VUpIbu6q1B {
			position: fixed !important;
			width: 100vw !important;
			left: 0 !important;
			top: 95px;
		}

		._3QVmoK4pfXYk-E13BWrpzd {
			.cmR5BF4NpBUm3DBMZCmJS,
			._1PPMaBuBIFqAY5VrSWww3Y {
				background: #1a1a1b !important;
				border: 1px solid #343536 !important;
			}

			.cmR5BF4NpBUm3DBMZCmJS {
				border-right: none !important;
				color: #666 !important;
				padding: 4px 4px 4px 12px !important;
			}

			._1PPMaBuBIFqAY5VrSWww3Y {
				border-left: none !important;
				fill: #666 !important;
				padding-right: 2px !important;
			}
		}

		._3QVmoK4pfXYk-E13BWrpzd:hover {
			padding: 0 !important;
			&:before {
				content: "";
				display: block;
				height: calc(100% + 12px);
				width: calc(100vw - 2px);
				position: fixed;
				top: -8px;
				left: calc(-50vw + 50% - 1px);
				background: #0000009c;
			}

			.cmR5BF4NpBUm3DBMZCmJS {
				border-width: 2px !important;
				border-color: #545e67 !important;
				padding: 3px 4px 3px 11px !important;
				&:hover {
					color: #7d8d9c !important;
				}
			}

			._1PPMaBuBIFq...

Reviews

No reviews yet.