A Problematic Theme

Link to article: A Problematic 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");

@import url(https://scp-wiki.wdfiles.com/local--code/theme%3Aa-problematic-theme/1);
@import url(https://scp-wiki.wdfiles.com/local--code/theme%3Aa-problematic-theme/{$version});

```
font-size: 1.5em;
```
```
font-family: var(--header-font);
```
```
font-family: var(--title-font);
```
```
font-family: var(--body-font);
```
```
font-family: var(--mono-font);
```

```
code
```
```
code
```
```
code
```
```
code
```
```
blockquote
```

[[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");
[[/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's This?

This is A Problematic Theme by [[*user winkwonkboi]], designed for articles in [[[the-appliance-war-hub|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:

[[div class="code"]]
@@[[include :scp-wiki:theme:black-highlighter-theme]]@@
@@[[include :scp-wiki:theme:a-problematic-theme version=1]]@@
[[/div]]

//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 [[[theme:black-highlighter-theme|here.]]]//

----

[[=]]
In addition, there are three variants of this theme:
[[div class="code"]]
**STANDARD Version:**
@@[[include :scp-wiki:theme:a-problematic-theme version=1]]@@
[[/div]]
[[div class="code"]]
**DARK Version:**
@@[[include :scp-wiki:theme:a-problematic-theme version=2]]@@
[[/div]]
[[div class="code"]]
**RED Version:**
@@[[include :scp-wiki:theme:a-problematic-theme version=3]]@@
[[/div]]
[[/=]]
@@ @@

----
[[include component:image-block name=https://scp-wiki.wikidot.com/local--files/theme:a-problematic-theme/thatskibidi.png|caption=The deplorable|width=250px]]

+ 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.

[[[theme:a-problematic-theme|Visited link.]]]
[# Unvisited link.]

[[collapsible show="+ Who's the problem?" hide="- You're 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
[[/collapsible]]

----

@@ @@
[[tabview]]
[[tab Tab]]
Don't mind the image above, teehee.
[[/tab]]
[[tab Tabulator]]
She applianced on my war till I canon.

I'm ready to go off.
[[/tab]]
[[tab 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.
[[/tab]]
[[tab This tab's title is longer than my bathroom pipes.]]
Ride or die, Khazi (my favorite toilet leader).
[[/tab]]
[[tab Empty Tab]]

[[/tab]]
[[tab Empty Tab]]

[[/tab]]
[[tab Empty Tab]]

[[/tab]]
[[tab Empty Tab]]

[[/tab]]
[[tab Empty Tab]]

[[/tab]]
[[tab Empty Tab]]
Nah, //we're// the problems.
[[/tab]]
[[/tabview]]
@@ @@

[[div class="blockquote"]]
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.[[footnote]]A footnote (Word to ThatGuy).[[/footnote]]
[[/div]]
@@ @@

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

----

[[=]]
[[div style="font-size: 1.5em;"]]
[[span style="font-family: var(--header-font);"]]Header font is IBM Plex Sans Condensed.[[/span]]
[[span style="font-family: var(--title-font);"]]Title and UI font is Podkova.[[/span]]
[[span style="font-family: var(--body-font);"]]Body font is Open Sans.[[/span]]
[[span style="font-family: var(--mono-font);"]]Monospace font is Nanum Gothic Coding.[[/span]]
[[/div]]
[[/=]]

----

+ Source Code

@@ @@
[[collapsible show="+ And it all goes" hide="- down the drain."]]
[[code type="CSS"]]
/* Standard Version */

@import url('https://fonts.bunny.net/css2?family=IBM+Plex+Sans+Condensed:wght@700&display=swap');
@import url('https://fonts.bunny.net/css2?family=Podkova:wght@400..800&display=swap');
@import url('https://fonts.bunny.net/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.bunny.net/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);
    }
[[/code]]

@@ @@

[[code type="CSS"]]
/* 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));
    }
[[/code]]

@@ @@

[[code type="CSS"]]
/* 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));
    }
[[/code]]
[[/collapsible]]
@@ @@

[[/iftags]]

[[module CSS]]
@import url(https://scp-wiki.wdfiles.com/local--code/theme%3Aa-problematic-theme/1);
@import url(https://scp-wiki.wdfiles.com/local--code/theme%3Aa-problematic-theme/{$version});
[[/module]]

[[include :scp-wiki:component:interwiki-style
| priority=3
| theme=https://scp-wiki.wdfiles.com/local--code/theme%3Aa-problematic-theme/1
]]

[[include :scp-wiki:component:interwiki-style
| priority=4
| theme=https://scp-wiki.wdfiles.com/local--code/theme%3Aa-problematic-theme/{$version}
]]

A Problematic Theme

Module Styles

Inline Styles

Includes

CSS Classes

Page Source