h

Customizing the theme of your page is relatively simple. However, every theme is different, which means you have to know how to read their code. Generally, there are two things you'd want to do to a theme:

• Change variables in the theme (this could be font, color, images, etc)
• Change/create divs (which is its own can of worms)

To start, you need to decide what theme you're going to alter (or just hallprint). Then you need to create a CSS module. That's done by adding this at the top (or bottom, depending on what you prefer) of the page:

[[include :backrooms-wiki:theme:base-theme]] [!-- this adds your theme of choice --]

[[module CSS]] [!-- this is what will hold your code --]

Code goes here!

[[/module]]

_{note: remove the comments}

Now comes the fun part, altering the theme! In order to do that, you have to look in the code of your theme. Every theme based on Black Highlighter (which is Nuliminal, Hallprint, and everything based off of those two themes, which is a majority of themes here) should be formatted roughly the same. In the code, you should see:

:root {
 
    /* VARIABLES HERE */
 
}

As an example, my theme, Firekeepers is based on Hallprint, and the variables look like this:

:root {
 
    --logo-image: url("http://roboboxium.wikidot.com/local--files/theme:firekeepers/firekeepersLogo1.png");
    --header-title: "The Firekeepers";
    --header-subtitle: "On the tails side.";
    --pale-gray-monochrome: 35, 30, 25;
    --very-light-gray-monochrome: 200, 5, 25;
    --white-monochrome: 237,228,200;
    --light-pale-gray-monochrome: 217,208,180;
    --light-gray-monochrome: 21,33,38;
    --gray-monochrome: 240,30,1;
    --dark-gray-monochrome: 255, 150, 10;
    --black-monochrome: 240, 235, 190;
    --bright-accent: 155,40,15;
    --medium-accent: NONE;
    --dark-accent: 25,20,5;
    --pale-accent: 25,20,5;
    --swatch-topmenu-border-color: var(--gray-monochrome);
    --link-color: 255,40,15;
    --hover-link-color: 255,75,50;
    --alt-accent: 255,5,5;
    --background-gradient-distance: 20rem;
    /* CONTINUES FOR 17 MORE LINES */
 
}

At first, that may seem intimidating, or like a lot. But worry not! Variables (except for color swatches) should be named in a somewhat self-explanatory way! For example, what do you think --link-color is? It's the link color when not hovered over. For all the color swatches, like --black-monochrome (which in the example theme is most definitely not black), you can change its value, and see what comes of it.

But how do you even change the variables at all? Let's say that I want to change those two variables I mentioned in the above paragraph.