## <span style="color:#c00000">Red</span>
- <span style="font-size:1.2em; font-style:italic;font-weight: bold">dark</span> mode: `#d02020`
- <span style="font-size:1.2em; font-style:italic;font-weight: bold">light</span> mode: `#c00000`
## <span style="color:#00b050">Green</span>
- `#00b050`
## <span style="color:#ff8c00">Yellow</span>
- `#ff8c00`
## <span style="color:#d2b48c">Tan</span>
- <span style="font-size:1.2em; font-style:italic;font-weight: bold">dark</span> mode: `#d2b48c`
- <span style="font-size:1.2em; font-style:italic;font-weight: bold">light</span> mode: `#9a6a32`
## <span style="color:#c800ff">Pink</span>
- `#c800ff`
## <span style="color:#7030a0">Purple</span>
- <span style="font-size:1.2em; font-style:italic;font-weight: bold">dark</span> mode: `#b388ff`
- <span style="font-size:1.2em; font-style:italic;font-weight: bold">light</span> mode: `#7030a0`
## <span style="color:#00b0f0">Blue</span>
- `#00b0f0`
***
##### Instructions for displaying the colors properly are stored:
- in `[vault]\.obsidian\snippets\colored-text.css` for ***local*** Obsidian
- in `[vault]\publish.css` for ***Obsidian Publish***/`Webobsedapka`
***
### `colored-text.css` <span style="font-size:0.7em; font-style:italic">(as of 25 July 2026)</span>
```
/* =========================================================
THEME-AWARE RED
Canonical: #c00000 / rgb(192, 0, 0)
Dark variant: #d02020 / rgb(208, 32, 32)
========================================================= */
.theme-light span[style*="#c00000" i],
.theme-light span[style*="#d02020" i],
.theme-light span[style*="rgb(192, 0, 0)" i],
.theme-light span[style*="rgb(192,0,0)" i],
.theme-light span[style*="rgb(208, 32, 32)" i],
.theme-light span[style*="rgb(208,32,32)" i] {
color: #c00000 !important;
}
.theme-dark span[style*="#c00000" i],
.theme-dark span[style*="#d02020" i],
.theme-dark span[style*="rgb(192, 0, 0)" i],
.theme-dark span[style*="rgb(192,0,0)" i],
.theme-dark span[style*="rgb(208, 32, 32)" i],
.theme-dark span[style*="rgb(208,32,32)" i] {
color: #d02020 !important;
}
/* =========================================================
THEME-AWARE TAN
Canonical: #d2b48c / rgb(210, 180, 140)
Light variant: #9a6a32 / rgb(154, 106, 50)
========================================================= */
.theme-light span[style*="#d2b48c" i],
.theme-light span[style*="#9a6a32" i],
.theme-light span[style*="rgb(210, 180, 140)" i],
.theme-light span[style*="rgb(210,180,140)" i],
.theme-light span[style*="rgb(154, 106, 50)" i],
.theme-light span[style*="rgb(154,106,50)" i] {
color: #9a6a32 !important;
}
.theme-dark span[style*="#d2b48c" i],
.theme-dark span[style*="#9a6a32" i],
.theme-dark span[style*="rgb(210, 180, 140)" i],
.theme-dark span[style*="rgb(210,180,140)" i],
.theme-dark span[style*="rgb(154, 106, 50)" i],
.theme-dark span[style*="rgb(154,106,50)" i] {
color: #d2b48c !important;
}
/* =========================================================
THEME-AWARE PURPLE
Canonical: #7030a0 / rgb(112, 48, 160)
Dark variant: #b388ff / rgb(179, 136, 255)
========================================================= */
.theme-light span[style*="#7030a0" i],
.theme-light span[style*="#b388ff" i],
.theme-light span[style*="rgb(112, 48, 160)" i],
.theme-light span[style*="rgb(112,48,160)" i],
.theme-light span[style*="rgb(179, 136, 255)" i],
.theme-light span[style*="rgb(179,136,255)" i] {
color: #7030a0 !important;
}
.theme-dark span[style*="#7030a0" i],
.theme-dark span[style*="#b388ff" i],
.theme-dark span[style*="rgb(112, 48, 160)" i],
.theme-dark span[style*="rgb(112,48,160)" i],
.theme-dark span[style*="rgb(179, 136, 255)" i],
.theme-dark span[style*="rgb(179,136,255)" i] {
color: #b388ff !important;
}
```
(The same must be appended to `publish.css` for proper display on the web.)