A Problematic Theme

What's This?

This is A Problematic Theme by winkwonkboi, designed for articles in The Appliance War canon series or within the general setting of Site-37.

On any wiki, just apply the following code at the top of the page:

[[include :scp-wiki:theme:black-highlighter-theme]]
[[include :scp-wiki:theme:a-problematic-theme version=1]]

Note: As this is a Black Highlighter based theme, the Black Highlighter theme should be used in addition for this theme to work. To learn more, go here.

---

In addition, there are three variants of this theme:

STANDARD Version:
[[include :scp-wiki:theme:a-problematic-theme version=1]]

DARK Version:
[[include :scp-wiki:theme:a-problematic-theme version=2]]

RED Version:
[[include :scp-wiki:theme:a-problematic-theme version=3]]

---

The deplorable

Examples

A horizontal rule can be created using five hyphens "-----" and stretches across the entire page unless it is placed inside anything (such as a blockquote). Lines separating sections of a page are horizontal rules.

Visited link.
Unvisited link.

+ Who's the problem?

Titles are made by adding between one to six pluses "+" at the beginning of a line.

First Title

Second Title

Third Title

Fourth Title

Fifth Title

Sixth Title

---

Tab

Don't mind the image above, teehee.

Tabulator

She applianced on my war till I canon.

I'm ready to go off.

Tabulation

Shoutout to the New Whirled Order gang.

Shoutout to the New Whirled Order gang.

Shoutout to the New Whirled Order gang.

Shoutout to the New Whirled Order gang.

Shoutout to the New Whirled Order gang.

Shoutout to the New Whirled Order gang.

Shoutout to the New Whirled Order gang.

Shoutout to the New Whirled Order gang.

Shoutout to the New Whirled Order gang.

Shoutout to the New Whirled Order gang.

Shoutout to the New Whirled Order gang.

Shoutout to the New Whirled Order gang.

Shoutout to the New Whirled Order gang.

Shoutout to the New Whirled Order gang.

Shoutout to the New Whirled Order gang.

This tab's title is longer than my bathroom pipes.

Ride or die, Khazi (my favorite toilet leader).

Empty Tab

Empty Tab

Empty Tab

Empty Tab

Empty Tab

Empty Tab

Nah, we're the problems.

This is a blockquote, created using a div block.

---

Making a theme in an attempt to feel something.

A nested blockquote, using ">" at the start of a line.

That Another That One.¹

A table can be	considered an appliance.
I'm sure	you don't need
any instructions, right?

---

Header font is IBM Plex Sans Condensed.
Title and UI font is Podkova.
Body font is Open Sans.
Monospace font is Nanum Gothic Coding.

---

Source Code

+ And it all goes

/* Standard Version */
 
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Podkova:wght@400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&display=swap');
 
    :root {
        /* S-CSS-P INTEGRATION */
        --theme-base: "black-highlighter";
        --theme-id: "a-problematic-theme";
        --theme-name: "A Problematic Theme";
 
        /* Black & White */
        --white: 252, 252, 252;
        --darker: 48, 48, 52;
        --yet-darker: 27, 28, 31;
        --darkest: 20, 22, 24;
        --black: 0, 0, 0;
 
        /* STANDARD Colors */
        --main-green: 151, 206, 142;
        --sage-green: 103, 146, 103;
        --christmas-green: 0, 135, 62;
        --celadon: 172, 225, 175;
        --chetwode: 240, 255, 240;
        --artichoke: 75, 111, 68;
 
        /* DARK Colors */
        --gloomy-green: 74, 93, 35;
        --laurel-green: 169, 186, 157;
        --army-green: 75, 83, 32;
        --kombu-green: 53, 66, 48;
        --gin: 216, 228, 188;
 
        /* RED Colors */
        --bloody-stain: 186, 9, 42;
        --light-red: 255, 204, 203;
        --salmon: 250, 128, 114;
        --desire: 234, 60, 83;
        --maroon: 128, 0, 0;
        --sangria: 94, 25, 20;
        --prismatic: 208, 61, 51;
        --light-coral: 240, 128, 128;
 
        /* Fonts */
        --header-font: "IBM Plex Sans Condensed", sans-serif;
        --title-font: "Podkova", serif;
        --body-font: "Open Sans", sans-serif;
        --mono-font: "Nanum Gothic Coding", monospace;
        --UI-font: var(--title-font);
 
        /* Header Elements */
        --logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme%3Aa-problematic-theme/standard37.svg");
        --header-title: "FOUNDATION SITE-37";
        --header-subtitle: "We've Got Problems";
 
        /* Header Gradient */
        --header-gradient-color-bottom: var(--main-green);
        --header-gradient-color-middle: var(--main-green);
        --header-gradient-color-top: var(--main-green);
        --diagonal-stripes: unset;
 
        /* Theme Colors */
        --bright-accent: var(--celadon);
        --medium-accent: var(--main-green);
        --dark-accent: var(--main-green);
        --gray-monochrome: var(--sage-green);
        --dark-gray-monochrome: var(--artichoke);
 
        --link-color: var(--christmas-green);
        --hover-link-color: var(--sage-green);
        --visited-link-color: var(--artichoke);
 
        /* Menu Colors */
        --swatch-menubg-color: var(--artichoke);
    }
 
    #header {
        --swatch-headerh1-color: var(--black);
        --swatch-headerh2-color: var(--black);
        --search-icon-color: var(--black);
 
        --login-line-divider-color: var(--black);
        --login-username-color: var(--black);
        --login-myaccount-color: var(--black);
 
        --login-dropdown-text-color: var(--black);
        --login-mobile-icon-color: var(--black);
    }
 
    #interwiki,
    #side-bar {
        --sidebar-media-bg-color: var(--chetwode);
        --sidebar-links-text: var(--white);
    }
 
    #main-content {
        --toc-body-link-color: var(--white);
        --toc-body-link-hover-color: var(--white);
        --toc-body-hover-arrow-color: var(--white);
    }

/* Dark Version */
 
    :root {
        /* Header Elements */
        --logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme%3Aa-problematic-theme/dark37.svg");
 
        /* Header Gradient */
        --header-gradient-color-bottom: var(--gloomy-green);
        --header-gradient-color-middle: var(--gloomy-green);
        --header-gradient-color-top: var(--gloomy-green);
 
        /* Theme Colors */
        --bright-accent: var(--laurel-green);
        --medium-accent: var(--gloomy-green);
        --dark-accent: var(--gloomy-green);
        --gray-monochrome: var(--army-green);
        --dark-gray-monochrome: var(--kombu-green);
 
        --swatch-background: var(--darkest);
        --background-gradient-color: var(--darkest);
        --rating-module-bg-color: var(--white);
 
        --swatch-text-light: var(--white);
        --swatch-text-general: var(--white);
        --link-color: var(--celadon);
        --hover-link-color: var(--gin);
        --visited-link-color: var(--laurel-green);
 
        /* Menu Colors */
        --swatch-menubg-color: var(--kombu-green);
    }
 
    #header {
        --swatch-headerh1-color: var(--white);
        --swatch-headerh2-color: var(--white);
        --search-icon-color: var(--white);
 
        --login-line-divider-color: var(--white);
        --login-username-color: var(--white);
        --login-myaccount-color: var(--white);
 
        --login-dropdown-text-color: var(--white);
        --login-mobile-icon-color: var(--white);
    }
 
    #interwiki,
    #side-bar {
        --sidebar-media-bg-color: var(--gin);
        --sideblock-heading-text-color: var(--gin);
    }
 
    #main-content {
        --tabs-content-bg-color: var(--yet-darker);
        --tabs-content-border-color: var(--darker);
 
        --blockquote-bg-color: var(--yet-darker);
        --blockquote-border-color: var(--darker);
        --blockquote-colorbar-color: var(--darker);
 
        --tables-border: var(--darker);
        --footnotes-footer-bg-color: var(--kombu-green);
    }
 
    .scp-image-block .scp-image-caption,
    .code {
    color: rgb(var(--black));
    }
 
    .page-source {
    background: rgb(var(--yet-darker));
    }
 
    form#edit-page-form .wd-editor-toolbar-panel a::before {
    background-color: rgb(var(--laurel-green));
    }

/* Red Version */
 
    :root {
        /* Header Elements */
        --logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme%3Aa-problematic-theme/red37.svg");
 
        /* Header Gradient */
        --header-gradient-color-bottom: var(--bloody-stain);
        --header-gradient-color-middle: var(--bloody-stain);
        --header-gradient-color-top: var(--bloody-stain);
 
        /* Theme Colors */
        --bright-accent: var(--desire);
        --medium-accent: var(--bloody-stain);
        --dark-accent: var(--bloody-stain);
        --gray-monochrome: var(--maroon);
        --dark-gray-monochrome: var(--sangria);
 
        --swatch-background: var(--darkest);
        --background-gradient-color: var(--darkest);
        --rating-module-bg-color: var(--white);
 
        --swatch-text-light: var(--white);
        --swatch-text-general: var(--white);
        --link-color: var(--light-coral);
        --hover-link-color: var(--light-red);
        --visited-link-color: var(--prismatic);
 
        /* Menu Colors */
        --swatch-menubg-color: var(--sangria);
    }
 
    #header {
        --swatch-headerh1-color: var(--white);
        --swatch-headerh2-color: var(--white);
        --search-icon-color: var(--white);
 
        --login-line-divider-color: var(--white);
        --login-username-color: var(--white);
        --login-myaccount-color: var(--white);
 
        --login-dropdown-text-color: var(--white);
        --login-mobile-icon-color: var(--white);
    }
 
    #interwiki,
    #side-bar {
        --sidebar-media-bg-color: var(--salmon);
        --sideblock-heading-text-color: var(--salmon);
    }
 
    #main-content {
        --tabs-content-bg-color: var(--yet-darker);
        --tabs-content-border-color: var(--darker);
 
        --blockquote-bg-color: var(--yet-darker);
        --blockquote-border-color: var(--darker);
        --blockquote-colorbar-color: var(--darker);
 
        --tables-border: var(--darker);
    }
 
    .scp-image-block .scp-image-caption,
    .code,
    .footnotes-footer,
    .bibitems {
    color: rgb(var(--black));
    }
 
    .page-source {
    background: rgb(var(--yet-darker));
    }
 
    form#edit-page-form .wd-editor-toolbar-panel a::before {
    background-color: rgb(var(--desire));
    }

Footnotes

1. A footnote (Word to ThatGuy).