Custom Themes
OwnShip's three built-in themes — Light, Dark, and Sepia — cover most sites. For full color control, place a _theme.css file next to index.php. OwnShip loads it automatically after the built-in styles, no configuration needed.
How it works
_theme.css uses standard CSS to override any of OwnShip's color variables for any or all of the three themes. Be as sparse or as complete as you like — anything you don't override inherits from the built-in theme.
/* _theme.css — override only what you need */
[data-theme="light"] {
--heading: #1a3a6b;
--link: #1a3a6b;
}
The three selectors are [data-theme="light"], [data-theme="dark"], and [data-theme="sepia"].
Available variables
| Variable | Controls |
|---|---|
--bg | Page background |
--bg-nav | Nav pane background |
--bg-code | Code block background |
--border | Borders and dividers |
--text | Body text |
--text-muted | Secondary text |
--heading | Heading color (h1–h6) |
--link | Link color |
--link-hover | Link hover color |
--active-bg | Nav item highlight background |
--active | Nav active item text color |
--head-bg | Header and footer background |
Notes
_theme.cssapplies to the root directory only.show_theme_buttonworks normally — readers can still cycle themes, and your overrides apply within whichever theme they choose._theme.cssis plain CSS — variable overrides are just the starting point.