Theming
Your brand, your colors, & your docs
Your colors, your fonts, your corners, your dark mode. Everything visual reads a CSS variable, so you change values rather than templates, and your docs end up looking like part of your product instead of a plugin bolted onto it.
Ready made
Drag any of these to see light and dark
Real screenshots of the same documentation site, themed four ways. Every one handles light and dark separately, so dark mode is designed rather than being a washed out inversion. Copy any of them and paste it straight in.
Ocean
A calm, conventional starting point. Saturated blue on white, softened on near black. If you want your docs to look unremarkable in the best sense, start here.
Neon Pulse
Gradient wash on the page, pink to cyan gradient text on the title, a glowing active nav item, and a frosted glass topbar. Everything past the variables is plain CSS appended underneath.
Brutalist Mono
The opposite direction. Monospace throughout, zero radius, heavy borders, uppercase nav, and an active state that fills solid and inverts rather than tinting.
Terminal
Green phosphor CRT in dark mode with scanlines and a slow flicker, dot matrix printout in light mode. A blinking cursor follows the page title.
Two of these go well past color. Neon Pulse adds a gradient background wash, gradient title text, and a frosted topbar. Terminal adds scanlines, a phosphor glow, and a blinking cursor. Both are plain CSS appended after the variables, in the same field, with nothing in the plugin source touched.
How
Three steps, and one of them is optional
Take one of the four above as it is, or start from the base file and make it yours.
Copy a theme, or the base file
The four above are finished. The base file below is every variable at its default, with a comment on each one saying what it touches.
Make it yours
Edit the values by hand, or hand the file to an AI with your hex codes, a screenshot, or a description of your brand and ask it to change them.
Paste and save
Settings, then Custom Code, then the Custom CSS field. It loads after the plugin stylesheet, so your values win without any override tricks.
Build your own with AI
Copy this file, paste it into any AI, describe your brand
This is every variable the plugin reads, at its default, with a comment on each line saying what it controls. That last part is what makes it work. An AI given this file knows exactly what exists and what each value does, so it changes numbers instead of guessing at variable names that were never there.
-
1
Copy the whole file
Comments included. They are the instructions, not decoration.
-
2
Paste it into your AI of choice
ChatGPT, Claude, whatever you already use. Then add one line about what your brand looks like.
-
3
Give it something to work from
Hex codes, a screenshot of your site, a link to it, or a description in plain words. Any of them is enough.
-
4
Paste the result into Custom CSS
Settings, then Custom Code. Look at your docs, and if something is off, say which part and ask again.
Here is the theme file for a WordPress docs plugin. Change only the values, never the variable names, and keep every variable that is already there.
Our brand is deep green with cream backgrounds, we use Poppins, and we like generous rounded corners. Make the dark mode properly dark rather than a grey wash, and keep body text readable at 4.5 to 1 contrast or better.
wp-super-docs-theme.css
If something does not change, check the variable name. The plugin only reads the names in this file. Anything invented alongside them is ignored by the browser, silently, which looks like the theme half worked. Paste the file back in and ask for the same names with different values.
Every plan includes theming.
There is no design tier. The variables are the same whether you bought five sites or a lifetime licence.
