bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Need to account for theme setting when using prefers-color-scheme: dark

Browse Source
This commit is contained in:
Jason Zimdars
2025-12-08 17:46:10 -06:00
parent 5175353979
commit 6e19e17ca4
13 changed files with 105 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/bar.css
+7 -1
View File
@@ -19,10 +19,16 @@
view-transition-name: bar;
z-index: var(--z-bar);
@media (prefers-color-scheme: dark) {
html[data-theme="dark"] & {
border-block: 1px solid var(--color-ink-lighter);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme]) & {
border-block: 1px solid var(--color-ink-lighter);
}
}
&:has(.bar__placeholder[hidden]) {
padding-inline: 1ch;
}
app/assets/stylesheets/base.css
+7 -1
View File
@@ -55,9 +55,15 @@
::selection {
background: var(--color-selected);
@media (prefers-color-scheme: dark) {
html[data-theme="dark"] & {
background-color: var(--color-selected-dark);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme]) & {
background-color: var(--color-selected-dark);
}
}
}
:where(ul, ol):where([role="list"]) {
app/assets/stylesheets/buttons.css
+7 -1
View File
@@ -27,10 +27,16 @@
}
}
@media (prefers-color-scheme: dark) {
html[data-theme="dark"] & {
--btn-hover-brightness: 1.25;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme]) & {
--btn-hover-brightness: 1.25;
}
}
&[disabled],
&:has([disabled]),
[disabled] &[type=submit],
app/assets/stylesheets/card-columns.css
+7 -1
View File
@@ -179,9 +179,15 @@
outline: var(--focus-ring-size) solid var(--color-selected-dark);
outline-offset: var(--focus-ring-offset);
@media (prefers-color-scheme: dark) {
html[data-theme="dark"] & {
outline-color: oklch(var(--lch-blue-medium));
}
@media (prefers-color-scheme: dark) {
html:not([data-theme]) & {
outline-color: oklch(var(--lch-blue-medium));
}
}
}
}
app/assets/stylesheets/cards.css
+7 -1
View File
@@ -27,10 +27,16 @@
text-align: start;
z-index: 1;
@media (prefers-color-scheme: dark) {
html[data-theme="dark"] & {
box-shadow: 0 0 0 1px var(--color-ink-lighter);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme]) & {
box-shadow: 0 0 0 1px var(--color-ink-lighter);
}
}
.popup {
inline-size: 260px;
}
app/assets/stylesheets/circled-text.css
+7 -1
View File
@@ -12,9 +12,15 @@
opacity: 0.5;
mix-blend-mode: multiply;
@media (prefers-color-scheme: dark) {
html[data-theme="dark"] & {
mix-blend-mode: screen;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme]) & {
mix-blend-mode: screen;
}
}
}
span::before,
app/assets/stylesheets/inputs.css
+7 -1
View File
@@ -113,10 +113,16 @@
background-repeat: no-repeat;
text-align: start;
@media (prefers-color-scheme: dark) {
html[data-theme="dark"] & {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23fff'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
html:not([data-theme]) & {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23fff'/%3E%3C/svg%3E");
}
}
option {
background-color: var(--color-canvas);
color: var(--color-ink);
app/assets/stylesheets/lexxy.css
+8 -1
View File
@@ -188,10 +188,17 @@
padding: 0.5em 1.8em 0.5em 1.2em;
text-align: start;
@media (prefers-color-scheme: dark) {
html[data-theme="dark"] & {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23fff'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
html:not([data-theme]) & {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23fff'/%3E%3C/svg%3E");
}
}
option {
background-color: var(--color-canvas);
color: var(--color-ink);
app/assets/stylesheets/markdown.css
+8 -1
View File
@@ -24,8 +24,15 @@
}
}
@media (prefers-color-scheme: dark) {
html[data-theme="dark"] & {
filter: invert(1);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme]) & {
filter: invert(1);
}
}
}
}
app/assets/stylesheets/nav.css
+7 -1
View File
@@ -23,9 +23,15 @@
background: var(--color-ink-lighter);
}
@media (prefers-color-scheme: dark) {
html[data-theme="dark"] & {
--input-background: var(--color-ink-lighter);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme]) & {
--input-background: var(--color-ink-lighter);
}
}
}
}
app/assets/stylesheets/reactions.css
+8 -1
View File
@@ -95,9 +95,16 @@
&:not(.expanded):hover {
filter: brightness(var(--reaction-hover-brightness));
@media (prefers-color-scheme: dark) {
html[data-theme="dark"] & {
--reaction-hover-brightness: 1.25;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme]) & {
--reaction-hover-brightness: 1.25;
}
}
}
}
}
app/assets/stylesheets/syntax.css
+17 -1
View File
@@ -14,7 +14,7 @@
--markup-deleted: lch(39.64 68.17 31.45);
/* Redefine named color values for dark mode */
@media (prefers-color-scheme: dark) {
html[data-theme="dark"] {
--keyword: lch(67.63 58.99 30.64);
--entity: lch(75.13 46.73 306.74);
--constant: lch(74.9 39.71 255.53);
@@ -28,6 +28,22 @@
--markup-deleted: lch(73.8% 65 29.18);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme]) {
--keyword: lch(67.63 58.99 30.64);
--entity: lch(75.13 46.73 306.74);
--constant: lch(74.9 39.71 255.53);
--string: lch(74.9 39.71 255.53);
--variable: lch(76.17 61.1 61.97);
--comment: lch(60.83 6.66 254.46);
--entity-tag: lch(83.65 59.31 141.61);
--markup-heading: lch(47.93 71.67 280.72);
--markup-list: lch(83.84 57.9 85.03);
--markup-inserted: lch(83.65 59.31 141.61);
--markup-deleted: lch(73.8% 65 29.18);
}
}
color: var(--color-ink);
.w {
app/assets/stylesheets/trays.css
+8 -1
View File
@@ -300,9 +300,16 @@
border-radius: 0;
}
@media (prefers-color-scheme: dark) {
html[data-theme="dark"] & {
box-shadow: 0 0 0 1px var(--color-ink-lighter);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme]) & {
box-shadow: 0 0 0 1px var(--color-ink-lighter);
}
}
}
.card__background {