Darkqueer Theme

Link to article: Darkqueer Theme.

:root {
  --fade-in-delay: 0s;
}

.colors-container .colors .color:nth-of-type(1) {
    background: var(--darkest-color) !important;
}
.colors-container .colors .color:nth-of-type(2) {
    background: var(--accent-color) !important;
}

.colors-container .subcolors .color:nth-of-type(1) {
    background: var(--off-white) !important;
}

.colors-container .subcolors .color:nth-of-type(2) {
    background: var(--lighter-color) !important;
}

.colors-container .subcolors .color:nth-of-type(3) {
    background: var(--darker-color) !important;
}

.colors-container .subcolors .color:nth-of-type(4) {
    background: var(--secondary-accent-color) !important;
}

.colors-container .subcolors .color:nth-of-type(5) {
    background: var(--subdued-accent-color) !important;
}

.colors-container .subcolors .color:nth-of-type(6) {
    background: var(--mid-accent-color) !important;
}

@import url('https://scp-wiki.wdfiles.com/local--code/theme%3Adarkqueer/1');

```
display: none;
```

```
blockquote
```
```
blockquote
```

[[div style="display: none;"]]
[[include :scp-wiki:theme:blankstyle]]
[[/div]]

[[iftags +theme]]

[[module css]]
:root {
  --fade-in-delay: 0s;
}

.colors-container .colors .color:nth-of-type(1) {
    background: var(--darkest-color) !important;
}
.colors-container .colors .color:nth-of-type(2) {
    background: var(--accent-color) !important;
}

.colors-container .subcolors .color:nth-of-type(1) {
    background: var(--off-white) !important;
}

.colors-container .subcolors .color:nth-of-type(2) {
    background: var(--lighter-color) !important;
}

.colors-container .subcolors .color:nth-of-type(3) {
    background: var(--darker-color) !important;
}

.colors-container .subcolors .color:nth-of-type(4) {
    background: var(--secondary-accent-color) !important;
}

.colors-container .subcolors .color:nth-of-type(5) {
    background: var(--subdued-accent-color) !important;
}

.colors-container .subcolors .color:nth-of-type(6) {
    background: var(--mid-accent-color) !important;
}

[[/module]]

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

This is the Darkqueer Theme by [[*user Queerious]], a fork of the existing [[[*theme:blankstyle|BLANKSTYLE]]], by [[*user Placeholder McD]] and [[*user HarryBlank]], and intended to be a darker alternative to [[[theme:Queerstyle]]].

This theme also uses the [[[*component:pride-highlighter|White Outline Classic LGBTQ+ Pride Logo]]] by [[*user Woedenaz]].

This theme completely recolors the page, and modifies standard components to be a neutral/dark tone. It also changes styling to a pseudo-futurism vibe.

To use this theme, please put the following at the top of your page:

[[div class="blockquote"]]
@@[[include :scp-wiki:theme:blankstyle]]@@
@@[[include :scp-wiki:theme:darkqueer]]@@
[[/div]]

-----

[[include :scp-wiki:component:theme-squares -=-
| color1-name=Forgetful Dark
| color1-variable=--darkest-color
| color1-info=(46, 40, 46)
| color1-has-light-text=1
| color2-name=Purple Haze
| color2-variable=--accent-color
| color2-info=(90, 30, 90)
| color2-has-light-text=1
| subcolor1-name=Archival White
| subcolor1-variable=--off-white
| subcolor1-info=(220, 220, 220)
| subcolor2-name=Lavender Smoke
| subcolor2-variable=--lighter-color
| subcolor2-info=(135, 120, 135)
| subcolor3-name=Abyssal Black
| subcolor3-variable=--darker-color
| subcolor3-info=(20, 14, 20)
| subcolor3-has-light-text=1
| subcolor4-name=Intimate Magenta
| subcolor4-variable=--secondary-accent-color
| subcolor4-info=(140, 40, 80)
| subcolor4-has-light-text=1
| subcolor5-name=Burnt Lilac
| subcolor5-variable=--subdued-accent-color
| subcolor5-info=(90, 60, 90)
| subcolor5-has-light-text=1
| subcolor6-name=Royal Tyrian
| subcolor6-variable=--mid-accent-color
| subcolor6-info=(70, 35, 120)
| subcolor6-has-light-text=1
]]

[[include :scp-wiki:component:image-block name=http://scp-wiki.wikidot.com/local--files/queerious/StreamerIcon.png|caption=Image Block, with Caption.|width=200px]]

An ornamental horizontal rule can be created with 5 hyphens "- - - - -" as above.

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

[[collapsible show="+ Collapsible - Click me" hide="- Collapsible - Click me"]]
+ First Title

++ Second Title

+++ Third Title

++++ Fourth Title

+++++ Fifth Title

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

@@ @@

[[tabview]]
[[tab Tabulator]]
This is a tab view.
[[/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.[[footnote]] This is a footnote. [[/footnote]]

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 Longer Tab]]
This is also a long tab. It contains a lot of text.

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

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

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

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

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

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

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

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

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

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

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

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

This is also a long tab. It contains a lot of text.
[[/tab]]

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

@@ @@

[[div class="blockquote"]]
This is a blockquote, created by putting "> " at the start of each line.

More text
-----
That's a horizontal rule

> Nested blockquotes
[[/div]]

@@ @@

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

[[footnoteblock]]

@@ @@
@@ @@
[[=]]
[[collapsible show="+ CODE" hide="- CODE"]]
[[<]]
[[code type="CSS"]]
/*
    DARKQUEER CSS
    By Queerious
    Forked from:
       Blankstyle CSS by Placeholder McD and HarryBlank
       Using Code from Queerstyle CSS by Queerious
    Using:
       White Outline Classic LGBTQ+ Pride Logo by Woedenaz from https://scp-wiki.wikidot.com/component:pride-highlighter
*/
/* Relevant QUEERSTYLE Code */
#header h1 a::before {
  font-size: 1.2em;
  text-shadow: 3px 3px 3px #fff;
}
 
#header h2::before {
  font-size: 0.9em;
  text-shadow: 1px 1px 1px #fff;
}
 
#header {
    margin-top: 0.5em;
}
 
:root {
    --header-title: "SCP Foundation";
    --header-subtitle: "SECURE, CONTAIN, PROTECT";
}
 
@media (max-width: 707px) {
    #header h1 a::before {
        font-size: 9vw;
    }
    #login-status, #login-status a {
        text-shadow: 1px 1px #afb4b9;
}
@supports (scrollbar-color: auto) {
  .scrollbox {
    scrollbar-color: var(--off-white) var(--off-white);
  }
}

::-webkit-scrollbar-thumb {
    background-color: var(--off-white);
}
}

div#extra-div-1 {
    height: 150px;
    background-image: url('https://scp-wiki.wdfiles.com/local--files/component:pride-highlighter/gp_logo.svg');
}

/* QUEERSTYLE DARK MODE */
#page-content {
    color: var(--off-white);
}

#page-content hr{
    margin: 2em 1em;
}

#page-content a{
    color: var(--brighter-accent-color);
}

#page-content a:visited{
    color: var(--mid-high-accent-color);
}

#page-content a:hover{
    color: var(--brightest-accent-color);
}

#page-content a.newpage {
    color: var(--secondary-accent-color);
}

#login-status,
#login-status a {
    color: var(--brightest-accent-color);
}



:root {
    --off-white: #DCDCDC;
    --brighter-white: #F0F0F0;
    --accent-color: #5A1E5A;
    --subdued-accent-color: #5A3C5A;
    --mid-accent-color: #462378;
    --mid-high-accent-color: #58358A;
    --brighter-accent-color: #8C328C;
    --brightest-accent-color: #AA50AA;
    --secondary-accent-color: #8C2850;
    --lighter-color: #877887;
    --darker-color: #140E14;
    --darkest-color: #2E282E;
}

body {
    background-image: linear-gradient(
        to bottom,
        #000000, #000000 90px,
        #000000 90px, #171417 200px,
        #171417 200px, var(--darkest-color) 100%);
    background-repeat: no-repeat;
}

#header h1, #header h2 { margin-left: 0; float: none; text-align: center; }
#header h2 { margin-top: 0.5rem; }
#header h1 span, #header h2 span { font-size: 0; display: none;}
#header h1 a::before, #header h2::before {
    color: var(--brighter-white);
}

#header h1 a::before {
  text-shadow: 3px 3px 3px var(--darkest-color);
}

#header h2::before {
  text-shadow: 1px 1px 1px var(--darkest-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--off-white);
}

/* COLOR CORRECTION */

#page-content hr {
    background-color: var(--off-white);
}

#top-bar, #top-bar a{
    color: var(--off-white);
    text-shadow: 0.75px 0.75px 1px var(--darkest-color);
}

#top-bar ul li.sfhover a,
#top-bar ul li:hover a{
    color: var(--brighter-accent-color);
}

div.blockquote hr {
    background-color: var(--brighter-accent-color) !important;
}

#page-content tr th {
    background-color: var(--subdued-accent-color);
    color: var(--off-white);
    border: var(--off-white) 1px solid;
}
 
#page-content tr td {
    border: var(--off-white) 1px solid;
}

#page-content div.blockquote,
#page-content blockquote {
    padding-left: 1.5em;
    background-color: var(--darker-color);
    border: 3px dashed var(--subdued-accent-color);
    border-left: 6px solid var(--accent-color);
    border-top-left-radius: 20px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 10px;
}

/* YUI RECOLOR */
 
#page-content .yui-nav a{
    color: var(--off-white);
}

 .yui-navset .yui-nav,
 .yui-navset .yui-navset-top .yui-nav{
     border-color: var(--accent-color);
}
 .yui-navset .yui-nav a, /* ---- Link Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav a{
     color: var(--off-white);
    /* ---- Tab Background Color | [UNSELECTED] ---- */
     background-color: var(--darker-color);
}
 .yui-navset .yui-nav a:hover,
 .yui-navset .yui-nav a:focus{
     color: var(--off-white);
    /* ---- Tab Background Colour | [HOVER] ---- */
     background-color: var(--accent-color);
}
 .yui-navset .yui-nav li, /* ---- Listitem Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav li{
     color: var(--darker-color);
     background-color: var(--accent-color);
}

 .yui-navset .yui-nav .selected, /* ---- Selection Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav .selected{
    /* ---- Tab Background Colour | [SELECTED] ---- */
     background-color: var(--accent-color);
}
 .yui-navset .yui-nav .selected a{
     width: 100%;
     color: var(--off-white);
}
 .yui-navset .yui-nav .selected a:focus,
 .yui-navset .yui-nav .selected a:active{
     color: var(--off-white);
     background-color: var(--accent-color);
}
 .yui-navset .yui-content {
    background-color: var(--darker-color);
}
 .yui-navset .yui-content,
 .yui-navset .yui-navset-top .yui-content{
    border: none;
    padding: .5em .7em;
}

a.footnoteref {
    color: var(--secondary-accent-color);
}

#page-options-container,
#action-area {
    color: var(--off-white);
}

#page-options-container a,
#action-area a,
#main-content .page-tags a,
#license-area a{
    color: var(--brighter-accent-color);
}

#page-options-container a:visited,
#action-area a:visited,
#main-content .page-tags a:visited,
#license-area a:visited{
    color: var(--mid-high-accent-color);
}

#page-options-container a:hover,
#action-area a:hover,
#main-content .page-tags a:hover,
#license-area a:hover{
    color: var(--brightest-accent-color);
}

#page-options-container a.newpage,
#action-area a.newpage,
#main-content .page-tags a.newpage,
.license-area a.newpage{
    color: var(--secondary-accent-color);
}

#lock-info {
    color: black;
}

table.form td div.sub, form div.sub {
    color: var(--off-white);
}

.scp-image-block .scp-image-caption{
    background-color: var(--lighter-color);
}

@supports (scrollbar-color: auto) {
  .scrollbox {
    scrollbar-color: var(--off-white) var(--darkest-color);
  }
}

::-webkit-scrollbar-thumb {
    background-color: var(--darkest-color);
}

::-webkit-scrollbar-track {
    background-color: var(--off-white);
}

/* Earthworm Recolor */
.earthworm__hub, .earthworm__previous, .earthworm__next, .earthworm__arrowhead {
    background: var(--darker-color) !important;
}

/* ACS Fix */
.danger-diamond a {
    color: rgba(0, 0, 0, 0) !important;
}

/* Custom Styles */
.queerbox_large {
    padding: 0.5em;
    background-color: var(--darker-color);
    border: 3px solid var(--accent-color);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

[[/module]]
[[/code]]
[[/<]]
[[/collapsible]]
[[/=]]
@@ @@
[[/iftags]]

[[module CSS]]
@import url('https://scp-wiki.wdfiles.com/local--code/theme%3Adarkqueer/1');
[[/module]]

Darkqueer Theme

Module Styles

Inline Styles

Includes

CSS Classes

Page Source