Black Highlighter Theme

Link to article: Black Highlighter Theme.

@import url("https://cdn.scpwiki.com/theme/en/black-highlighter/css/min/normalize.min.css");
@import url("https://cdn.scpwiki.com/theme/en/black-highlighter/css/min/black-highlighter.min.css");

a[rel="license"]::after {
    content: ".";
}

#page-title { display: none }

.scp-image-block.block-right img {
    background: var(--gradient-header);
    box-sizing: border-box;
    padding: 1em;
}

.fonts-display {
    font-size: 1.25em;
}

.title-font {
    font-family: var(--title-font);
    font-weight: 700;
}
.header-font {
    font-family: var(--title-font);
    font-weight: 900;
}
.UI-font {
    font-family: var(--UI-font);
}
.mono-font {
    --MONO: 1;
    --CASL: 0;
    --CRSV: 0;
    font-family: var(--mono-font);
}

```
display: none
```
```
text-align: center;
```

```
code
```
```
blockquote
```
```
blockquote
```
```
blockquote
```
```
fonts-display
```
```
title-font
```
```
header-font
```
```
UI-font
```
```
mono-font
```

[[module CSS]]
@import url("https://cdn.scpwiki.com/theme/en/black-highlighter/css/min/normalize.min.css");
@import url("https://cdn.scpwiki.com/theme/en/black-highlighter/css/min/black-highlighter.min.css");

a[rel="license"]::after {
    content: ".";
}
[[/module]]

[[div_ style="display: none"]]
[[include :scp-wiki:component:interwiki-style
| priority=1
| theme=https://cdn.scpwiki.com/theme/en/black-highlighter/css/min/normalize.min.css
]]

[[include :scp-wiki:component:interwiki-style
| priority=2
| theme=https://cdn.scpwiki.com/theme/en/black-highlighter/css/min/black-highlighter.min.css
]]
[[/div]]

[[iftags +theme -nobhl]]
[[module css]]
#page-title { display: none }

.scp-image-block.block-right img {
    background: var(--gradient-header);
    box-sizing: border-box;
    padding: 1em;
}

.fonts-display {
    font-size: 1.25em;
}

.title-font {
    font-family: var(--title-font);
    font-weight: 700;
}
.header-font {
    font-family: var(--title-font);
    font-weight: 900;
}
.UI-font {
    font-family: var(--UI-font);
}
.mono-font {
    --MONO: 1;
    --CASL: 0;
    --CRSV: 0;
    font-family: var(--mono-font);
}
[[/module]]

[[image https://scp-wiki.wdfiles.com/local--files/component%3Ablack-highlighter-theme-dev/black-highlighter-logo.svg alt="Black Highlighter"]]

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

This is the Black Highlighter theme, a new base theme that aims to be better than the SCP Wiki's default base theme, [[[theme:site | Sigma-10]]]. You've already seen it in action.

 _

+ Usage

On any wiki:

[[div class="code" style="text-align: center;"]]
@@[[include :scp-wiki:theme:black-highlighter-theme]]@@
[[/div]]

 _

+ Reporting problems

If you've got a Github account, [https://github.com/Nu-SCPTheme/Black-Highlighter/issues create an Issue] detailing your problem (whether it's technical, or aesthetic, or whatever).

If you don't have a Github account, or if you'd prefer to discuss your issues with someone directly, send a Wikidot PM to [[*user Woedenaz]]. If he doesn't respond, send it to [[*user Croquembouche]].

 _

+ Addons

As a base theme, it's easy to extend Black Highlighter to be whatever you want. You can see all Black Highlighter-derived themes here: [[[black-highlighter-themes | ]]]

For functional changes, try these:

* **[[[component:bhl-dark-sidebar|]]]:** {{@@[[include :scp-wiki:component:bhl-dark-sidebar]]@@}}
* **[[[component:collapsible-sidebar|]]]:** {{@@[[include :scp-wiki:component:collapsible-sidebar]]@@}}
* **[[[component:toggle-sidebar-bhl|]]]:** {{@@[[include :scp-wiki:component:toggle-sidebar-bhl]]@@}}
* **[[[component:centered-header-bhl|]]]:** {{@@[[include :scp-wiki:component:centered-header-bhl]]@@}}

 _

-----

 _

+ Theme Colors

[[include :scp-wiki:component:theme-squares -=-
| color1-name=Payne's Grey
| color1-variable=--gray-monochrome
| color1-info=(66, 66, 72)
| color1-has-light-text=1
| color2-name=Rosewood
| color2-variable=--bright-accent
| color2-info=(133, 0, 5)
| color2-has-light-text=1
| subcolor1-name=Alto
| subcolor1-variable=--very-light-gray-monochrome
| subcolor1-info=(215, 215, 215)
| subcolor2-name=White Smoke
| subcolor2-variable=--pale-gray-monochrome
| subcolor2-info=(244, 244, 244)
| subcolor3-name=Bastille
| subcolor3-variable=--dark-gray-monochrome
| subcolor3-info=(48, 48, 52)
| subcolor3-has-light-text=1
| subcolor4-name=Buccaneer
| subcolor4-variable=--medium-accent
| subcolor4-info=(100, 46, 44)
| subcolor4-has-light-text=1
| subcolor5-name=Maroon
| subcolor5-variable=--dark-accent
| subcolor5-info=(100, 3, 15)
| subcolor5-has-light-text=1
| subcolor6-name=Mango Tango
| subcolor6-variable=--newpage-color
| subcolor6-info=(221, 102, 17)
]]

 _

+ Syntax Examples

[[include component:image-block
| name=https://cdn.scpwiki.com/theme/en/black-highlighter/img/logo.svg
| caption=SCP Foundation Logo
| width=200px
]]

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]]

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

-----

 _

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

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 This empty tab has a really long name for some odd reason. I wonder why? It is very strange.]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[/tabview]]

[[div class="blockquote"]]
This is a blockquote, created by enclosing its contents with {{[[div class="blockquote"]]}} on the line before and {{[[/div]]}} on the line after.

-----

[[div class="blockquote"]]
Blockquotes, and all divs, can be nested.
[[/div]]
[[/div]]

||~ Here's an ||~ example ||
|| of a || table ||

 _

[[=]]
[[div_ class="fonts-display"]]
The body, [[span class="title-font"]]title,[[/span]] and [[span class="header-font"]]header[[/span]] font is [https://rsms.me/inter/ Inter].
[[span class="UI-font"]]The UI font is [https://www.paratype.com/fonts/pt/pt-root-ui PT Root UI].[[/span]] 
[[span class="mono-font"]]The monospaced font is [https://www.recursive.design/ Recursive].[[/span]]
[[/div]]

All fonts are licensed under the [http://scripts.sil.org/OFL SIL Open Font License, Version 1.1]
[[/=]]

-----
[[/iftags]]

Black Highlighter Theme

Module Styles

Inline Styles

Includes

CSS Classes

Page Source