Style Editor [Chrome] - Dark Theme [Updated][Customizable] by Nick2bad4u

/* ==UserStyle==
@name         Style Editor [Chrome] - Dark Theme [Updated][Customizable]
@namespace    typpi.online
@author       Paul Stevenson - [Updated by Nick2bad4u]
@description  A dark theme for the Stylish style editor chrome extension. It also includes a code section for recoloring the default syntax highlighting theme.
@version      1.1.1
@license      CC-BY-SA-4.0
@supportURL   https://github.com/Nick2bad4u/UserStyles/issues
@homepageURL  https://github.com/Nick2bad4u/UserStyles

@var color bg-dark "Background Dark" #111111
@var color bg-light "Background Light" #ffffff
@var color bg-accent "Background Accent" #222222
@var color bg-popup "Background Popup" #000000cc
@var color text-primary "Text Primary" #ccccff
@var color text-secondary "Text Secondary" #9999ff
@var color text-highlight "Text Highlight" #00ccff
@var color text-hover "Text Hover" #99ffff
@var color selected "Selected Text" #000000
@var color input-border "Input Border" #0099ff
@var color input-bg "Input Background" #000000
@var color input-text "Input Text" #00ffff
@var color button-border "Button Border" #5555ff
@var color button-bg "Button Background" #222222
@var color button-text "Button Text" #9999ff
@var color button-hover-bg "Button Hover Background" #000000
@var color button-hover-text "Button Hover Text" #99ccff
@var color scrollbar-thumb "Scrollbar Thumb" #0064ffcc
@var color scrollbar-thumb-inactive "Scrollbar Thumb Inactive" #0064ff66
@var color scrollbar-track "Scrollbar Track" #0000004d
@var color gutter-border "Gutter Border" #0099ff
@var color gutter-bg "Gutter Background" #000000
@var color line-number "Line Number" #5599ff
@var color cursor "Cursor" #ffffff
@var color secondary-cursor "Secondary Cursor" #c0c0c0
@var color matching-bracket "Matching Bracket" #fdff00
@var color nonmatching-bracket "Nonmatching Bracket" #ff7171
@var color activeline-bg "Active Line Background" #0c0c0c
@var color keyword "Keyword" #ffac3f
@var color atom "Atom" #9b8dff
@var color number "Number" #00dfff
@var color definition "Definition" #9999ff
@var color variable "Variable" #ff00ff
@var color variable-2 "Variable 2" #62b0ff
@var color variable-3 "Variable 3" #88ffd3
@var color comment "Comment" #00ff2e
@var color string "String" #ff9500
@var color string-2 "String 2" #ff5500
@var color meta "Meta" #c3c3c3
@var color builtin "Builtin" #97b6ff
@var color tag "Tag" #5599ff
@var color attribute "Attribute" #7d7dff
@var color error "Error" #ff7474
@var color highlight-match "Highlight Match" #ff96004d
@var color bottom-border "Bottom Border" #ff9900
@var color green1 "Green 1" #00ff00
@var color green2 "Green 2" #00ff0080
==/UserStyle== */
@-moz-document regexp("chrome-extension://fjnbnpbmkenffdnngjfgmeleoegfcffe/.*"),
regexp("chrome-extension://clngdbkpkpeebahjckkjfobafhncgmne/.*")
{
	:root
	{
		/* Background Colors */
		--bg-dark: var(bg-dark);
		--bg-light: var(bg-light);
		--bg-accent: var(bg-accent);
		--bg-popup: var(bg-popup);

		/* Text Colors */
		--text-primary: var(text-primary);
		--text-secondary: var(text-secondary);
		--text-highlight: var(text-highlight);
		--text-hover: var(text-hover);
		--text-selected: var(--text-selected);

		/* Input Colors */
		--input-border: var(input-border);
		--input-bg: var(input-bg);
		--input-text: var(input-text);

		/* Button Colors */
		--button-border: var(button-border);
		--button-bg: var(button-bg);
		--button-text: var(button-text);
		--button-hover-bg: var(button-hover-bg);
		--button-hover-text: var(button-hover-text);

		/* Scrollbar Colors */
		--scrollbar-thumb: var(scrollbar-thumb);
		--scrollbar-thumb-inactive: var( scrollbar-thumb-inactive);
		--scrollbar-track: var(scrollbar-track);

		/* Gutter Colors */
		--gutter-border: var(gutter-border);
		--gutter-bg: var(gutter-bg);
		--line-number: var(line-number);

		/* Cursor and Bracket Colors */
		--cursor: var(cursor);
		--secondary-cursor: var(secondary-cursor);
		--matching-bracket: var(matching-bracket);
		--nonmatching-bracket: var(nonmatching-bracket);
		--activeline-bg: var(activeline-bg);

		/* Syntax Highlighting */
		--keyword: var(keyword);
		--atom: var(atom);
		--number: var(number);
		--definition: var(definition);
		--variable: var(variable);
		--variable-2: var(variable-2);
		--variable-3: var(variable-3);
		--comment: var(comment);
		--string: var(string);
		--string-2: var(string-2);
		--meta: var(meta);
		--builtin: var(builtin);
		--tag: var(tag);
		--attribute: var(attribute);
		--error: var(error);
		--highlight-match: var(highlight-match);
		--bottom-border: var(bottom-border);
		--green1: var(green1);
		--green2: var(green2);
	}

	body
	{
		background: var(--bg-dark);
		color: var(--text-primary);
	}

	#stylish-popup
	{
		background: var(--bg-light);
		color: var(--input-bg);
	}

	a,
	a:visited,
	a:active
	{
		color: var(--text-highlight);
	}

	a:hover
	{
		color: var(--text-hover);
	}

	input,
	#name,
	.applies-value,
	select
	{
		border-color: var(--input-border);
		background: var(--input-bg);
		color: var(--input-text);
	}

	button
	{
		border-color: var(--button-border);
		background: var(--button-bg);
		color: var(--button-text);
	}

	button:hover
	{
		background: var(--button-hover-bg);
		color: var(--button-hover-text);
	}

	::-webkit-scrollbar
	{
		width: 10px;
	}

	::-webkit-scrollbar-track
	{
		-webkit-box-shadow: inset 0 0 6px var(--scrollbar-track);
		background: var(--scrollbar-track);
	}

	::-webkit-scrollbar-thumb
	{
		-webkit-box-shadow: inset 0 0 6px var(--scrollbar-thumb);
		background: var(--scrollbar-thumb);
	}

	::-webkit-scrollbar-thumb:window-inactive
	{
		background: var(--scrollbar-thumb-inactive);
	}
}

/* Syntax highlighting with variables */
@-moz-document regexp("chrome-extension://fjnbnpbmkenffdnngjfgmeleoegfcffe/.*")
{
	.cm-s-default .cm-keyword
	{
		color: var(--keyword);
	}

	.cm-s-default .cm-atom
	{
		color: var(--atom);
	}

	.cm-s-default .cm-number
	{
		color: var(--number);
	}

	.cm-s-default .cm-def
	{
		color: var(--definition);
	}

	.cm-s-default .cm-variable
	{
		color: var(--variable);
	}

	.cm-s-default .cm-variable-2
	{
		color: var(--variable-2);
	}

	.cm-s-default .cm-variable-3
	{
		color: var(--variable-3);
	}

	.cm-s-default .cm-comment
	{
		color: var(--comment);
	}

	.cm-s-default .cm-string
	{
		color: var(--string);
	}

	.cm-s-default .cm-string-2
	{
		color: var(--string-2);
	}

	.cm-s-default .cm-meta
	{
		color: var(--meta);
	}

	.cm-s-default .cm-builtin
	{
		color: var(--builtin);
	}

	.cm-s-default .cm-tag
	{
		color: var(--tag);
	}

	.cm-s-default .cm-attribute
	{
		color: var(--attribute);
	}

	.cm-s-default .cm-error
	{
		color: var(--error);
	}

	.CodeMirror-matchingbracket
	{
		color: var(--matching-bracket);
	}

	.CodeMirror-activeline-background
	{
		background: var(--activeline-bg);
	}

	.CodeMirror
	{
		background: var(--activeline-bg);
	}

	.CodeMirror-selected
	{
		background: var(--text-selected);
	}

	.CodeMirror-focused .CodeMirror-selected
	{
		background: var(--text-selected);
	}

	.CodeMirror-crosshair
	{
		cursor: crosshair;
	}

	.CodeMirror-line::selection,
	.CodeMirror-line > span::selection,
	.CodeMirror-line > span > span::selection
	{
		background: var(--input-bg);
	}

	.CodeMirror-line::selection,
	.CodeMirror-line > span::selection,
	.CodeMirror-line > span > span::selection
	{
		background: var(--input-bg);
	}

	.cm-searching
	{
		border-bottom: 1px solid var(--bottom-border);
		background: var(--green1);
		background: var(--green2);
	}
}