Themes

How to make themes for this website

Looking to use themes?

Check out the settings page.

Current theme format version: v1.0

Here's the default theme and your currently loaded theme side by side. Click the default theme to apply it to see how it reflects the design)

A theme is composed of seven colors:

• Text
• Subtext
• Text alternate
• Accent
• Accent darker
• Background
• Background alternate

It's structed to have a foreground, background, and accent. Variants are also sprinkled in, with the background and accent colors having an alternate color and text having two alternates.

Text

Subtext is the main text color. It's used for normal text, like the body of the blog, other pages etc. While I'm no color expert, the default theme was created with enough contrast to be easily legible but not so much that it hurts the eyes to read for prolonged periods of time.

There are two variants for highlighting text and other, usually decorative text, Text and Text alternate. Text is used when dealing with headers or important text you want to pop out. Text alternate is used mainly for decorative purposes, e.g. the dots on the home page and the slashes seperating the path in the navbar.

Background

Background is... well... the background color. Not much to say. Background alternate is for elevating content above the background, e.g. Cards, boxes, and things I want to call attention to.

Accent

Accent is the highlighter of the group. It adds a splash of color to the otherwise bland palettes. Without it, this website would be a lot more boring. Since my logo is an SVG, I wanted to make it fit in with the user's theme. Accent darker serves that purpose. It's used as the background of my logo. Please make sure the contrast between Accent and Accent darker is the same as or close to that of the default theme.

Quality Checks

If you want to make a theme, go ahead! You can apply it locally via the tool down below. If you want a theme added to the website however, there are a few criteria you need to make sure your theme matches:

1. It's pleasant to look at. Nobody wants to subject themselves to the terrible coloring that was present in the early days of the web
2. It follows the guidelines I stated. If it looks good in use now, let's make sure it looks good in the future, as I only test with the default theme.
3. Usually, the background and foreground colors will be more bland while the accent color provides the visual zing. This is just a tip and not necessarily a requirement.
4. Most importantly, if you know what you're doing, feel free to break any of these rules. I'm not a graphic designer and I don't know much about colors, as this was just my take on making a theme system. The main rule of thumb: If it looks good, I'll add it.

Sounds good? Join my Discord server and submit your theme!

Theme Editor

Contrast Checker