Miscellaneous Dark Themes Bundle by blyad

Screenshot of Miscellaneous Dark Themes Bundle

Details

Authorblyad

LicenseCC BY-NC-SA 4.0

Categoryeverything

Created2 years, 1 month ago

Updated1 month, 4 weeks ago

Size299 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

A Bundle That Provides Dark Themes for Miscellaneous Sites.

Notes

📃 Currently Supported:

Known issues:

Style applies to every website available, but it doesn't break anything. This can be ignored.

If you want me to write a dark mode for website of your choosing, feel free to open new issue at GitHub!

execpt of big ass sites like microsoft

Update 4 | 06.03.24 | Tata słychać cię debilu

added dark mode for Diamond Lobby
added dark mode for GameRevolution
massive fixes across all domains

Update 3 | 29.07.23 |

added dark mode for SteamRep
added dark mode for Loot and Grind
added dark mode for Game Voyagers
added dark mode for Site Rank Data
added dark mode for Game Map Scout
added dark mode for HisGames
added dark mode for Palia
added dark mode for Spotify Pie
added dark mode for Accelerated Ideas
added dark mode for X2Download
added dark mode for Mod DB
added dark mode for Stats for Spotify
fixes on multiple styles

Update 2 | 19.03.23 | I made my Fallout 4 feel like Dark Souls and I regert nothing

added dark mode for YT1s
added dark mode for MyAbandonWare
added dark mode for Tamriel Rebuilt
added dark mode for Emoji Keyboard
added dark mode for ROMSPURE
merged dark mode for ReShade and SweetFX
merged dark mode for Gianni's Site
merged dark mode for Sseth's Site
fixes on multiple themes

Update 1 | 20.05.22 | It Has To Be This Way

reassembled to uso from stylus preprocessor for my convenience (can't use variables in rgba() with stylus)
added dark mode for Nightbot
added dark mode for SteamID
added dark mode for Eurogamer
added dark mode for SteelSeries
added dark mode for LEXYR
added dark mode for SocialGrep
corrected thumbnail

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.

/* ==UserStyle==
@name           Miscellaneous Dark Themes Bundle
@namespace      github.com/blyad2137/miscellaneous-dark-themes-bundle
@version        1.4.0
@description    `A Miscellaneous Module that provides dark mode for a lot of smaller websites.`
@author         blyad (https://github.com/blyad2137)
@license		CC BY-NC-SA 4.0
@homepageURL    https://github.com/blyad2137/miscellaneous-dark-themes-bundle
@supportURL     https://github.com/blyad2137/miscellaneous-dark-themes-bundle/issues
@preprocessor	uso

@advanced dropdown stylus "Stylus Page Dark Mode:" {
	1. "ON" <<<EOT 
			::-webkit-scrollbar-track {
				 -webkit-box-shadow: inset 0 0 0px rgba(0, 0, 0, 0.3);
				 border-radius: 0px;
				 background-color: #212121;
			}
			html[hide-scrollbar="true"] ::-webkit-scrollbar{display:none}
			::-webkit-scrollbar {
				 width: 1em;
				 background-color: #212121;
			}
			::-webkit-scrollbar-thumb {
				 border-radius: 3px;
				 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .6);
				 background-color: #bbb;
				 border: 3px solid #353535;
			}
			::-webkit-scrollbar-thumb:hover {
				 border: 2px solid #353535;
			}
			::-webkit-scrollbar-corner {
				 border-color: #353535;
				 background: #212121;
			}

		:root {
			--bg-dark: #1a1a1a;
			--bg-dark-255: #252525;
			--bg-dark-grey: #353535;
			--white-400: #bbb;
			--invert-1: invert(1);
			--border-color-300: #303030;
			--border-color-535: #535353;
			--box-shadow-inset-300: inset #303030 0 0 5px 0;
			--box-shadow-inset-500: inset #505050 5px 0 10px 0;
			--box-shadow-inset-500-2: inset #505050 0 0 10px 0;
		}

		html {
			background-color: var(--bg-dark);
			color: var(--white-400);
		}
		[src="//stylus-lang.com/img/stylus-logo.svg"], 
		[src="//stylus-lang.com/img/octocat.svg"] {
			filter: var(--invert-1);
		}
		.stylus + .CodeMirror, hr {
			border-color: var(--border-color-535);
		}
		.css + .CodeMirror {
			background-color: var(--bg-dark-grey);
		}
		#prev, #next {
			background-color: var(--bg-dark);
			border-color: var(--border-color-300);
			-webkit-box-shadow: var(--box-shadow-inset);
		}
		#next:hover, #prev:hover {
			-webkit-box-shadow: var(--box-shadow-inset-500-2);
		}
		#next:active, #prev:active {
			-webkit-box-shadow: var(--box-shadow-inset-500);
		}
		pre, code:not(.vp-doc code) {
			background-color: var(--bg-dark-255);
			border-color: var(--border-color-300);
		}
		.sidebar {
			border-color: var(--border-color-300);
		}
	EOT;
	2. "OFF" <<<EOT EOT;
}
@advanced dropdown tes3mp "TES3MP Page Dark Mode:" {
	1. "ON" <<<EOT
		@import url('https://fonts.googleapis.com/css2?family=Mirza&display=swap');

		:root {
			--bg: #1b1b1b;
			--grey: #aab5b9;
			--border: #363d44;
			--accent: #a68f5e;
		}

		body {
			background-color: var(--bg);
			color: var(--grey);
		}
		.site-footer {
			border-color: var(--border);
		}
		a {
			color: var(--accent);
		}
		.page-header {
			background-image: url('https://wallpaperaccess.com/full/1432662.png');
			background-repeat: no-repeat;
			background-size: cover;
			background-attachment: scroll;
			background-position-y: -30rem;
		}
		.project-name {
			font-family: 'Mirza', cursive;
			font-size: 4rem;
		}
	EOT;
	2. "OFF" <<<EOT EOT;
}
@advanced dropdown gameplaytips "gameplay.tips Page Dark Mode:" {
	1. "ON" <<<EOT
	:root {
			--w100: #fff;
			--w200-r: #efeeee;
			-w250: #dadada;

			--d100: #1b1b1b;
			--d170: #252525;
			--d200: #2b2b2b;
			--d370-b: #384147;
			--d370: #353535;
			--d580-b: #586b7e;

			--g800: #888;
		}


		body {
			background-color: var(--d170);
			color: var(--w100);
		}
		.mh-header, .mh-wrapper, .mh-widget .search-form {
			background-color: var(--d100);
		}

		[src*="/logo_new-1.png"], #fancybox-tmp > #fancybox-img {
			filter: invert(.895) hue-rotate(180deg) saturate(2);
		}
		.mh-breadcrumb, .mh-breadcrumb a, .mh-meta, .mh-meta a {
			color: var(--g800);
		}
		.mh-breadcrumb, .entry-header .entry-meta, .ads_story_1, .mh-post-nav, .mh-posts-large-item, .mh-posts-list-item, .mh-loop-description, .mh-comment-list .comment-body, .mh-comment-list .avatar, .mh-author-box, .mh-author-box-avatar {
			border-color: var(--d370);
		}
		.search-form .search-field {
			background-color: var(--d100);
			border-color: var(--d370);
			color: var(--w200-r);
		}
		#toc_container {
			background-color: var(--d170);
			border-color: var(--g800);
		}
		div#GP_Video {
			background-color: var(--d200) !important;
		}
		h1, h2, h3, h4, h5, h6, a {
			color: var(--w100);
		}
		span[style*="color: initial"], b[style*="color: initial"], strong[style*="color: initial"] {
			color: var(--w100) !important;
		}
		.mh-comment-list .comment-meta, .mh-comment-list .comment-meta a {
			color: var(--w-250);
		}
		.div_author {
			background-color: var(--d370-b);
			border-color: var(--d580-b);
		}
		.mh-widget-layout3 .mh-widget-title, .page-numbers {
			background-color: var(--d170);
			color: var(--w100);
		}
		textarea, input {
			background-color: var(--d170);
			color: var(--w100);
			border-color: var(--d370);
		}
		.entry-thumbnail img, .entry-content p img, .mh-post-nav-prev img, .mh-posts-list-thumb img, .mh-posts-large-thumb img, .wp-block-image:not(.is-style-rounded) img {
			border-radius: .235em;
		}
		.page-title span {
			font-style: italic;
		}
		div.letter-section h2.letter-title {
			border-bottom-color: var(--w100);
		}
		.az-letters>ul.az-links>li, .a-z-listing-widget .az-letters>ul.az-links>li, .a-z-listing-widget.widget .az-letters>ul.az-links>li {
			background-color: var(--d170);
			border-color: var(--d370);
		}
		#fancybox-content {
			background-color: var(--d100);
			border-color: var(--d100);
		}
		.ads_sticky, .ads_story {
			display: none;
		}
	EOT;
	2. "OFF" <<<EOT EOT;
}
@advanced dropdown levelskip "LevelSkip Page Dark Mode:" {
	1. "ON" <<<EOT
	::-webkit-scrollbar-track {
					 -webkit-box-shadow: inset 0 0 0px rgba(0, 0, 0, 0.3);
					 border-radius: 0px;
					 background-color: #212121;
				}
				html[hide-scrollbar="true"] ::-webkit-scrollbar{display:none}
				::-webkit-scrollbar {
					 width: 1em;
					 background-color: #212121;
				}
				::-webkit-scrollbar-thumb {
					 border-radius: 0px;
					 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .6);
					 background-color: #777;
				}

		section[style*="--title_size_a_color:#212121;--title_size_b_color:#212121;--title_size_b_line_height:1.2;--title_size_b_font_size:20;--title_size_c_color:#212121;--title_size_c_line_height:1.15;--title_size_c_font_size:28"] {
			--title_size_a_color: #d1d1d1 !important;
			--title_size_b_color: #d1d1d1 !important;
			--title_size_c_color: #d1d1d1 !important;
		}
		body {
			background-color: #000;
			color: #ccc;
		}
		.m-advertisement-off-canvas--pusher, .mm-header--content-detail:not(.mm-header--has-background-image) .m-header--container, .m-page.mm-detail, .m-page-container, .m-detail--feature-container {
			background-color: #000;
		}
		.mm-header--content-detail .m-header--navbar {
			background-color: #000;
			border-color: #464646;
		}
		.m-site-nav.l-sticky-navbar a:active, .m-site-nav.l-sticky-navbar a:focus, .m-site-nav.l-sticky-navbar a:hover, .m-site-nav.l-sticky-navbar button:active, .m-site-nav.l-sticky-navbar button:focus, .m-site-nav.l-sticky-navbar button:hover, .m-site-nav.mm-site-nav--condensed a:active, .m-site-nav.mm-site-nav--condensed a:focus, .m-site-nav.mm-site-nav--condensed a:hover, .m-site-nav.mm-site-nav--condensed button:active, .m-site-nav.mm-site-nav--condensed button:focus, .m-site-nav.mm-site-nav--condensed button:hover, .m-site-nav.mm-site-nav--condensed-featured a:active, .m-site-nav.mm-site-nav--condensed-featured a:focus, .m-site-nav.mm-site-nav--condensed-featured a:hover, .m-site-nav.mm-site-nav--condensed-featured button:active, .m-site-nav.mm-site-nav--condensed-featured button:focus, .m-site-nav.mm-site-nav--condensed-featured button:hover, .m-header, a, .m-detail-header--meta a:active, .m-detail-header--meta a:focus, .m-detail-header--meta a:hover, .m-detail--author-byline a:active, .m-detail--author-byline a:focus, .m-detail--author-byline a:hover, .m-detail--body a, .m-footer--links li a:active, .m-footer--links li a:focus, .m-footer--links li a:hover, .m-card--metadata-a .mm-card--metadata-text, .m-card--body, .m-header--link a, .m-button:active, .m-button:focus, .m-button:hover  {
			color: #fff;
		}
		.m-site-nav.l-sticky-navbar a, .m-site-nav.l-sticky-navbar button, .m-site-nav.mm-site-nav--condensed a, .m-site-nav.mm-site-nav--condensed button, .m-site-nav.mm-site-nav--condensed-featured a, .m-site-nav.mm-site-nav--condensed-featured button {
			color: #888;
		}
		a.m-header--logo, [src*='/levelskip_logo_m_condensed-nav.svg'] {
			filter: invert(1);
		}
		.m-detail-header--meta a, .caption, figcaption, .m-detail--author-byline a, .m-detail--footer .m-detail--author-byline .m-detail--author-byline-label, .m-component-header--title, .m-footer--container a, .mm-card--density-strip .m-card--header-text, .m-collection-strip .m-card--metadata-b-link, .m-card--header-text, .m-card--metadata-a a, .m-hub-header--title-heading, .mm-card--density-strip .m-card--header-text:active, .mm-card--density-strip .m-card--header-text:focus, .mm-card--density-strip .m-card--header-text:hover, .mm-card--density-single-column.mm-card--type-standard:not(.mm-card--inverted) .m-card--header-text:active, .mm-card--density-single-column.mm-card--type-standard:not(.mm-card--inverted) .m-card--header-text:focus, .mm-card--density-single-column.mm-card--type-standard:not(.mm-card--inverted) .m-card--header-text:hover, .m-card--header-text:active, .m-card--header-text:focus, .m-card--header-text:hover, .m-card--metadata-a a:active, .m-card--metadata-a a:focus, .m-card--metadata-a a:hover {
			color: #ccc;
		}
...

Reviews

No reviews yet.