Skip to content

Stylus Modern Dark Theme by blyad

Screenshot of Stylus Modern Dark Theme
Homepage Write a review Install Get Stylus

Details

Authorblyad

LicenseCC BY-NC-SA 4.0

Categorystylus

Created

Updated

Size22 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

As in title.

Notes

Update 11 | 06.03.23

  • fixed buttons height at popup
  • fixed checkboxes padding and flex
  • and something else i guess

Update 10 | 16.02.23 | GIGA NIGGA UPDATE

  • added proper border radius to some of the buttons
  • fixed the gradients
  • fixed rest of the remaining white areas

Update 9 | 03.06.22

  • whoops, missed two things; changed result-meta to dark; corrrect position of write style for this url

Update 8 | 31.05.22

  • small corrections due to new update of the extension

Update 7 | 24.04.22 | I LIED

  • fixed position of .applies-to regexp value
  • changed update complete message to dark

Update 6 | 25.12.21

  • blah blah blah who fucking cares, just a patch that should cover everything in Stylus extension. There should be no more updates from now on.

Update 5 | 27.10.21

  • changed color of arrows hover to white
  • changed color of code selection to dark
  • changed color of external support link to white
  • changed color of data error to dark red

Update 4 | 04.09.21

  • changed to white color 'Using userstyles.world' under Publish section

Update 3 | 14.08.21

  • changed warning header to dark red
  • changed external links to white colors

Update 2 | 07.08.21

  • changed delete confirmation popup to dark

Update 1 | 01.08.21

  • changed hotkeys popup to dark

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name           Stylus Modern Dark Theme
@namespace      github.com/blyad2137/stylus-modern-dark-theme
@version        1.3.1
@description    `Just a nice and compelling dark theme for this beautiful extension`
@author         blyad (https://github.com/blyad2137)
@license        CC BY-NC-SA 4.0
@homepageURL    https://github.com/blyad2137/stylus-modern-dark-theme
@supportURL     https://github.com/blyad2137/stylus-modern-dark-theme/issues
==/UserStyle== */

@-moz-document regexp("chrome-extension://.*"), regexp("moz-extension://.*") {
			::-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: 10px;
				 background-color: #212121;
			}
			::-webkit-scrollbar-thumb {
				 border-radius: 0px;
				 background: none;
				 background-color: #808080;
				 transition: all .18s ease-in-out;
			}
			::-webkit-scrollbar-thumb:hover {
				 background-color: rgba(0, 255, 201, .5);
			}
			::-webkit-scrollbar-corner {
				 background: #212121;
				 border-color: #212121;
			}
			::-webkit-resizer, ::-webkit-scrollbar-track-piece {
				background: none;
				border: 0;
			}

	:root {
		--bg-body: #1b1b1b;
		--bg-header: #202020;
		--bg-button: var(--bg-body);
		--bg-button-image: linear-gradient(180deg, #1f1f1f 0%, #1b1b1b 100%);
		--bg-button-hover: linear-gradient(180deg, #222 0%, #252525 100%);
		--bg-checkbox: rgba(255, 255, 255, 0.1);
		--bg-checkbox-hover: #444;
		--bg-input: #252525;
		--bg-select: var(--bg-input);
		--bg-popup: rgba(27, 27, 27, .3);
		--bg-gutters: #222;
		--bg-CodeMirror: var(--bg-body);
		--bg-activeline: rgba(0, 180, 255, .15);
		--bg-CodeMirror-hints: var(--bg-popup);
		--bg-menu-items: var(--bg-popup);
		--bg-search-result-hover: var(--bg-body);
		--bg-search-result: #2b2b2b;
		--bg-message-box: var(--bg-popup);
		--bg-options: var(--bg-popup);
		--bg-hotkey-info: var(--bg-popup);
		--bg-hotkey: linear-gradient(#5b5b5b, #1b1b1b);
		--bg-confirmation: var(--bg-popup);
		--bg-warning: #261f1f;
		--border-warning: #666;
		--border-confirmation: rgba(255, 255, 255, .05);
		--border-hotkey: #1b1b1b;
		--border-hotkey-info: rgba(255, 255, 255, .12);
		--border-search-result: rgba(255, 255, 255, .12);
		--border-search-result-hover: rgba(255, 255, 255, .25);
		--border-menu-items: rgba(255, 255, 255, .5);
		--border-CoderMirror-hints: var(--border-CodeMirror);
		--border-CodeMirror: #3a3a3a;
		--border-gutters: #373737;
		--border-select: var(--border-input);
		--border-input: #454545;
		--border-checkbox-hover: #828282;
		--border-button: #333;
		--border-button-hover: #353535;
		--border-value: #686868;
		--white-200: #dadada;
		--grey-900: #9b9b9b;
		
		--cmin: hsl(0, 0%, 91%);
		--c00: hsl(0, 0%, 91%);
		--c10: hsl(0, 0%, 81%);
		--c20: hsl(0, 0%, 76%);
		--c30: hsl(0, 0%, 71%);
		--c40: hsl(0, 0%, 66%);
		--c45: hsl(0, 0%, 61%);
		--c50: hsl(0, 0%, 56%);
		--c60: hsl(0, 0%, 51%);
		--c65: hsl(0, 0%, 46%);
		--c70: hsl(0, 0%, 41%);
		--c75: hsl(0, 0%, 36%);
		--c80: hsl(0, 0%, 31%);
		--c85: hsl(0, 0%, 26%);
		--c90: hsl(0, 0%, 21%);
		--c95: hsl(0, 0%, 16%);
		--c100: hsl(0, 0%, 11%);
		--cmax: hsl(0, 0%, 11%);
		
		--border: 1px solid var(--c80);
		--red1: hsl(0, 70%, 45%);
		--hover: var(--accent-3);
		--hover-icon: var(--c10);
		--hover-disabled: var(--c40);
	}
	.CodeMirror-focused .CodeMirror-selected, .CodeMirror-selected {
		background: rgba(0, 255, 221, .25);
	}
	.cm-s-default .cm-builtin {
		color: #9d26ff;
	}
	.cm-s-default .cm-atom {
		color: #9687ff;
	}
	.cm-s-default .cm-qualifier, .cm-s-default .cm-meta {
		color: #aaa;
	}
	.cm-s-default .cm-variable-2 {
		color: #0080ff;
	}
	.cm-s-default .cm-def, .cm-s-default .cm-attribute {
		color: #00d5ff;
	}
	.cm-s-default .cm-keyword {
		color: #df00ff;
	}
	.cm-s-default .cm-number {
		color: #20b77b;
	}
	.cm-s-default .cm-tag {
		color: #1bbd00;
	}
	.cm-s-default .cm-variable-3, .cm-s-default .cm-type {
		color: #00b974;
	}


	body {
		background-color: var(--bg-body);
		color: var(--white-200);
	}
	#header {
		background-color: var(--bg-header);
		border: none;
	}
	button, #popup-options button {
		background-color: var(--bg-button);
		background-image: var(--bg-button-image);
		border-radius: 10px;
		padding: 9px;
		transition: all .18s cubic-bezier(0.45, 0.05, 0.55, 0.95);
		border-color: var(--border-button);
		color: var(--white-200);
	}
	#popup-options button {
		height: auto;
	}
	button:not([disabled]):hover, button:not(:disabled):hover, #popup-options button:hover {
		background-color: var(--bg-button);
		background-image: var(--bg-button-hover);
		border-color: var(--border-button-hover);
	}
	.svg-icon:hover, .svg-icon.info, .svg-icon.settings {
		fill: #999;
	}
	.svg-icon, .svg-icon.info:hover, .svg-icon.settings:hover {
		fill: var(--white-200);
	}
	input[type="checkbox"]:not(.slider):hover {
		background-color: var(--bg-checkbox-hover);
		border-color: var(--border-checkbox-hover);
	}
	input[type="checkbox"]:not(.slider) {
		background-color: var(--bg-checkbox);
		border-radius: 3px;
		border: 2px solid #737373;
		height: 16px;
		width: 16px;
		left: -2px;
		top: -2px;
		flex: none;
	}
	#header .filter-selection label {
		padding: 0px 0px 0px 5px;
	}
	.svg-icon.checked {
		fill: var(--white-200);
	}
	input:not([type]), input[type="search"], #options [type="number"], .config-body input[type="text"], input[type=time], .style-settings .w100, input:not([type]), input[type=text], input[type=number], input[type=search] {
		background-color: var(--bg-input);
		color: var(--white-200);
		border-radius: 7px;
		padding: 5px;
		height: 25px;
		line-height: 25px;
		font-size: 13px;
		border: 1px solid var(--border-input);
	}
	.style-settings .w100 {
		overflow: resize;
	}
	#basic-info-enabled {
		top: 8px;
		left: 3px;
		position: relative;
	}
	select, option, #search-params input, #search-params select {
		background-color: var(--bg-select);
		border-color: var(--border-select);
		color: var(--white-200);
		height: 25px;
		font-size: 13px;
		border-radius: 7px;
	}
	.applies-to select:not(:focus) {
		background-color: var(--c95);
	}
	.applies-to {
		background-color: var(--c90);
	}
	.sectioned body, .blocked-info {
		background-color: var(--bg-body);
	}
	.svg-icon.select-arrow {
		fill: var(--white-200);
		top: 5px;
	}
	#help-popup {
		background-color: var(--bg-popup);
		backdrop-filter: blur(1rem);
		-webkit-backdrop-filter: blur(1rem);
		border-radius: 7px;
	}
	#help-popup .title {
		background-color: rgba(255, 255, 255, .05);
	}
	.keymap-list tr:nth-child(odd), #menu header {
		background-color: rgba(255, 255, 255, .07);
	}
	#toc li {
		transition: all .18s ease-in-out;
	}
	#toc li:hover {
		border-radius: 3px;
		padding-left: 2px;
	}
	.CodeMirror-gutters {
		background-color: var(--bg-gutters);
		border-color: var(--border-gutters);
	}
	.CodeMirror {
		background-color: var(--bg-CodeMirror);
		border-color: var(--border-CodeMirror);
		color: var(--white-200);
		border-radius: 7px;
	}
	.CodeMirror-activeline-background {
		background-color: var(--bg-activeline);
		transition: all .18s ease-in-out;
	}
	.colorview-swatch::before {
		border-color: #7e7e7e;
	}
	.CodeMirror-cursor {
		border-color: var(--white-200);
	}
	a[id="find-styles-link"], a[class="write-style-link"] {
		color: var(--white-200);
	}
	#installed {
		border-color: rgba(255, 255, 255, .25);
	}
	.entry:nth-child(even) {
		background-color: rgba(255, 255, 255, .05);
	}
	[data-ui-theme="light"] .zebra .entry:nth-child(even), [data-ui-theme="light"] .reverse-zebra .entry:nth-child(odd) {
		background: none;
	}
	.entry:nth-child(-n+10):before, .entry:nth-child(11):before {
		color: #777;
	}
	#installed .style-name .checker {
		left: 6px;
	}
	#installed .style-name .svg-icon.checked {
		left: 8px;
		top: 9px;
	}
	#installed .style-name .checker, #installed .style-name .svg-icon.checked:hover {
		background-color: var(--bg-checkbox-hover);
		border-color: var(--border-checkbox-hover);
	}
	#basic-info-enabled input {
		left: -2px;
	}
	#basic-info-enabled svg {
		top: -2px;
		left: 2px;
	}
	body[id="stylus-popup"] {
		border-radius: 7px;
		padding: 7px;
	}
	ul[class="CodeMirror-hints default"] {
		background-color: var(--bg-CodeMirror-hints);
		border-color: var(--border-CoderMirror-hints);
		backdrop-filter: blur(1rem);
		-webkit-backdrop-filter: blur(1rem);
		border-radius: 7px;
		padding: 2px;
	}
	ul[class="CodeMirror-hints default"] li {
		color: var(--white-200);
	}
	#installed .actions a svg {
		fill: var(--grey-900);
	}
	#installed .actions a:hover svg {
		fill: var(--white-200);
	}
	.menu-items-wrapper {
		background-color: var(--bg-menu-items);
		border-color: var(--border-menu-items);
		backdrop-filter: blur(1rem);
		-webkit-backdrop-filter: blur(1rem);
		border-radius: 7px;
	}
	.entry .menu-item:hover, .entry .menu-item:active {
		background-color: rgba(255, 255, 255, .1);
	}
	input#disableAll:hover {
		background-color: rgba(255, 0, 0, .38);
	}
	.unreachable .blocked-info, .block:nth-last-child(n + 2) {
		border-color: rgba(255, 255, 255, .25);
	}
	#write-for-frames {
		color: var(--grey-900);
	}
	#write-for-frames:hover, [data-ui-theme="light"] button i {
		color: var(--white-200);
	}
	#installed a:hover i, #menu .enabled, header i:hover, #pct {
		color: var(--accent-3);
	}
	.entry .menu {
		background-color: rgba(255, 255, 255, .4);
	}
	#manage\.searchMode {
		background: inherit;
	}
	.add-applies-to .svg-icon, .remove-applies-to .svg-icon {
		fill: #6b6b6b;
	}
	.add-applies-to:hover .svg-icon, .remove-applies-to...

Reviews

No reviews yet.