# Default Obsidian Theme colors
This table shows default colors used by Obsidian in a table with three columns. The first shows the color as defined in the CSS, the second assigns the value to the foreground color, and the third assigns the value to the background color.
This table has been generated using cut/paste and generous application of regular expression find/replace in VSCode. For the curious, the details are at the bottom.
For each theme:
- the foreground colors are shown against `--background-primary`
- the background colors use `--text-normal` for text
-
## Dark Theme colors
<table>
<tr><td>--background-primary: #202020</td>
<td style="background-color: #202020; color: #202020">foreground</td>
<td style="color: #dcddde; background-color: #202020">background</td></tr>
<tr><td>--background-primary-alt: #1a1a1a</td>
<td style="background-color: #202020; color: #1a1a1a">foreground</td>
<td style="color: #dcddde; background-color: #1a1a1a">background</td></tr>
<tr><td>--background-secondary: #161616</td>
<td style="background-color: #202020; color: #161616">foreground</td>
<td style="color: #dcddde; background-color: #161616">background</td></tr>
<tr><td>--background-secondary-alt: #000000</td>
<td style="background-color: #202020; color: #000000">foreground</td>
<td style="color: #dcddde; background-color: #000000">background</td></tr>
<tr><td>--background-modifier-border: #333</td>
<td style="background-color: #202020; color: #333">foreground</td>
<td style="color: #dcddde; background-color: #333">background</td></tr>
<tr><td>--background-modifier-form-field: rgba(0, 0, 0, 0.3)</td>
<td style="background-color: #202020; color: rgba(0, 0, 0, 0.3)">foreground</td>
<td style="color: #dcddde; background-color: rgba(0, 0, 0, 0.3)">background</td></tr>
<tr><td>--background-modifier-form-field-highlighted: rgba(0, 0, 0, 0.22)</td>
<td style="background-color: #202020; color: rgba(0, 0, 0, 0.22)">foreground</td>
<td style="color: #dcddde; background-color: rgba(0, 0, 0, 0.22)">background</td></tr>
<tr><td>--background-modifier-box-shadow: rgba(0, 0, 0, 0.3)</td>
<td style="background-color: #202020; color: rgba(0, 0, 0, 0.3)">foreground</td>
<td style="color: #dcddde; background-color: rgba(0, 0, 0, 0.3)">background</td></tr>
<tr><td>--background-modifier-success: #197300</td>
<td style="background-color: #202020; color: #197300">foreground</td>
<td style="color: #dcddde; background-color: #197300">background</td></tr>
<tr><td>--background-modifier-error: #3d0000</td>
<td style="background-color: #202020; color: #3d0000">foreground</td>
<td style="color: #dcddde; background-color: #3d0000">background</td></tr>
<tr><td>--background-modifier-error-hover: #470000</td>
<td style="background-color: #202020; color: #470000">foreground</td>
<td style="color: #dcddde; background-color: #470000">background</td></tr>
<tr><td>--background-modifier-cover: rgba(0, 0, 0, 0.8)</td>
<td style="background-color: #202020; color: rgba(0, 0, 0, 0.8)">foreground</td>
<td style="color: #dcddde; background-color: rgba(0, 0, 0, 0.8)">background</td></tr>
<tr><td>--text-accent: #7f6df2</td>
<td style="background-color: #202020; color: #7f6df2">foreground</td>
<td style="color: #dcddde; background-color: #7f6df2">background</td></tr>
<tr><td>--text-accent-hover: #8875ff</td>
<td style="background-color: #202020; color: #8875ff">foreground</td>
<td style="color: #dcddde; background-color: #8875ff">background</td></tr>
<tr><td>--text-normal: #dcddde</td>
<td style="background-color: #202020; color: #dcddde">foreground</td>
<td style="color: #dcddde; background-color: #dcddde">background</td></tr>
<tr><td>--text-muted: #999</td>
<td style="background-color: #202020; color: #999">foreground</td>
<td style="color: #dcddde; background-color: #999">background</td></tr>
<tr><td>--text-faint: #666</td>
<td style="background-color: #202020; color: #666">foreground</td>
<td style="color: #dcddde; background-color: #666">background</td></tr>
<tr><td>--text-error: #ff3333</td>
<td style="background-color: #202020; color: #ff3333">foreground</td>
<td style="color: #dcddde; background-color: #ff3333">background</td></tr>
<tr><td>--text-error-hover: #990000</td>
<td style="background-color: #202020; color: #990000">foreground</td>
<td style="color: #dcddde; background-color: #990000">background</td></tr>
<tr><td>--text-highlight-bg: rgba(255, 255, 0, 0.4)</td>
<td style="background-color: #202020; color: rgba(255, 255, 0, 0.4)">foreground</td>
<td style="color: #dcddde; background-color: rgba(255, 255, 0, 0.4)">background</td></tr>
<tr><td>--text-highlight-bg-active: rgba(255, 128, 0, 0.4)</td>
<td style="background-color: #202020; color: rgba(255, 128, 0, 0.4)">foreground</td>
<td style="color: #dcddde; background-color: rgba(255, 128, 0, 0.4)">background</td></tr>
<tr><td>--text-selection: rgba(23, 48, 77, 0.99)</td>
<td style="background-color: #202020; color: rgba(23, 48, 77, 0.99)">foreground</td>
<td style="color: #dcddde; background-color: rgba(23, 48, 77, 0.99)">background</td></tr>
<tr><td>--text-on-accent: #dcddde</td>
<td style="background-color: #202020; color: #dcddde">foreground</td>
<td style="color: #dcddde; background-color: #dcddde">background</td></tr>
<tr><td>--interactive-normal: #2a2a2a</td>
<td style="background-color: #202020; color: #2a2a2a">foreground</td>
<td style="color: #dcddde; background-color: #2a2a2a">background</td></tr>
<tr><td>--interactive-hover: #303030</td>
<td style="background-color: #202020; color: #303030">foreground</td>
<td style="color: #dcddde; background-color: #303030">background</td></tr>
<tr><td>--interactive-accent: #483699</td>
<td style="background-color: #202020; color: #483699">foreground</td>
<td style="color: #dcddde; background-color: #483699">background</td></tr>
<tr><td>--interactive-accent-hover: #4d3ca6</td>
<td style="background-color: #202020; color: #4d3ca6">foreground</td>
<td style="color: #dcddde; background-color: #4d3ca6">background</td></tr>
<tr><td>--interactive-success: #197300</td>
<td style="background-color: #202020; color: #197300">foreground</td>
<td style="color: #dcddde; background-color: #197300">background</td></tr>
<tr><td>--scrollbar-active-thumb-bg: rgba(255, 255, 255, 0.2)</td>
<td style="background-color: #202020; color: rgba(255, 255, 255, 0.2)">foreground</td>
<td style="color: #dcddde; background-color: rgba(255, 255, 255, 0.2)">background</td></tr>
<tr><td>--scrollbar-bg: rgba(255, 255, 255, 0.05)</td>
<td style="background-color: #202020; color: rgba(255, 255, 255, 0.05)">foreground</td>
<td style="color: #dcddde; background-color: rgba(255, 255, 255, 0.05)">background</td></tr>
<tr><td>--scrollbar-thumb-bg: rgba(255, 255, 255, 0.1)</td>
<td style="background-color: #202020; color: rgba(255, 255, 255, 0.1)">foreground</td>
<td style="color: #dcddde; background-color: rgba(255, 255, 255, 0.1)">background</td></tr>
</table>
Additional:
- --highlight-mix-blend-mode: lighten;
- --background-modifier-error-rgb: 61, 0, 0;
- --text-muted-rgb: 153, 153, 153;
- --interactive-accent-rgb: 72, 54, 153;
- --main
## Light Theme colors
<table>
<tr><td>--background-primary: #ffffff</td>
<td style="background-color: #ffffff; color: #ffffff">foreground</td>
<td style="background-color: #ffffff">background</td></tr>
<tr><td>--background-primary-alt: #f5f6f8</td>
<td style="background-color: #ffffff; color: #f5f6f8">foreground</td>
<td style="background-color: #f5f6f8">background</td></tr>
<tr><td>--background-secondary: #f2f3f5</td>
<td style="background-color: #ffffff; color: #f2f3f5">foreground</td>
<td style="background-color: #f2f3f5">background</td></tr>
<tr><td>--background-secondary-alt: #e3e5e8</td>
<td style="background-color: #ffffff; color: #e3e5e8">foreground</td>
<td style="background-color: #e3e5e8">background</td></tr>
<tr><td>--background-modifier-border: #ddd</td>
<td style="background-color: #ffffff; color: #ddd">foreground</td>
<td style="background-color: #ddd">background</td></tr>
<tr><td>--background-modifier-form-field: #fff</td>
<td style="background-color: #ffffff; color: #fff">foreground</td>
<td style="background-color: #fff">background</td></tr>
<tr><td>--background-modifier-form-field-highlighted: #fff</td>
<td style="background-color: #ffffff; color: #fff">foreground</td>
<td style="background-color: #fff">background</td></tr>
<tr><td>--background-modifier-box-shadow: rgba(0, 0, 0, 0.1)</td>
<td style="background-color: #ffffff; color: rgba(0, 0, 0, 0.1)">foreground</td>
<td style="background-color: rgba(0, 0, 0, 0.1)">background</td></tr>
<tr><td>--background-modifier-success: #A4E7C3</td>
<td style="background-color: #ffffff; color: #A4E7C3">foreground</td>
<td style="background-color: #A4E7C3">background</td></tr>
<tr><td>--background-modifier-error: #990000</td>
<td style="background-color: #ffffff; color: #990000">foreground</td>
<td style="background-color: #990000">background</td></tr>
<tr><td>--background-modifier-error-hover: #bb0000</td>
<td style="background-color: #ffffff; color: #bb0000">foreground</td>
<td style="background-color: #bb0000">background</td></tr>
<tr><td>--background-modifier-cover: rgba(0, 0, 0, 0.8)</td>
<td style="background-color: #ffffff; color: rgba(0, 0, 0, 0.8)">foreground</td>
<td style="background-color: rgba(0, 0, 0, 0.8)">background</td></tr>
<tr><td>--text-accent: #705dcf</td>
<td style="background-color: #ffffff; color: #705dcf">foreground</td>
<td style="background-color: #705dcf">background</td></tr>
<tr><td>--text-accent-hover: #7a6ae6</td>
<td style="background-color: #ffffff; color: #7a6ae6">foreground</td>
<td style="background-color: #7a6ae6">background</td></tr>
<tr><td>--text-normal: #2e3338</td>
<td style="background-color: #ffffff; color: #2e3338">foreground</td>
<td style="background-color: #2e3338">background</td></tr>
<tr><td>--text-muted: #888888</td>
<td style="background-color: #ffffff; color: #888888">foreground</td>
<td style="background-color: #888888">background</td></tr>
<tr><td>--text-faint: #999999</td>
<td style="background-color: #ffffff; color: #999999">foreground</td>
<td style="background-color: #999999">background</td></tr>
<tr><td>--text-error: #800000</td>
<td style="background-color: #ffffff; color: #800000">foreground</td>
<td style="background-color: #800000">background</td></tr>
<tr><td>--text-error-hover: #990000</td>
<td style="background-color: #ffffff; color: #990000">foreground</td>
<td style="background-color: #990000">background</td></tr>
<tr><td>--text-highlight-bg: rgba(255, 255, 0, 0.4)</td>
<td style="background-color: #ffffff; color: rgba(255, 255, 0, 0.4)">foreground</td>
<td style="background-color: rgba(255, 255, 0, 0.4)">background</td></tr>
<tr><td>--text-highlight-bg-active: rgba(255, 128, 0, 0.4)</td>
<td style="background-color: #ffffff; color: rgba(255, 128, 0, 0.4)">foreground</td>
<td style="background-color: rgba(255, 128, 0, 0.4)">background</td></tr>
<tr><td>--text-selection: rgba(204, 230, 255, 0.99)</td>
<td style="background-color: #ffffff; color: rgba(204, 230, 255, 0.99)">foreground</td>
<td style="background-color: rgba(204, 230, 255, 0.99)">background</td></tr>
<tr><td>--text-on-accent: #f2f2f2</td>
<td style="background-color: #ffffff; color: #f2f2f2">foreground</td>
<td style="background-color: #f2f2f2">background</td></tr>
<tr><td>--interactive-normal: #f2f3f5</td>
<td style="background-color: #ffffff; color: #f2f3f5">foreground</td>
<td style="background-color: #f2f3f5">background</td></tr>
<tr><td>--interactive-hover: #e9e9e9</td>
<td style="background-color: #ffffff; color: #e9e9e9">foreground</td>
<td style="background-color: #e9e9e9">background</td></tr>
<tr><td>--interactive-accent: #7b6cd9</td>
<td style="background-color: #ffffff; color: #7b6cd9">foreground</td>
<td style="background-color: #7b6cd9">background</td></tr>
<tr><td>--interactive-accent-hover: #8273e6</td>
<td style="background-color: #ffffff; color: #8273e6">foreground</td>
<td style="background-color: #8273e6">background</td></tr>
<tr><td>--interactive-success: #197300</td>
<td style="background-color: #ffffff; color: #197300">foreground</td>
<td style="background-color: #197300">background</td></tr>
<tr><td>--scrollbar-active-thumb-bg: rgba(0, 0, 0, 0.2)</td>
<td style="background-color: #ffffff; color: rgba(0, 0, 0, 0.2)">foreground</td>
<td style="background-color: rgba(0, 0, 0, 0.2)">background</td></tr>
<tr><td>--scrollbar-bg: rgba(0, 0, 0, 0.05)</td>
<td style="background-color: #ffffff; color: rgba(0, 0, 0, 0.05)">foreground</td>
<td style="background-color: rgba(0, 0, 0, 0.05)">background</td></tr>
<tr><td>--scrollbar-thumb-bg: rgba(0, 0, 0, 0.1)</td>
<td style="background-color: #ffffff; color: rgba(0, 0, 0, 0.1)">foreground</td>
<td style="background-color: rgba(0, 0, 0, 0.1)">background</td></tr>
</table>
Notes:
- --highlight-mix-blend-mode: darken;
- --interactive-accent-rgb: 123, 108, 217;
- --text-muted-rgb: 136, 136, 136;
- --background-modifier-error-rgb: 230, 135, 135;
---
### How to make a table like this without tons of manual effort:
Cut/Paste from pick your favorite theme into a *.md file:
```
--text-accent: #7f6df2;
--text-accent-hover: #8875ff;
--text-normal: #dcddde;
--text-muted: #999;
--text-muted-rgb: 153, 153, 153;
--text-faint: #666;
--text-error: #ff3333;
```
Open the file an editor that supports regular-expressions in search/replace. The following assumes VSCode. To use regular expressions for find/replace, select `.*` in the search box as shown:
![[vscode-regex-find-replace.png]]
For your search expression, use `^\s*(--([a-z-]*)): (.*);` which means:
- `^` from the beginning of the line
- `\s*` skip any leading whitespace
- `(` begin capturing group 1 that contains..
- `--` two dashes
- `(` begin capturing group 2 that contains...
- `[a-z-]*` a combination of lowercase letters and dashes
- `)` end capturing group 2
- `)` end capturing group 1
- `: ` the pattern must now contain a `:` followed by a space ` `
- `(` begin capturing group 3 that contains...
- `.*` any sequence of characters
- `)` end capturing group 3
- `;` the matching pattern must end with a semicolon
We then use the following as a replacement string (with `$1`, `$2`, and `$3` for the capturing groups):
```
<tr><td>$1: $3</td>
<td style="color: $3">foreground</td>
<td style="background-color: $3">background</td></tr>
```
Find/replace all. Add a `<table>` at the top, and a `</table>` at the bottom, make sure there aren't any blank lines in the middle, and you're good to go!
%% Hub footer: Please don't edit anything below this line %%
# This note in GitHub
<span class="git-footer">[Edit In GitHub](https://github.dev/obsidian-community/obsidian-hub/blob/main/04%20-%20Guides%2C%20Workflows%2C%20%26%20Courses/Guides/Default%20Obsidian%20Theme%20Colors.md "git-hub-edit-note") | [Copy this note](https://raw.githubusercontent.com/obsidian-community/obsidian-hub/main/04%20-%20Guides%2C%20Workflows%2C%20%26%20Courses/Guides/Default%20Obsidian%20Theme%20Colors.md "git-hub-copy-note") | [Download this vault](https://github.com/obsidian-community/obsidian-hub/archive/refs/heads/main.zip "git-hub-download-vault") </span>