Neon Dystopia Theme

Link to article: Neon Dystopia Theme.

@import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/normalize.min.css");
@import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/black-highlighter.min.css");

.scp-image-block.block-right {
    background: var(--dark-gray-monochrome);
}
.scp-image-block img {
    min-width: 100%;
    border: 0.5rem solid transparent;
    box-sizing: border-box;
}

@import url(https://scp-wiki.wdfiles.com/local--code/theme%3Acyberpunk/1); /* main theme */
@import url(https://scp-wiki.wdfiles.com/local--code/theme%3Acyberpunk/{$theme-number});

```
width:100%; box-shadow:none;
```
```
width:100%;
```
```
width:100%;
```
```
width:100%; box-shadow:none;
```
```
width:100%;
```
```
width:100%;
```
```
color: rgb(var(--gaff-black));
```
```
color: rgb(var(--gaff-black));
```
```
color: rgb(var(--gaff-black));
```
```
color: rgb(var(--gaff-black));
```
```
font-family: var(--title-font);
```
```
font-family: var(--body-font);
```
```
font-family: var(--mono-font);
```
```
font-family: var(--display-font);
```
```
font-family: var(--header-font);
```
```
font-family: var(--dialogue-font);
```
```
font-family: var(--terminal-font);
```

```
blokquote-alt
```
```
scp-image-block
```
```
block-center
```
```
scp-image-caption
```
```
scp-image-block
```
```
block-center
```
```
scp-image-caption
```
```
code
```
```
blokquote-alt
```
```
blokquote-alt
```
```
code
```
```
blokquote-alt
```
```
blokquote-alt
```
```
console
```
```
console-header
```
```
terminal
```
```
code
```
```
console
```
```
console-header
```
```
terminal
```
```
console
```
```
console-header
```
```
terminal
```
```
logs
```
```
logs-header
```
```
dialog
```
```
active
```
```
active
```
```
active
```
```
active
```
```
active
```
```
active
```
```
active
```
```
active
```
```
active
```
```
active
```
```
code
```
```
logs
```
```
logs-header
```
```
dialog
```
```
active
```
```
logs
```
```
logs-header
```
```
dialog
```
```
active
```

[[iftags +theme]]
[[module CSS]]
@import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/normalize.min.css");
@import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/black-highlighter.min.css");

.scp-image-block.block-right {
    background: var(--dark-gray-monochrome);
}
.scp-image-block img {
    min-width: 100%;
    border: 0.5rem solid transparent;
    box-sizing: border-box;
}
 
[[/module]]

[[include :scp-wiki:component:interwiki-style
| priority=1
| theme=https://nu-scptheme.github.io/Black-Highlighter/css/min/normalize.min.css
]]

[[include :scp-wiki:component:interwiki-style
| priority=2
| theme=https://nu-scptheme.github.io/Black-Highlighter/css/min/black-highlighter.min.css
]]

[[>]]
[[module Rate]]
[[/>]]

-----
++ What is this?
[[div class="blokquote-alt"]]
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.
[[/div]]
----

[[=]]
+ Theme Colors
[[/=]]

[[include :scp-wiki:component:theme-squares -=-
| color1-name=Neon Blue
| color1-variable=--neon-blue
| color1-info=(15, 227, 229)
| color2-name=Tears In Rain
| color2-variable=--tears-n-rain
| color2-info=(73, 177, 178)
| color2-has-light-text=1
| subcolor1-name=Deckard's Red
| subcolor1-variable=--deckard-red
| subcolor1-info=(191, 0, 0)
| subcolor2-name=Blade Runner
| subcolor2-variable=--blade-runner
| subcolor2-info=(163, 0, 0)
| subcolor3-name=Replicant, Retired
| subcolor3-variable=--retired-replicant
| subcolor3-info=(77, 22, 25)
| subcolor3-has-light-text=1
| subcolor4-name=Display Light
| subcolor4-variable=--display-green
| subcolor4-info=(23, 230, 16)
| subcolor5-name=Display Medium
| subcolor5-variable=--tyrell-green
| subcolor5-info=(7, 53, 0)
| subcolor5-has-light-text=1
| subcolor6-name= Display Dark
| subcolor6-variable=--display-dark
| subcolor6-info=(1, 18, 6)
| subcolor6-has-light-text=1
]]

----
@@ @@
[[div class="scp-image-block block-center" style="width:100%; box-shadow:none;"]]
[[image https://scp-wiki.wdfiles.com/local--files/theme:cyberpunk/foundation-text.png style="width:100%;" link=#]]
[[div class="scp-image-caption" style="width:100%;"]]
Foundation Remote Access Database (FRAD) Logo
[[/div]]
[[/div]]
@@ @@
+++ ALTERNATE COLOR SCHEMES
[[div class="scp-image-block block-center" style="width:100%; box-shadow:none;"]]
[[image https://scp-wiki.wdfiles.com/local--files/theme:cyberpunk/spread.png style="width:100%;" link=#]]
[[div class="scp-image-caption" style="width:100%;"]]
BLUE - GREEN - YELLOW - RED  VARIATIONS
[[/div]]
[[/div]]

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. [[[theme:black-highlighter-theme|To learn more go here]]].

**On any wiki:**
[[div class="code" style="color: rgb(var(--gaff-black));"]]
@@[[include :scp-wiki:theme:black-highlighter-theme]]@@
@@[[include :scp-wiki:component:toggle-sidebar-bhl]]@@
@@[[include :scp-wiki:theme:cyberpunk theme-number=1]]@@
[[/div]]
@@ @@
[[div class="blokquote-alt"]]
**Choosing Color Variations**
-----
Change the theme-number include to your desired color.
* For BLUE: @@[[include :scp-wiki:theme:cyberpunk theme-number=1]]@@
* ##24e50f|For GREEN:  @@[[include :scp-wiki:theme:cyberpunk theme-number=2]]@@##
* ##e5e30f|For YELLOW: @@[[include :scp-wiki:theme:cyberpunk theme-number=3]]@@##
* ##e50f0f|For RED:  @@[[include :scp-wiki:theme:cyberpunk theme-number=4]]@@##
[[/div]]
@@ @@
@@ @@
+ 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

[[collapsible show="+ Titles" hide="- Titles"]]
+ First Title

++ Second Title

+++ Third Title

++++ Fourth Title

+++++ Fifth Title

++++++ Sixth Title
[[/collapsible]]

@@ @@

[[tabview]]
[[tab Tabulator]]
Just use your imagination and pretend there's `Lorem Ipsum` here.
[[/tab]]
[[tab Tabulation]]
Hey look, more text here.

How quaint.
[[/tab]]
[[tab Long Tab]]
This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
Too bad she won't live. But then again, who does?
[[/tab]]
[[/tabview]]
@@ @@
> This is a blockquote, created by putting "> " at the start of each line.
>
> More text
> -----
> That's a horizontal rule
>
>> Nested blockquotes
>>> And another[[footnote]] And here's a footnote! [[/footnote]]
@@ @@
||~ This is a ||~ table ||
||You should know || how to make these ||
||||already ||

----
@@ @@
+ With Special Divs
@@ @@
++++ Alternate Blockquote
[[div class="blokquote-alt"]]
She's the one they call a digital reaper?
-----
Yup. That's Piri Vamuletto, in the flesh.
[[/div]]

[[collapsible show="» Show Usage" hide="« Hide Usage"]]
[[div class="code" style="color: rgb(var(--gaff-black));"]]
@@[[div class="blokquote-alt"]]@@
@@TEXT GOES HERE@@
@@-----@@
@@OR HERE@@
@@[[/div]]@@
[[/div]]
The above code will give you:
[[div class="blokquote-alt"]]
TEXT GOES HERE
-----
OR HERE
[[/div]]
[[/collapsible]]
@@ @@
++++ Console/Terminal Div
[[div class="console"]]
+ 
[[div class="console-header"]]
-----
[[size 250%]] FOUNDATION [[/size]]
[[size 125%]] mobile access terminal [[/size]]
------
[[/div]]
[[table class="terminal"]]

[[row]]
[[hcell]]
│
[[/hcell]]
[[cell]]
department terminals provided and sponsored by:
[[/cell]]
[[/row]]

[[row]]
[[hcell]]
│
│
[[/hcell]]
[[cell]]
{{@@  ▄▀█ █▀▀ █▀█ █▀█ █░█ █▀▀ █░░   ▀█▀ █▀▀ █▀▀ █▄█@@}}
{{@@  █▀█ █▄▄ █▀▄ █▄█ ▀▄▀ ██▄ █▄▄   ░█░ ██▄ █▄▄ █▀█@@}}
[[/cell]]
[[/row]]

[[row]]
[[hcell]]
│
[[/hcell]]
[[cell]]
{{@@  bringing humanity through technology™@@}}
[[/cell]]
[[/row]]

[[row]]
[[hcell]]
│
[[/hcell]]
[[cell]]
 
[[/cell]]
[[/row]]

[[row]]
[[hcell]]
@@   @@
[[/hcell]]
[[cell]]
@@  @@
[[/cell]]
[[/row]]

[[row]]
[[hcell]]
@@ >@@
[[/hcell]]
[[cell]]
ENTER LOGIN CREDENTIALS:
[[/cell]]
[[/row]]

[[row]]
[[hcell]]
@@ @@
[[/hcell]]
[[cell]]
@@    @@##17e610|__/useraccount@@  @@VAMULETTO P.@@  @@liveinthedreamofsalome__##
[[/cell]]
[[/row]]

[[row]]
[[hcell]]
@@ >@@
@@  @@
[[/hcell]]
[[cell]]
Welcome, employee [ ##17e624|#F21E - PIRI VAMULETTO## ]. You have [ ##17e610|0## ] pending message(s).
[[/cell]]
[[/row]]

[[row]]
[[hcell]]
@@ @@
[[/hcell]]
[[cell]]
@@    @@##17e610|__/open file VIDEO LOG__##
[[/cell]]
[[/row]]

[[row]]
[[hcell]]
@@ >@@
[[/hcell]]
[[cell]]
LOADING FILE... LOADING FILE...
[[/cell]]
[[/row]]

[[row]]
[[hcell]]
@@ >@@
[[/hcell]]
[[cell]]
FILE [ ##17e610|VIDEO LOG## ] LOADED.
[[/cell]]
[[/row]]

[[row]]
[[hcell]]
@@ >@@
[[/hcell]]
[[cell]]
CLASS - [ ##17e610|A## ] CLEARANCE REQUIRED.
[[/cell]]
[[/row]]

[[row]]
[[hcell]]
@@ >@@
[[/hcell]]
[[cell]]
OPEN FILE (Y/N)?
[[/cell]]
[[/row]]

[[row]]
[[hcell]]
@@ @@
[[/hcell]]
[[cell]]
@@    @@##17e610|__/Y__##
[[/cell]]
[[/row]]

[[row]]
[[hcell]]
@@ >@@
[[/hcell]]
[[cell]]
OPENING FILE...
[[/cell]]
[[/row]]

[[row]]
[[hcell]]
@@ >@@
[[/hcell]]
[[cell]]
DISPLAYING ON MAIN SCREEN...
[[/cell]]
[[/row]]

[[row]]
[[hcell]]
@@ >@@
[[/hcell]]
[[cell]]
FILE OPENED.
[[/cell]]
[[/row]]

[[/table]]
[[/div]]

[[collapsible show="» Show Usage" hide="« Hide Usage"]]
[[div class="code" style="color: rgb(var(--gaff-black));"]]
@@[[div class="console"]]@@
@@[[div class="console-header"]]@@
@@[[size 200%]]@@
@@-----@@
@@ANY HEADER TEXT YOU WANT!@@
@@-----@@
@@[[/size]]@@
@@[[/div]]@@
@@[[table class="terminal"]]@@
@@ @@
@@[[row]]@@
@@[[hcell]@@
@@﹫﹫   ﹫﹫@@
@@[[/hcell]]@@
@@[[cell]]@@
@@﹫﹫   ﹫﹫@@
@@[[/cell]]@@
@@[[/row]]@@
@@ @@
@@[[row]]@@
@@[[hcell]]@@
@@﹫﹫ >﹫﹫@@
@@[[/hcell]]@@
@@[[cell]]@@
@@ENTER LOGIN CREDENTIALS:@@
@@[[/cell]]@@
@@[[/row]]@@
@@ @@
@@[[row]]@@
@@[[hcell]]@@
﹫﹫ ﹫﹫
@@[[/hcell]]@@
@@[[cell]]@@
@@﹫﹫    ﹫﹫ ##17e610|__/useraccount﹫﹫  ﹫﹫VAMULETTO P.﹫﹫  ﹫﹫liveinthedreamofsalome__##@@
@@[[/cell]]@@
@@[[/row]]@@
@@[[/table]]@@
@@[[/div]]@@
[[/div]]
The above code will give you:
[[div class="console"]]
[[div class="console-header"]]
[[size 200%]]
-----
ANY HEADER TEXT YOU WANT!
-----
[[/size]]
[[/div]]
[[table class="terminal"]]

[[row]]
[[hcell]]
@@   @@
[[/hcell]]
[[cell]]
@@   @@
[[/cell]]
[[/row]]

[[row]]
[[hcell]]
@@ >@@
[[/hcell]]
[[cell]]
ENTER LOGIN CREDENTIALS:
[[/cell]]
[[/row]]

[[row]]
[[hcell]]
@@ @@
[[/hcell]]
[[cell]]
@@    @@##17e610|__/useraccount@@  @@VAMULETTO P.@@  @@liveinthedreamofsalome__##
[[/cell]]
[[/row]]
[[/table]]
[[/div]]

[[/collapsible]]
@@ @@
++++ Audio/Video Log Format
[[div class="logs"]]
[[div class="logs-header"]]
[[size 150%]]
Video Log - New Schmeling, 1982
[[/size]]
**> RECORDING STARTED <**
@@ @@
[[/div]]
[[table class="dialog"]]

[[row]]
[[hcell]]

[[/hcell]]
[[cell]]
//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.//
[[/cell]]
[[/row]]

[[row]]
[[hcell]]
VAMULETTO
[[/hcell]]
[[cell class="active"]]
Talk.
[[/cell]]
[[/row]]

[[row]]
[[hcell]]
ALEXANDER
[[/hcell]]
[[cell class="active"]]
If it isn't little miss digital reaper herself.
[[/cell]]
[[/row]]

[[row]]
[[hcell]]

[[/hcell]]
[[cell]]
//Piri cocks the hammer back. J. Alexander smiles.//
[[/cell]]
[[/row]]

[[row]]
[[hcell]]
ALEXANDER
[[/hcell]]
[[cell class="active"]]
I can assure you that shooting me would be a mistake.
[[/cell]]
[[/row]]

[[row]]
[[hcell]]
VAMULETTO
[[/hcell]]
[[cell class="active"]]
Sure doesn't look that way from my perspective.
[[/cell]]
[[/row]]

[[row]]
[[hcell]]
ALEXANDER
[[/hcell]]
[[cell class="active"]]
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.
[[/cell]]
[[/row]]

[[row]]
[[hcell]]
[[/hcell]]
[[cell]]
//Piri holsters her revolver as James puts his hands back to his sides.//
[[/cell]]
[[/row]]

[[row]]
[[hcell]]
ALEXANDER
[[/hcell]]
[[cell class="active"]]
That's more like it.
[[/cell]]
[[/row]]

[[row]]
[[hcell]]
VAMULETTO
[[/hcell]]
[[cell class="active"]]
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.
[[/cell]]
[[/row]]

[[row]]
[[hcell]]
[[/hcell]]
[[cell]]
//James reaches into his pocket. Pulls out and tosses an MO disk to Piri, who catches it with a free hand.//
[[/cell]]
[[/row]]

[[row]]
[[hcell]]
ALEXANDER
[[/hcell]]
[[cell class="active"]]
You might find what's on that disk useful to you... or your organization, should you choose to share it with them.
[[/cell]]
[[/row]]

[[row]]
[[hcell]]
VAMULETTO
[[/hcell]]
[[cell class="active"]]
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.
[[/cell]]
[[/row]]

[[row]]
[[hcell]]
[[/hcell]]
[[cell]]
//James laughs.//
[[/cell]]
[[/row]]

[[row]]
[[hcell]]
ALEXANDER
[[/hcell]]
[[cell class="active"]]
You'll know once you see what's on it. Good day, miss digital reaper.
[[/cell]]
[[/row]]

[[row]]
[[hcell]]
[[/hcell]]
[[cell]]
//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.//
[[/cell]]
[[/row]]

[[/table]]
[[/div]]
[[collapsible show="» Show Usage" hide="« Hide Usage"]]
[[div class="code" style="color: rgb(var(--gaff-black));"]]
@@[[div class="logs"]]@@
@@[[div class="logs-header"]]@@
@@[[size 150%]]@@
@@Video Log@@
@@[[/size]]@@
@@**> RECORDING STARTED <**@@
@@﹫﹫ ﹫﹫@@
@@[[/div]]@@
@@[[table class="dialog"]]@@
@@ @@
@@[[row]]@@
@@[[hcell]]@@
@@ @@
@@[[/hcell]]@@
@@[[cell]]@@
@@//Describe some visual action here.//@@
@@ @@
@@//You like visual action, right?//@@
@@[[/cell]]@@
@@[[/row]]@@
@@ @@
@@[[row]]@@
@@[[hcell]]@@
@@SPEAKER@@
@@[[/hcell]]@@
@@[[cell class="active"]]@@
@@This is my speech. Very wordy.@@
@@[[/cell]]@@
@@[[/row]]@@
@@ @@
@@[[/table]]@@
@@[[/div]]@@
[[/div]]
The above code will give you:
[[div class="logs"]]
[[div class="logs-header"]]
[[size 150%]]
Video Log
[[/size]]
**> RECORDING STARTED <**
@@ @@
[[/div]]
[[table class="dialog"]]

[[row]]
[[hcell]]

[[/hcell]]
[[cell]]
//Describe some visual action here.//

//You like visual action, right?//
[[/cell]]
[[/row]]

[[row]]
[[hcell]]
SPEAKER
[[/hcell]]
[[cell class="active"]]
This is my speech. Very wordy.
[[/cell]]
[[/row]]

[[/table]]
[[/div]]
[[/collapsible]]
@@ @@
------
[[=]]
The Header Image fonts are Strasua (top) and Element (bottom).
@@ @@
[[span style="font-family: var(--title-font);"]]The Title font is Unicephalon.[[/span]]
[[span style="font-family: var(--body-font);"]]The Body font is Jost.[[/span]]
[[span style="font-family: var(--mono-font);"]]The mono font is Bedstead.[[/span]]
@@ @@
__ADDITIONAL FONTS INCLUDE:__
[[span style="font-family: var(--display-font);"]]Liquid Crystal for display/LED text.[[/span]]
[[span style="font-family: var(--header-font);"]]Element for display logos and header text.[[/span]]
[[span style="font-family: var(--dialogue-font);"]]SV Basic Manual for dialogue tables.[[/span]]
[[span style="font-family: var(--terminal-font);"]]Connection for terminals/consoles.[[/span]]
[[/=]]

-----

[[collapsible show="+ Show theme code" hide="- Hide theme code"]]
[[code type="css"]]

/*
   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;

    --linkalt: 85, 181, 250;
    --linkalt-hl: 0, 145, 250;

    /* GREEN */
    --display-green: 23, 230, 16;
    --display-inter: 0, 145, 9;
    --tyrell-green: 7, 53, 0;
    --display-dark: 1, 18, 6;

    --linkgr-hl: 65, 255, 59;
    --linkgr: 6, 184, 0;

    /* 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;
    border: none !important;
    background-color: rgba(0, 0, 0, 0) !important;
    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(--intentionaltypo);
}


/* 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,
#interwiki {
    --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 {
    -webkit-filter: hue-rotate(0deg);
    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: 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;
}

.console,
table.terminal,
.console-header,
blockquote,
div.blockquote {
    --hover-link-color: var(--linkgr-hl);
    --newpage-color: var(--display-green);
    --link-color: var(--display-green);
    --visited-link-color: var(--linkgr);
}

.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: 1.1em 1em 0em 1em;
}

table.dialog td {
    font-family: var(--dialogue-font);
    font-size: 1.15em;
    padding: 1.15em 0em 0em 0.8em;
}

table.dialog td.active {
    color: rgb(var(--neon-blue));
}

.blokquote-alt,
.logs {
    --hover-link-color: var(--linkalt-hl);
    --newpage-color: var(--linkalt);
    --link-color: var(--linkalt);
    --visited-link-color: var(--tears-n-rain);
}

.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: rgba(var(--pkd-blaster), 0.7);
}

.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 */

[[/code]]
-----
++++ GREEN VARIANT
[[code type="css"]]
: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;

    --linkalt: 110, 250, 88;
    --linkalt-hl: 0, 250, 88;
}

#main-content {
    --pagetags-title-bg: var(--display-green);
}
[[/code]]
-----
++++ YELLOW VARIANT
[[code type="css"]]
: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;

    --linkalt: 171, 201, 4;
    --linkalt-hl: 225, 250, 0;
}

#main-content {
    --pagetags-title-bg: var(--display-green);
}
[[/code]]
-----
++++ RED VARIANT
[[code type="css"]]
: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;

    --linkalt: 201, 4, 40;
    --linkalt-hl: 255, 47, 0;
}

#main-content {
    --pagetags-title-bg: var(--display-green);
}
[[/code]]
[[/collapsible]]
[[/iftags]]
[[include :scp-wiki:component:toggle-sidebar-bhl]]
[[module CSS]]
@import url(https://scp-wiki.wdfiles.com/local--code/theme%3Acyberpunk/1); /* main theme */
@import url(https://scp-wiki.wdfiles.com/local--code/theme%3Acyberpunk/{$theme-number});
[[/module]]
[[include :scp-wiki:component:interwiki-style
| priority=3
| theme=https://scp-wiki.wdfiles.com/local--code/theme%3Acyberpunk/1
]]
[[include :scp-wiki:component:interwiki-style
| priority=4
| theme=https://scp-wiki.wdfiles.com/local--code/theme%3Acyberpunk/{$theme-number}
]]

Neon Dystopia Theme

Module Styles

Inline Styles

Includes

CSS Classes

Page Source