1
0
mirror of https://github.com/Pathduck/pathduck.github.io.git synced 2025-12-29 11:45:20 -05:00
Files
pathduck.github.io/test/themecolors/color-variable-all.html
2025-06-01 11:43:10 +02:00

71 lines
4.4 KiB
HTML
Executable File

<html>
<head>
<title>Themecolors Test Page</title>
<style>body {color: white; background: darkslategray;} a {color: deepskyblue;}</style>
<style>
div {text-shadow: white 1px 1px; font-weight: bolder; padding: 10px; border-radius: var(--radius);}
</style>
</head>
<body>
<div style="background: var(--colorFg)">colorFg</div>
<div style="background: var(--colorBg)">colorBg</div>
<div style="background: var(--colorHighlightFg)">colorHighlightFg</div>
<div style="background: var(--colorHighlightBg)">colorHighlightBg</div>
<div style="background: var(--colorAccentFg)">colorAccentFg</div>
<div style="background: var(--colorAccentBg)">colorAccentBg</div>
<div style="background: var(--colorTabBar)">colorTabBar</div>
<div style="background: var(--colorFgAlpha)">colorFgAlpha</div>
<div style="background: var(--colorFgIntense)">colorFgIntense</div>
<div style="background: var(--colorFgFaded))">colorFgFaded</div>
<div style="background: var(--colorFgFadedMore)">colorFgFadedMore</div>
<div style="background: var(--colorFgFadedMost)">colorFgFadedMost</div>
<div style="background: var(--colorBgAlpha)">colorBgAlpha</div>
<div style="background: var(--colorBgAlphaHeavy)">colorBgAlphaHeavy</div>
<div style="background: var(--colorBgAlphaHeavier)">colorBgAlphaHeavier</div>
<div style="background: var(--colorBgAlphaBlur)">colorBgAlphaBlur</div>
<div style="background: var(--colorBgDark)">colorBgDark</div>
<div style="background: var(--colorBgDarker)">colorBgDarker</div>
<div style="background: var(--colorBgLight)">colorBgLight</div>
<div style="background: var(--colorBgLighter)">colorBgLighter</div>
<div style="background: var(--colorBgLightIntense)">colorBgLightIntense</div>
<div style="background: var(--colorBgIntense)">colorBgIntense</div>
<div style="background: var(--colorBgIntenser)">colorBgIntenser</div>
<div style="background: var(--colorBgIntserAlpha)">colorBgIntserAlpha</div>
<div style="background: var(--colorBgInverse)">colorBgInverse</div>
<div style="background: var(--colorBgInverser)">colorBgInverser</div>
<div style="background: var(--colorBgFaded)">colorBgFaded</div>
<div style="background: var(--colorHighlightBgFaded)">colorHighlightBgFaded</div>
<div style="background: var(--colorHighlightBgAlpha)">colorHighlightBgAlpha</div>
<div style="background: var(--colorHighlightBgDark)">colorHighlightBgDark</div>
<div style="background: var(--colorHighlightFgAlpha)">colorHighlightFgAlpha</div>
<div style="background: var(--colorHighlightFgAlphaHeavy)">colorHighlightFgAlphaHeavy</div>
<div style="background: var(--colorAccentBgAlpha)">colorAccentBgAlpha</div>
<div style="background: var(--colorAccentBgAlphaHeavy)">colorAccentBgAlphaHeavy</div>
<div style="background: var(--colorAccentBgDark)">colorAccentBgDark</div>
<div style="background: var(--colorAccentBgDarker)">colorAccentBgDarker</div>
<div style="background: var(--colorAccentBgFaded)">colorAccentBgFaded</div>
<div style="background: var(--colorAccentBgFadedMore)">colorAccentBgFadedMore</div>
<div style="background: var(--colorAccentBgFadedMost)">colorAccentBgFadedMost</div>
<div style="background: var(--colorAccentBorder)">colorAccentBorder</div>
<div style="background: var(--colorAccentBorderDark)">colorAccentBorderDark</div>
<div style="background: var(--colorAccentFgFaded)">colorAccentFgFaded</div>
<div style="background: var(--colorAccentFgAlpha)">colorAccentFgAlpha</div>
<div style="background: var(--colorAccentFgAlphaHeavy)">colorAccentFgAlphaHeavy</div>
<div style="background: var(--colorBorder)">colorBorder</div>
<div style="background: var(--colorBorderDisabled)">colorBorderDisabled</div>
<div style="background: var(--colorBorderSubtle)">colorBorderSubtle</div>
<div style="background: var(--colorBorderIntense)">colorBorderIntense</div>
<div style="background: var(--colorSuccessBg)">colorSuccessBg</div>
<div style="background: var(--colorSuccessBgAlpha)">colorSuccessBgAlpha</div>
<div style="background: var(--colorSuccessFg)">colorSuccessFg</div>
<div style="background: var(--colorWarningBg)">colorWarningBg</div>
<div style="background: var(--colorWarningBgAlpha)">colorWarningBgAlpha</div>
<div style="background: var(--colorWarningFg)">colorWarningFg</div>
<div style="background: var(--colorErrorBg)">colorErrorBg</div>
<div style="background: var(--colorErrorBgAlpha)">colorErrorBgAlpha</div>
<div style="background: var(--colorErrorFg)">colorErrorFg</div>
<div style="background: var(--colorWindowBg)">colorWindowBg</div>
<div style="background: var(--colorWindowFg)">colorWindowFg</div>
</body>
</html>