techit/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add dark mode support (hooray!)
Deploy to GitHub Pages / build (push) Has been cancelled
Details
Deploy to GitHub Pages / deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Techit Thawiang
2025-10-27 18:20:02 +07:00
parent 41678352ae
commit c5a2a9191a
1 changed files with 35 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/css/style.css
+35 -33
View File
@@ -7,8 +7,10 @@
--ui-header-height: calc(var(--ui-spacing)*14); --ui-header-height: calc(var(--ui-spacing)*14);
--ui-header-height-collapsed: calc(var(--ui-spacing)*12); --ui-header-height-collapsed: calc(var(--ui-spacing)*12);
--color-surface-background: #f9f9f9; --color-surface-container: #f9f9f9;
--color-on-surface-background: #111111; --color-on-surface-container: #111111;
--color-inverse-surface-container: #111111;
--color-on-inverse-surface-container: #f9f9f9;
--color-primary: #1a1a1a; --color-primary: #1a1a1a;
--color-primary-strong: #3e3e3e; --color-primary-strong: #3e3e3e;
--color-on-primary: #eeeeee; --color-on-primary: #eeeeee;
@@ -35,26 +37,26 @@
--ease-fluid-in: .6, .2, .7, .4; --ease-fluid-in: .6, .2, .7, .4;
--ease-out-back: 0.34, 1.56, 0.64, 1; --ease-out-back: 0.34, 1.56, 0.64, 1;
} }
/*
Coming soon...
@media screen and (prefers-color-scheme: dark) { @media screen and (prefers-color-scheme: dark) {
:root { :root {
--color-surface-background: #111111; --color-surface-container: #111111;
--color-on-surface-background: #f9f9f9; --color-on-surface-container: #eeeeee;
--color-primary: #d9d9d9; --color-inverse-surface-container: #eeeeee;
--color-primary-strong: #c0c0c0; --color-on-inverse-surface-container: #111111;
--color-on-primary: #111111; --color-primary: #eeeeee;
--color-on-primary-weak: #2e2e2e; --color-primary-strong: #dadada;
--color-secondary: #2e2e2e; --color-on-primary: #1a1a1a;
--color-secondary-strong: #3e3e3e; --color-on-primary-weak: #292929;
--color-on-secondary: #efefef; --color-secondary: #1d1d1d;
--color-container: #0e0e0e; --color-secondary-strong: #2f2f2f;
--color-on-container: #f8f8f8; --color-on-secondary: #e4e4e4;
--color-outline-very-intense: #5f5f5f; --color-container: #1f1f1f;
--color-outline-intense: #3f3f3f; --color-on-container: #dfdfdf;
--color-outline: #262626; --color-outline-very-intense: #4d4d4d;
--color-outline-intense: #3e3e3e;
--color-outline: #2d2d2d;
} }
} */ }
@keyframes ring { @keyframes ring {
0% { 0% {
outline: 0px solid var(--ui-ring-color); outline: 0px solid var(--ui-ring-color);
@@ -87,8 +89,8 @@ body,main {
font-family: var(--font-sans); font-family: var(--font-sans);
padding: 0; padding: 0;
margin: 0; margin: 0;
color: var(--color-on-surface-background); color: var(--color-on-surface-container);
background: var(--color-surface-background); background: var(--color-surface-container);
line-height: 1.35; line-height: 1.35;
} }
img { img {
@@ -145,8 +147,8 @@ h6 { font-size: 0.90em; }
} }
.web-header.web-header-bg, .web-header.web-header-bg,
.hamburger-menu-header.hamburger-menu-header-bg { .hamburger-menu-header.hamburger-menu-header-bg {
background: #ffffff; background: var(--color-secondary);
color: black; color: var(--color-on-secondary);
border-bottom: 1px solid var(--color-outline); border-bottom: 1px solid var(--color-outline);
} }
.web-header-logo-banner { .web-header-logo-banner {
@@ -329,19 +331,19 @@ p {
background: var(--color-on-primary); background: var(--color-on-primary);
} }
.article.article-footer .web-footer-link > a:hover { .article.article-footer .web-footer-link > a:hover {
color: white; color: var(--color-on-primary);
text-decoration: underline; text-decoration: underline;
text-decoration-style: dotted; text-decoration-style: dotted;
background: none; background: none;
} }
.article.article-footer {
color: var(--color-on-inverse-surface-container);
background: var(--color-inverse-surface-container);
padding-block: calc(var(--ui-spacing)*12);
}
.article.article-footer .web-footer-link > a:active { .article.article-footer .web-footer-link > a:active {
text-decoration-style: solid; text-decoration-style: solid;
} }
.article.article-footer {
color: var(--color-on-primary-weak);
background: var(--color-primary);
padding-block: calc(var(--ui-spacing)*12);
}
.article.article-footer > .web-section { .article.article-footer > .web-section {
display: flex; display: flex;
margin-block: 0; margin-block: 0;
@@ -622,8 +624,8 @@ code, pre, tt, kbd, samp {
.link:hover, .link:hover,
.prose a:hover { .prose a:hover {
text-decoration: none; text-decoration: none;
background: var(--color-on-surface-background); background: var(--color-on-surface-container);
color: var(--color-surface-background); color: var(--color-surface-container);
} }
.link:active, .link:active,
@@ -644,9 +646,9 @@ a.btn {
cursor: pointer; cursor: pointer;
} }
.btn { .btn {
--ui-btn-bg: var(--color-surface-background); --ui-btn-bg: var(--color-surface-container);
--ui-btn-bg-active: var(--color-secondary); --ui-btn-bg-active: var(--color-secondary);
--ui-btn-text: var(--color-on-surface-background); --ui-btn-text: var(--color-on-surface-container);
--ui-btn-border-width: 1px; --ui-btn-border-width: 1px;
--ui-btn-border-color: var(--color-outline); --ui-btn-border-color: var(--color-outline);
--ui-btn-border-style: solid; --ui-btn-border-style: solid;