Dark w3schools (must also switch page Dark) [papo] by papo

/* ==UserStyle==
@name           Dark w3schools (must also switch page to Dark Mode) [papo]
@namespace      github.com/paponius/userstyles
@version        2.0.1
@description    Updated: 2025-02. Must switch site to Night Mode. Notes and feedback: https://github.com/paponius/userstyles/
@author         Papo
@homepageURL    https://github.com/paponius/UserStyles/
@supportURL     https://github.com/paponius/UserStyles/blob/main/sites/w3schools/README.md
@license        CC BY-NC-SA 4.0
@preprocessor   uso
@advanced color color-primary "Text Primary" white
@advanced color color-secondary "Text Secondary" #ccc
@advanced color color-headline "Headline" #c3e9ff
@advanced color color-heading "Headings" #678CB1
@advanced color color-link-visited "Visited link color" violet
# up to 24-04: #B62EF0
@advanced dropdown background-base "Background" {
  dft "Tiles" <<<EOT #000 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAgMAAAANjH3HAAAACVBMVEUaGhohISElJSUh9lebAAAB20lEQVRIx4XWuZXDMAwE0C0SAQtggIIYoAAEU+aKOHhYojTrYP2+QfOW/5QIJOih/q8HwF/pb3EX+UPIveYcQGgEHiu9hI+ihEc5Jz5KBIlRRRaJ1JtoSAl5Hw96hLB1/up1tnIXOck5jZQy+3iU2hAOKSH1JvwxHsp+5TLF5MOl1/MQXsVs1miXc+KDbYydyMeUgpPQreZ7fWidbNhkXNJSeAhc6qHmHD8AYovunYyEACWEbyIhNeB9fRrH3hFi0bGPLuEW7xCNaohw1vAlS805nfsrTspclB/hVdoqusg53eH7FWot+wjYpOViX8KbFFKTwlnzvj65P9H/vD0/hibYBGhPwlPO8TmxRsaxsNnrUmUXpNhirlJMPr6Hqq9k5Xn/8iYQHYIuQsWFC6Z87IOxLxHphSY4SpuiU87xJnJr5axfeRd+lnMExXpEWPpuZ1v7qZdNBOjiHzDREHX5fs5Zz9p6X0vVKbKKchlSl5rv+3p//FJ/PYvoKryI8vs+2G9lzRmnEKkh+BU8yDk515jDj/HAswu7CCz6U/Mxb/PnC9N41ndpU4hUU7JGk/C9PmP/M2xZYdvBW2PObyf1IUiIzoHmHW9yTncliYs9A9tVNppdShfgQaTLMf+j3X723tLeHgAAAABJRU5ErkJggg==) EOT;
  rb  "Rich black (FOGRA29)" <<<EOT #010B13 EOT;
  dc  "Dark charcoal" <<<EOT #333 EOT;
  cst "Custom" <<<EOT var(--p-background-base-custom, none) EOT;
  nbg "None" <<<EOT none EOT;
}
@advanced text background-base-custom "Custom Background" "#000 url(data:image/png;base64,ADD_YOUR_DATA_HERE)"
@advanced dropdown bg-options "Background image type" {
  Tiled "Tiled" <<<EOT
  background-repeat: repeat !important;
  background-size: auto !important;
  background-position: left top !important; EOT;
  Fit "Fit Window" <<<EOT
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center top !important; EOT;
}
@advanced dropdown bg-attachment "Background image attachment" {
  s   "Scroll" <<<EOT  EOT;
  f   "Fixed" <<<EOT fixed EOT;
}
@advanced dropdown background "Text Background" {
  dft "Stripes" <<<EOT #000 url(data:image/gif;base64,R0lGODlhBQAFAIAAAB0dHRERESH5BAAAAAAALAAAAAAFAAUAAAIHjAOXtqgXCgA7) EOT;
  rb  "Rich black (FOGRA29)" <<<EOT #010B13 EOT;
  cst "Custom" <<<EOT var(--p-background-custom, none) EOT;
  nbg "None" <<<EOT none EOT;
}
@advanced text background-custom "Custom Text Background" "#000 url(data:image/png;base64,ADD_YOUR_DATA_HERE)"
# --- end of common block ---


# --- optional common block ---
#advanced dropdown color-BG-ADs "ADs background color" {
  e "Shade" <<<EOT background-color: rgba(0, 0, 0, .3); !important; EOT;
  a "Transparent" <<<EOT background-color: unset !important; EOT;
  b "Black" <<<EOT background-color: black !important; EOT;
  c "as custom text background" <<<EOT background: var(--p-background, none) !important; EOT;
  d "Original" <<<EOT  EOT;
}

#var select xxx 'Get my "DeAnnoy XXX [papo]" Style to fix the annoying head bar and navi bar. https://userstyles.world/style/XXX/XXX' {
  'You need to copy the text on the left with a mouse, right click and choose open in tab. This is not a setting.': 0
}
#var select debug-test "debug" {
  '0:Normal': '',
  "1:debug. It just shows testing elements in yellow. No useful purpose for daily use.": "color: yellow !important; background: violet !important;"
}

#var color color-section "Section/Series" #C70000


==/UserStyle== */

/* Do NOT edit this file.
   It will disable updates, instead create another style to override desired rules. Or CSS variables.
   I don't use !important where not required to allow that. You need to check injection order in Stylus.

   Used background-base and bg-options from: https://github.com/StylishThemes
   This preprocessor header and global variables are common part used in most of my styles. Version: 1.4.0 2024-04
 */
@-moz-document domain("w3schools.com") {

/* tested all JavaScript pages, just randomly other. */

:root {
	--p-color-primary: /*[[color-primary]]*/;
	--p-color-secondary: /*[[color-secondary]]*/;
	--p-color-dark: #6e6e6e;
	--p-color-headline: /*[[color-headline]]*/;
	--p-color-heading: /*[[color-heading]]*/;
	--p-color-deck: #ffdede;
	--p-color-lead: #ffdede;
	--p-color-breadcrumb: hsl(140, 40%, 75%);
	--p-color-byline: #C56E6E;
/* 	--p-color-link: #00ADEE; */
	--p-color-link: #82C1FF;
	--p-color-link-visited: /*[[color-link-visited]]*/;
	--p-color-link-hover: hsl(210, 100%, 85%);
	--p-background-base: /*[[background-base]]*/ /*[[bg-attachment]]*/;
	--p-background: /*[[background]]*/;
	--p-background-base-custom: /*[[background-base-custom]]*/;
	--p-background-custom: /*[[background-custom]]*/;
}


/* need body for specificity */
body.darktheme,
body.darkpagetheme {

/* prefixing with --p- to avoid collisions with site's styles, or another UserCSS. And to easily see them in the Inspector. */

/* using site's variables */
/* :root {
	--something: var(--p-background-base);
} */


	#main > h2 {
	    color: var(--p-color-heading);
	}

/* top bar */
.top {
    /* --was-background-color: #ffffff; */
	background: var(--p-background);
}
/* search */
#top-nav-bar #tnb-google-search-container input {
	background: var(--p-background);
	box-shadow: 0 0 10px 1px #000000eb;
    color: var(--p-color-primary);
}
#top-nav-bar #tnb-google-search-container #tnb-google-search-submit-btn > svg {
  filter: invert(1);
}
.darkpagetheme #top-nav-bar .tnb-button-light:hover {
	background-color: #333 !important;
	/* --was-background-color: #f1f1f1 !important; */
}


/* --- left sidebar --- */
.w3-light-grey, .w3-hover-light-grey:hover, .w3-light-gray, .w3-hover-light-gray:hover {
    /* -was-color: #000 !important; */
	color: var(--p-color-primary) !important;
    /* --was-background-color: #f1f1f1 !important; */
	background-color: #333 !important;
}
/* unwrapped category list */
.ref_overview[style*="background-color: rgb(221, 221, 221);"] {
	background-color: #222 !important;    
}
/* selected category (yes, w3school is using !important anti-pattern */
#sidenav #leftmenuinnerinner a.overview_header.active:not(.salt) {
	background-color: #333 !important;
	/* --was-background-color: #CCCCCC !important; */
	color: white !important;
	/* --was-color: #000000 !important; */
}
/* selected sub menu */
#sidenav #leftmenuinnerinner .overview_body, #sidenav #leftmenuinnerinner .tut_overview, #sidenav #leftmenuinnerinner .ref_overview {
	background-color: black !important;
	/* --was-background-color: #fff !important; */
}

#leftmenuinnerinner:not(.huhu .huhu) {
/* 	background-color: transparent; */
 	background: var(--p-background);
	box-shadow: 0 0 10px 1px #000000eb;
	/* --was-background-color: #E7E9EB; */

	width: 90%;

/* 	padding-right: 33px;
	margin-right: 47px; */
}



/* --- features in main column --- */


/* -- Notes -- */

	.w3-info {
		/* was: light: #D9EEE1; dark: #193d3d; */
		/* --was-background-color: #04AA6D; */
		background: hsl(180, 42%, 5%);
		/* 	in orig, this border was there, but then was overruled by another rule */
		border-left: 6px solid #4CAF50;
	}

	.w3-note {
		background: hsl(60, 100%, 6%) !important;
		/* --was-background-color: #FFF4A3 !important; */
		/* 	in orig, this border was there, but then was overruled by another rule */
		border-left: 6px solid #ffeb3b;
	}
	.w3-note {
		color: var(--p-color-primary);
		/* --was-color: #000; */
	}

	/* - note warning - */
	.w3-warning {
		background-color: hsl(353, 100%, 8%) !important;
		/* --was-background-color: #FFC0C7 !important; */
		color: var(--p-color-primary);
		/* --was-color: #000; */
		/* 	in orig, this border was there, but then was overruled by another rule */
		border-left: 6px solid #f44336;
	}

	/* - exercisecontainer - */
	#exercisecontainer {
		background-color: hsl(218, 23%, 11%);
		/* --was-background-color: #2D3748; */
	}




/* table */
table.browserref th {
	border: 1px solid #d4d4d4;
    /* --was-background-color: #ffffff; */
	background-color: #777;
    /* --was-color: #555555; */
    /* --was-font-weight: normal; */
    font-weight: bold;
    color: #fff;
}
table.browserref tr:nth-child(2n),
.w3-table-all tr:nth-child(2n) {
    /* --was-background-color: #F1F1F1; */
	background-color: #333;
}
table.browserref tr:nth-child(2n+1),
.w3-table-all tr:nth-child(2n+1) {
    /* --was-background-color: #ffffff; */
	background-color: black;
}

/* table 2 */
.ws-table-all tr:nth-child(2n+1) {
	background-color: black;
	/* --was-background-color: #fff; */
}
.ws-table-all tr:nth-child(2n) {
	background-color: #333;
	/* --was-background-color: #E7E9EB; */
}


/* code */
.w3-code {
	background-color: black;
	color: white;
}
.w3-code span[style="color:mediumblue"] {
	color: #6262ff !important;
}
.w3-code span[style="color:black"] {
	color: red !important;
}
	/* - box example - */
	.w3-example {
		/* --was-background-color: #f1f1f1; */
		background-color: #222;
	/* 	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important; */
	/* 	box-shadow: 0 2px 4px 0 rgba(255,255,255,0.16),0 2px 10px 0 rgba(255,255,255,0.12) !important; */
		box-shadow: 0 0 10px 1px #000000eb !important;
	}

	/* - bad - */
	.w3-pale-red, .w3-hover-pale-red:hover {
		/* --was-background-color: #FFC0C7 !important; */
		background-color: hsl(353, 100%, 8%) !important;
		color: var(--p-color-primary) !important;
		/* --was-color: #000 !important; */
	}


	/* 	"Operator precedence" table */
	.w3-pale-yellow, .w3-hover-pale-yellow:hover {
		color: var(--p-color-primary) !important;
		/* --was-color: #000 !important; */
		/* --was-background-color: #ffffcc !important; */
		background-color: ...