Neon Dystopia Theme
rating: +56+x

What is this?

The Neon Dystopia theme is a dark theme for BHL visually based off of the cyberpunk aesthetic and the 1982 movie Blade Runner. You can use it for any article… but preferably one with an uncaring, overpopulated, yet bleeding-edge technological advances vibe. Or if you like Blade Runner.


Theme Colors

Neon Blue--neon-blue(15, 227, 229)
Tears In Rain--tears-n-rain(73, 177, 178)
{$color3-name}{$color3-variable}{$color3-info}
{$color4-name}{$color4-variable}{$color4-info}
{$color5-name}{$color5-variable}{$color5-info}
{$color6-name}{$color6-variable}{$color6-info}
Deckard's Red--deckard-red(191, 0, 0)
Blade Runner--blade-runner(163, 0, 0)
Replicant, Retired--retired-replicant(77, 22, 25)
Display Light--display-green(23, 230, 16)
Display Medium--tyrell-green(7, 53, 0)
Display Dark--display-dark(1, 18, 6)
{$subcolor7-name}{$subcolor7-variable}{$subcolor7-info}
{$subcolor8-name}{$subcolor8-variable}{$subcolor8-info}
{$subcolor9-name}{$subcolor9-variable}{$subcolor9-info}
{$subcolor10-name}{$subcolor10-variable}{$subcolor10-info}
{$subcolor11-name}{$subcolor11-variable}{$subcolor11-info}
{$subcolor12-name}{$subcolor12-variable}{$subcolor12-info}

foundation-text.png

Foundation Remote Access Database (FRAD) Logo


ALTERNATE COLOR SCHEMES

spread.png

BLUE - GREEN - YELLOW - RED VARIATIONS

Note: This is a Black Highlighter based theme. You will need to import the Black Highlighter theme as well in order to use this theme. To learn more go here.

On any wiki:

[[include :scp-wiki:theme:black-highlighter-theme]]
[[include :scp-wiki:component:toggle-sidebar-bhl]]
[[include :scp-wiki:theme:cyberpunk theme-number=1]]


Choosing Color Variations


Change the theme-number include to your desired color.

  • For BLUE: [[include :scp-wiki:theme:cyberpunk theme-number=1]]
  • For GREEN: [[include :scp-wiki:theme:cyberpunk theme-number=2]]
  • For YELLOW: [[include :scp-wiki:theme:cyberpunk theme-number=3]]
  • For RED: [[include :scp-wiki:theme:cyberpunk theme-number=4]]


Examples

A horizontal rule can be created with 5 hyphens "-----" and extends across the whole page if it's not placed inside anything (eg a blockquote). The lines separating sections of this document are horizontal rules.


Titles can be created by putting between one and six plus "+" at the start of the line

Just use your imagination and pretend there's `Lorem Ipsum` here.


This is a blockquote, created by putting "> " at the start of each line.
More text


That's a horizontal rule

Nested blockquotes

And another1


This is a table
You should know how to make these
already

With Special Divs

Alternate Blockquote

She's the one they call a digital reaper?


Yup. That's Piri Vamuletto, in the flesh.


Console/Terminal Div


FOUNDATION
mobile access terminal


department terminals provided and sponsored by:

▄▀█ █▀▀ █▀█ █▀█ █░█ █▀▀ █░░   ▀█▀ █▀▀ █▀▀ █▄█
█▀█ █▄▄ █▀▄ █▄█ ▀▄▀ ██▄ █▄▄   ░█░ ██▄ █▄▄ █▀█
bringing humanity through technology™
> ENTER LOGIN CREDENTIALS:
/useraccount VAMULETTO P. liveinthedreamofsalome
>
Welcome, employee [ #F21E - PIRI VAMULETTO ]. You have [ 0 ] pending message(s).
/open file VIDEO LOG
> LOADING FILE… LOADING FILE…
> FILE [ VIDEO LOG ] LOADED.
> CLASS - [ A ] CLEARANCE REQUIRED.
> OPEN FILE (Y/N)?
/Y
> OPENING FILE…
> DISPLAYING ON MAIN SCREEN…
> FILE OPENED.

Audio/Video Log Format


Video Log - New Schmeling, 1982

> RECORDING STARTED <

Piri takes a sudden left into a nearby alleyway. The man following her speeds his pace up and turns into the alley. Doesn't make it more than a couple of steps before he finds his face in the barrel of a Webley Mk. VI revolver.

He puts his hands up.

VAMULETTO Talk.
ALEXANDER If it isn't little miss digital reaper herself.
Piri cocks the hammer back. J. Alexander smiles.
ALEXANDER I can assure you that shooting me would be a mistake.
VAMULETTO Sure doesn't look that way from my perspective.
ALEXANDER Go on, then. Shoot an executive of Quintilium Corporation and there's nothing your puny little organization can do to stop the full extent of our lawyers.
Piri holsters her revolver as James puts his hands back to his sides.
ALEXANDER That's more like it.
VAMULETTO For the record, I would have shot you; I just don't think you'd have done a lot of explaining while you're bleeding out.
James reaches into his pocket. Pulls out and tosses an MO disk to Piri, who catches it with a free hand.
ALEXANDER You might find what's on that disk useful to you… or your organization, should you choose to share it with them.
VAMULETTO If it isn't a murder drive. What do you need me for? You've got all the spec'd netrigs and enough augies to start your own factory. Do it yourself.
James laughs.
ALEXANDER You'll know once you see what's on it. Good day, miss digital reaper.

He walks out of the alley at a brisk pace. Piri flips the MO Disk over and reads a label on the side, "NUYTENS PROJEKT."

She attempts to run out after James, but he's disappeared into the hubbub of downtown New Schmeling.



The Header Image fonts are Strasua (top) and Element (bottom).

The Title font is Unicephalon.
The Body font is Jost.
The mono font is Bedstead.

ADDITIONAL FONTS INCLUDE:
Liquid Crystal for display/LED text.
Element for display logos and header text.
SV Basic Manual for dialogue tables.
Connection for terminals/consoles.


[[iftags +component]]

rating: +56+x

What this does

Makes the sidebar hidden by default and toggled via a corner button, similar to the mobile version of the site.


How to use

1. Copy code below.

2. Paste in article after Black Highlighter and any other Theme include.

[[include :scp-wiki:component:toggle-sidebar-bhl]]

3. (Optional) Style toggle button if using a theme.

There are also 5 CSS Vars available to style the button if needed.
For the colors, it is heavily suggested that you use the available BHL Color Vars which can be found here.

:root {
--toggle-button-bg: hex/rgb/hsl color;
--toggle-border-color: hex/rgb/hsl color;
--toggle-border-width: px/rem/em;
--toggle-icon-color: hex/rgb/hsl color;
--toggle-roundness: percentage;
}


[[/iftags]]

[[div [[iftags -component]]style="display: none"[[/iftags]]]]

/*
   Neon Dystopia Theme
   [2021 Wikidot Theme]
   by JackalRelated
       inspired by Blade Runner (1982)
*/
 
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&family=Jost&display=swap');
@import url('https://scp-wiki.wdfiles.com/local--files/theme:cyberpunk/stylesheet.css');
@import url('https://fontlibrary.org//face/connection');
 
:root {
   --theme-base: "black-highlighter";
   --theme-id: "cyberpunk";
   --theme-name: "Neon Dystopia";
 
   --header-title: "FOUNDATION";
   --header-subtitle: "REMOTE ACCESS DATABASE";
 
   --body-font: 'Jost', sans-serif;
   --header-font: 'Element', sans-serif;
   --title-font: 'Unicephalon', serif;
   --mono-font: 'Bedstead', monospace;
   --terminal-font: 'ConnectionRegular', monospace;
   --display-font: 'Liquid Crystal', sans-serif;
   --dialogue-font: 'SV Basic Manual', sans-serif;
   --UI-font: var(--dialogue-font);
 
/* WHITE - GREY */
   --electric-sheep: 230, 255, 255;
   --gaff-black: 1, 1, 1;
 
/* BLUE */
   --neon-blue: 15, 227, 229;
   --tears-n-rain: 73, 177, 178;
   --passive-blue: 65, 134, 155;
   --pkd-blaster: 15, 12, 36;
   --lapd-badge: 9, 8, 19;
 
/* GREEN */
   --display-green: 23, 230, 16;
   --display-inter: 0, 145, 9;
   --tyrell-green:  7, 53, 0;
   --display-dark: 1, 18, 6;
 
/* RED */
   --deckard-red: 191, 0, 0;
   --blade-runner: 163, 0, 0;
   --retired-replicant: 77, 22, 25;
 
/* THEME ASSIGNMENTS */
   --white-monochrome: var(--lapd-badge);
   --pale-gray-monochrome: var(--display-dark);
   --light-gray-monochrome: var(--retired-replicant);
   --gray-monochrome: var(--gaff-black);
   --dark-gray-monochrome: var(--lapd-badge);
   --black-monochrome: var(--electric-sheep);
   --pale-accent: var(--tears-n-rain);
   --bright-accent: var(--deckard-red);
   --medium-accent: var(--blade-runner);
   --dark-accent: var(--retired-replicant);
 
   --swatch-topmenu-bg-color: var(--gaff-black);
   --swatch-topmenu-border-color: var(--tyrell-green);
 
   --swatch-background: var(--lapd-badge);
   --swatch-primary: var(--display-green);
   --swatch-primary-darker: var(--tyrell-green);
   --swatch-primary-darkest: var(--display-dark);
   --swatch-border-color: 0, 0, 0, 0;
 
   --swatch-text-dark: var(--gaff-black);
   --swatch-text-light: var(--electric-sheep);
   --swatch-text-general: var(--swatch-text-light);
   --swatch-important-text: var(--bright-accent);
 
   --swatch-menubg-color: var(--display-dark);
   --swatch-menubg-light-color: var(--);
   --swatch-menubg-medium-color: var(--tyrell-green);
   --swatch-menubg-medium-dark-color: var(--gaff-black);
   --swatch-menubg-dark-color: var(--);
 
   --swatch-menutxt-light-color: var(--electric-sheep);
   --swatch-menutxt-dark-color: var(--gaff-black);
   --swatch-menutxt-general-color: var(--swatch-menutxt-light-color);
 
   --swatch-text-secondary-color: var(--gaff-black);
   --swatch-text-tertiary-color: var(--electric-sheep);
 
   --header-gradient-color-top: var(--gaff-black);
   --header-gradient-color-middle: var(--gaff-black);
   --header-gradient-color-bottom: var(--gaff-black);
   --background-gradient-distance: 0rem;
   --diagonal-stripes: linear-gradient(transparent 0);
 
   --sidebar-transition-timing: 0.8s ease-in-out 0.1s;
 
   --hover-link-color: var(--neon-blue);
   --newpage-color: var(--neon-blue);
   --link-color: var(--tears-n-rain);
   --visited-link-color: var(--tears-n-rain);
 
   --rating-module-bg-color: var(--lapd-badge);
   --rating-module-button-cancel-color: var(--neon-blue);
   --rating-module-bottom-border-color: var(--neon-blue);
 
   --toggle-button-bg: rgba(var(--gaff-black), 1);
   --toggle-border-color: rgb(var(--tyrell-green));
   --toggle-icon-color: rgb(var(--display-green));
   --toggle-roundness: 0%;
}
 
/* HEADER AND TOPBAR */
 
.page-rate-widget-box .rate-points {
   font-size: 1em;
   line-height: calc(var(--rating-module-height)*1.25);
}
 
#page-title {
  color: rgb(var(--neon-blue));
  border-bottom: .0625rem solid rgb(var(--neon-blue));
}
 
#page-title:after, .meta-title:after {
   height: 0;
}
 
#header {
   --swatch-headerh1-color: var(--deckard-red);
   --swatch-headerh2-color: var(--deckard-red);
 
   --search-icon-color: var(--display-green);
   --search-icon-hover-color: var(--gaff-black);
   --search-icon-hover-bg-color: var(--display-green);
   --search-textbox-text-color: 0,0,0,0;
 
   --search-icon-focus-color: var(--display-green);
   --search-icon-focus-bg-color: var(--display-green);
   --search-focus-outline-color: var(--display-green);
   --search-focus-textbox-bg-color: var(--display-green);
   --search-focus-textbox-text-color: var(--gaff-black);
 
   --login-line-divider-color: var(--display-inter);
   --login-username-color: var(--display-green);
   --login-myaccount-color: var(--display-green);
   --login-myaccount-underline-color: var(--display-inter);
   --login-myaccount-hover-color: var(--gaff-black);
   --login-myaccount-hover-bg-color: var(--display-green);
   --login-arrow-color: var(--display-green);
 
   --login-dropdown-bg-color: var(--display-dark);
   --login-dropdown-bg-image: var(--display-dark);
   --login-dropdown-border-color: var(--display-green), 0.5;
   --login-dropdown-text-color: var(--display-inter);
   --login-dropdown-text-hover-color: var(--display-green);
   --login-dropdown-bg-hover-color: var(--display-dark);
 
   --login-mobile-icon-color: var(--display-green);
   --login-mobile-icon-hover-color: var(--gaff-black);
   --login-mobile-icon-hover-bg-color: var(--display-green);
 
   background-image: none;
}
 
#header h1 {
  width: 100%;
  height: var(--header-height-on-desktop);
  z-index: -9999;
}
 
#header h1 a {
  text-shadow: none;
  height: 100%;
  width: 100%;
  color: transparent;
  background-image: url(https://scp-wiki.wdfiles.com/local--files/theme:cyberpunk/foundation-text.png);
  margin: 0;
  padding: 0;
  background-size: auto calc(var(--header-height-on-desktop) - 1rem);
  background-repeat: no-repeat;
  background-position: left center;
}
 
@media only screen and (max-width: 768px) {
       #header h1 a {
            background-size: auto calc(var(--header-height-on-desktop) - 3rem);
            background-position: center center;
      }
}
 
#header h1 a::before {
  text-shadow: none;
  color: transparent;
}
 
#header h2 {
  display: none;
}
 
 #extra-div-1 {
   height: var(--header-height-on-desktop);
   width: 100%;
   position: absolute;
   top: 0;
   left: 0;
   pointer-events: none;
   background-image: url(https://scp-wiki.wdfiles.com/local--files/theme:cyberpunk/grid.png);
   background-size: calc(var(--header-height-on-desktop) * 4);
}
 
#top-bar {
   --topmenu-category-color: var(--display-inter);
   --topmenu-category-hover-color: var(--display-green);
   --topmenu-hover-border-color: var(--display-green);
 
   --mobile-topmenu-sidebar-button-color: var(--display-green);
 
   --dropdown-bg-color: var(--display-dark), 0.9;
   --dropdown-border-color: var(--display-green), 0.5;
   --dropdown-links-color: var(--display-inter);
   --dropdown-links-hover-color: var(--display-green);
   --dropdown-links-hover-bg-color: var(--disaply-dark);
}
 
/* BREADCRUMBS */
 
#breadcrumbs a:hover,
.pseudocrumbs a:hover,
#breadcrumbs a:active,
.pseudocrumbs a:active,
#breadcrumbs a:focus-within,
.pseudocrumbs a:focus-within {
    color: rgb(var(--neon-blue));
    text-decoration: none;
}
 
/* SCROLLBAR AND SIDEBAR */
 
html,body {
   scrollbar-color:
     rgb(var(--display-dark))
     rgb(var(--tyrell-green));
}
 
html::-webkit-scrollbar,
body::-webkit-scrollbar {
   width: 18px;
   background: #transparent;
}
 
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
   background: rgb(var(--display-dark));
}
 
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
   background: rgb(var(--tyrell-green));
   border: rgb(var(--tyrell-green)) 1px solid;
   border-radius: 0px;
}
 
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
   background: rgb(var(--display-green));
}
 
#side-bar {
   --sidebar-bg-color: var(--display-dark);
   --sidebar-resources-bg-color: var(--tyrell-green), 0.25;
   --sidebar-media-bg-color: var(---tyrell-green), 0.25;
 
   --sideblock-heading-border-color: var(--display-green);
   --sideblock-heading-text-color: var(--display-green);
 
   --sidebar-border-color: var(--swatch-border-color), 0.08;
   --sidebar-subtest-color: var(--swatch-primary);
 
   --sidebar-links-text: var(--display-inter);
   --sidebar-links-hover-bg-color: var(--display-green);
   --sidebar-links-hover-text-color: var(--gaff-black);
}
 
hr {
   background-color: rgb(var(--neon-blue));
   border-top: .0625rem solid rgb(var(--neon-blue));
}
 
.code {
   background-color: rgb(var(--scissor-blades));
}
 
blockquote, div.blockquote {
    border: .0625rem dashed rgba(var(--display-green),1);
    color: rgb(var(--display-green));
}
 
blockquote hr, div.blockquote hr {
   background-color: rgb(var(--display-green));
   border-top: .0625rem solid rgb(var(--display-green));
}
 
.code {
    background-color: rgb(var(--electric-sheep));
}
 
.scp-image-block {
   box-shadow: none;
   border: none;
}
 
.scp-image-block .scp-image-caption {
    border-top: .0625rem outset rgba(var(--display-green),1);
    background-color: rgb(var(--display-dark));
    color: rgb(var(--display-green));
}
 
/* MAIN CONTENT */
 
.yui-navset .yui-nav a:hover, .yui-navset .yui-nav a:focus {
   filter: hue-rotate(0deg);
}
 
#main-content {
   --tabs-bg: var(--pkd-blaster);
   --tabs-txt: var(--tears-n-rain);
   --tabs-hover-bg: var(--neon-blue);
   --tabs-hover-txt: var(--pkd-blaster);
   --tabs-selected-bg: var(--neon-blue);
   --tabs-selected-txt: var(--lapd-badge);
   --tabs-selected-outline: var(--neon-blue);
   --tabs-bottom-border-color: var(--neon-blue);
 
   --tabs-content-bg-color: var(--pkd-blaster), 0.25;
   --tabs-content-border-color: var(--neon-blue);
 
   --tables-header-bg: var(--pkd-blaster);
   --tables-header-txt: var(--tears-n-rain);
   --tables-border: var(--neon-blue);
   --tables-body-txt: var(--passive-blue);
   --tables-body-bg: var(--pkd-blaster), 0.50;
 
   --toc-directory-lines-color: var(--neon-blue);
   --toc-header-bg-color: var(--passive-blue);
   --toc-header-text-color: var(--lapd-badge);
   --toc-header-text-hover-color: var(--neon-blue);
   --toc-body-bg-color: var(--pkd-blaster);
   --toc-body-link-color: var(--tears-n-rain);
   --toc-body-link-hover-color: var(--neon-blue);
   --toc-body-hover-arrow-color: var(--neon-blue);
 
   --ui-icon-color: var(--display-inter);
   --ui-icon-bg: var(--display-dark);
   --ui-icon-hover-color: var(--display-green);
   --ui-icon-hover-bg: var(--tyrell-green);
 
   --blockquote-bg-color: var(--display-dark), 0.5;
   --blockquote-colorbar-color: var(--display-green), 1;
 
   --footnotes-footer-colorbar-color: var(--tears-n-rain);
   --footnotes-footer-title-bg-color: var(--tears-n-rain);
   --footnotes-footer-title-text-color: var(--lapd-badge);
   --footnotes-footer-bg-color: var(--pkd-blaster);
 
   --pagetags-title-bg: var(--neon-blue);
   --pagetags-title-text: var(--lapd-badge);
   --pagetags-text-color: var(--display-inter);
   --pagetags-text-hover-color: var(--gaff-black);
   --pagetags-text-hover-bg-color: var(--display-green);
}
 
table.wiki-content-table th {
   font-family: var(--display-font);
}
 
:root {
   --hoverblock-header-bg: var(--neon-blue);
   --hoverblock-header-txt: var(--lapd-badge);
   --hoverblock-footer-txt: var(--electric-sheep);
   --hoverblock-bg: var(--pkd-blaster);
 
   --ui-button-bg: var(--display-dark);
   --ui-button-txt: var(--display-inter);
   --ui-button-hover-bg: var(--tyrell-green);
   --ui-button-hover-outline: var(--display-green);
   --ui-button-hover-txt: var(--display-green);
 
   --modal-bg: var(--display-dark);
   --modal-body-text: var(--display-green);
   --modal-body-header-txt: var(--blade-runner); 
   --modal-header-bg: var(--blade-runner);
   --modal-header-stripe: var(--deckard-red);
   --modal-header-txt: var(--display-dark);
 }
 
/* FOOTERS AND BELOW */
 
.page-source {
   background: rgb(var(--electric-sheep));
   font-family: var(--mono-font);
   color: rgb(var(--gaff-black));
}
 
.content-panel {
   --box-shadow-3: rgb(var(--neon-blue,170,170,170));
}
 
#lock-info, div.note, input.checkbox, input.text, textarea {
   font-family: var(--body-font);
}
 
#footer {
   --footer-bg-color: var(--display-inter);
   --footer-text-color: var(--gaff-black);
   --footer-link-color: var(--gaff-black);
   --footer-link-hover-color: var(--gaff-black);
   --footer-link-hover-bg-color: var(--display-green);
}
 
#license-area {
   --license-bg-color: var(--lapd-badge);
   --license-text-color: var(--display-inter);
   --license-link-color: var(--display-green);
   --license-link-hover-color: var(--gaff-black);
   --license-link-hover-bg-color: var(--display-green);
}
 
/* TOGGLE SIDEBAR (BHL) CHANGES */
 
@supports((display: -ms-grid) or (display: grid)) {
       @media only screen and (min-width: 769px) {
           #main-content::before {
               background: rgba(var(--display-dark), .55) 1px 1px repeat;
           }
        }
    }
 
/* SPECIAL DIVS */
 
.console {
    padding: 5px 5px 5px 5px;
    margin-bottom:10px;
    width: 97.7%;
    font-family: var(--terminal-font);
    font-size: 1.1em;
    background-color: rgb(var(--display-dark));
    border: 3px dashed rgb(var(--display-green));
    color: rgb(var(--display-inter));
}
 
.console hr, .console-header hr {
    background: linear-gradient(10deg, rgba(var(--display-green), 0.25) 0%, rgba(var(--display-green), 1) 50%, rgba(var(--display-green), 0.25) 100%);
   border-top: none;
}
 
.console-header {
    font-family: var(--header-font);
    text-align: center;
    color: rgb(var(--display-green));
}
 
table.terminal {
    border-collapse: collapse;
}
 
table.terminal th {
    font-weight: bold;
    border: none;
    padding: 0em 0em 0 0;
}
 
table.terminal td {
    padding: 0em 0 0 1em;
}
 
.logs {
    padding: 5px 5px 5px 5px;
    margin-bottom:10px;
    width: 97.7%;
    font-family: var(--display-font);
    font-size: 1.1em;
    background-color: rgb(var(--lapd-badge));
    border: 3px solid rgb(var(--neon-blue));
    color: rgb(var(--passive-blue));
}
 
.logs-header {
    text-align: center;
    color: rgb(var(--neon-blue));
}
 
.logs hr {
    background: linear-gradient(10deg, rgba(var(--neon-blue), 0.25) 0%, rgba(var(--neon-blue), 1) 50%, rgba(var(--neon-blue), 0.25) 100%);
}
 
table.dialog {
    border-collapse: collapse;
}
 
table.dialog th {
    font-family: var(--display-font);
    font-size: 1.1em;
    border-right: 1px solid rgb(var(--neon-blue));
    color: rgb(var(--neon-blue));
    padding:  0.9em 1em 0 1em;
}
 
table.dialog td {
    font-family: var(--dialogue-font);
    font-size: 1.15em;
    padding: 1em 0 0 0.85em;
}
 
table.dialog td.active {
    color: rgb(var(--neon-blue));
}
 
.blokquote-alt {
   margin: .5em 1.25rem;
   padding: .825em 1.25em;
   border: .0625rem dashed rgba(var(--neon-blue),1);
   color: rgb(var(--neon-blue));
   background-color: rgb(var(--pkd-blaster);
}
 
.blokquote-alt hr {
   background-color: rgb(var(--neon-blue));
   border-top: .0625rem solid rgb(var(--neon-blue));
}
 
/* SIDEBAR SCROLLBAR */
 
#side-bar:hover,
#side-bar:active {
    scrollbar-color:
     rgb(var(--display-dark)
     rgb(var(--tyrell-green), 1);
     border-color: rgba(var(--tyrell-green), 1);
}
 
#side-bar::-webkit-scrollbar-track,
#side-bar:hover::-webkit-scrollbar-track {
   background-color: rgb(var(--display-dark);
}
 
#side-bar::-webkit-scrollbar-thumb {
   background-color: rgb(var(--tyrell-green));
}
 
#side-bar:hover::-webkit-scrollbar-thumb {
   background-color: rgb(var(--display-green));
}
 
/* END */

GREEN VARIANT

:root {
/*GREEN (AGAIN) */
   --electric-sheep: 233, 255, 230;
 
   --neon-blue: 36, 229, 15;
   --tears-n-rain: 89, 178, 73;
   --passive-blue: 71, 155, 65;
   --pkd-blaster: 16, 36, 12;
   --lapd-badge: 1, 1, 1;
}
 
#main-content {
   --pagetags-title-bg: var(--display-green);
}

YELLOW VARIANT

:root {
/* YELLOW */
   --electric-sheep: 255, 255, 230;
 
   --neon-blue: 229, 227, 15;
   --tears-n-rain: 178, 150, 73;
   --passive-blue: 155, 134, 65;
   --pkd-blaster: 36, 29, 12;
   --lapd-badge: 10, 8, 4;
}
 
#main-content {
   --pagetags-title-bg: var(--display-green);
}

RED VARIANT

:root {
/* RED (AGAIN) */
   --electric-sheep: 255, 237, 237;
 
   --neon-blue: 229, 15, 15;
   --tears-n-rain: 209, 48, 48;
   --passive-blue: 195, 111, 111;
   --pkd-blaster: 36, 12, 12;
   --lapd-badge: 18, 1, 1;
 
#main-content {
   --pagetags-title-bg: var(--display-green);
}
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License