stian/pathduck.github.io
1
0
Fork 0
mirror of https://github.com/Pathduck/pathduck.github.io.git synced 2026-07-16 16:42:00 -04:00
Code Activity

Update themecolors

Browse Source
This commit is contained in:
Stian
2025-01-15 12:45:01 +01:00
parent 8b06e1a9cd
commit aa14ce6d89
4 changed files with 157 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
test/themecolors/color-variable-test.html
Executable
+51
View File
@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Theme inheritance test</title>
<meta name="content-type" content="text/html; charset=UTF-8" />
<style>
/* inherited theme colors */
body {
color: var(--colorFg);
background-color: var(--colorBg);
padding: 1rem;
}
em {
color: var(--colorHighlightFg);
background-color: var(--colorHighlightBg);
border-radius: var(--radius);
padding: 0 0.3rem;
}
/* variable calculation */
strong {
--blackOrWhite: rgb(
calc(255 * var(--isDarkTheme, 0)),
calc(255 * var(--isDarkTheme, 0)),
calc(255 * var(--isDarkTheme, 0))
);
color: var(--blackOrWhite);
}
/* container test */
.visibility-test {
container-name: vTest;
}
@container vTest style(--isDarkTheme: 0) {
.dark { display: none; }
}
@container vTest style(--isDarkTheme: 1) {
.light { display: none; }
}
</style>
</head>
<body>
<p>
Testing <em>theme color</em> inheritance.
</p>
<p class="visibility-test">It is a
<strong class="dark">dark</strong>
<strong class="light">light</strong>
theme.
</p>
</body>
</html>