Spaces:
Sleeping
Sleeping
File size: 1,837 Bytes
c63ff03 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
You can build themes for your [Obsidian Publish](https://help.obsidian.md/Obsidian+Publish/Introduction+to+Obsidian+Publish) site. Themes for Obsidian Publish use the same [[CSS variables]] as the Obsidian app along with [[CSS variables#Obsidian Publish|Publish-specific CSS variables]].
> [!tip] See [[Build a theme]] for more in-depth information on the `body`, `:root`, `.theme-dark`, and `.theme-light` selectors.
To build a theme for your site:
1. Add a file called `publish.css` to the root folder of your vault.
2. Publish `publish.css` to enable the theme on your live Publish site.
**Example:**
```css
:root {
--input-unfocused-border-color: transparent;
--input-disabled-border-color: transparent;
--input-hover-border-color: black;
/* ... By default, nothing is placed within :root in Publish. However, CSS variables here are considered global, and accessible to all sub-elements such as body and .theme-light. */
}
.published-container {
--page-width: 800px;
--page-side-padding: 48px;
/* ... CSS variables for Publish that do not change when light or dark mode is enabled. They sometimes link to color variables in .theme-light or .theme-dark */
}
.body {
--inline-title-color: var(--h1-color);
--h2-color: red;
/* ... CSS variables that do not change when light or dark mode is enabled. They sometimes link to color variables in .theme-light or .theme-dark */
}
.theme-light {
--background-primary: #ebf2ff;
--h1-color: #000000;
/* ... CSS color variables for when light mode is enabled */
}
.theme-dark {
--background-primary: #1f2a3f;
--h1-color: #ffffff;
/* ... CSS color variables for when dark mode is enabled */
}
```
For more information on how to customize your site, refer to [Customize your site](https://help.obsidian.md/Obsidian+Publish/Customize+your+site).
|