fix(reader): dark text on dark themes and add toggle icons

Two fixes:

1. Remove base typography block from foliate-themes.css. The html/body
   rules were unlayered CSS that overrode the chrome theme's layered
   body styles, causing dark reading theme text colors (--reader-text)
   to apply to the outer chrome UI on dark backgrounds. These styles
   are only meant for the shadow DOM, which getCSS() already handles.

2. Move missing typography rules (img, blockquote, a, p orphans/widows)
   into getCSS() so the shadow DOM still gets them.

3. Add sun/moon emoji indicators to the light/dark toggle switch.
This commit is contained in:
2026-04-19 20:12:34 -04:00
parent 48a8716a25
commit 36de7cfa2f
5 changed files with 31 additions and 52 deletions
+20
View File
@@ -59,6 +59,26 @@ const getCSS = ({
aside[epub|type~="rearnote"] {
display: none;
}
img, svg, video {
max-width: 100%;
height: auto;
display: block;
margin: 0.5em auto;
}
p {
orphans: 3;
widows: 3;
}
blockquote {
margin: 1em 0;
padding-left: 1em;
border-left: 3px solid ${link};
font-style: italic;
}
a {
color: ${link};
text-decoration: underline;
}
`;
};
document.addEventListener("alpine:init", () => {
+1 -43
View File
@@ -256,46 +256,4 @@
--reader-link: #268bd2;
--reader-selection: #073642;
}
/* ==========================================
BASE TYPOGRAPHY (applies to all themes)
========================================== */
html,
body {
background-color: var(--reader-bg);
color: var(--reader-text);
font-family: var(--reader-font, "Literata", serif);
font-size: var(--reader-font-size, 16px);
line-height: var(--reader-line-height, 1.6);
margin: var(--reader-margin, 20px);
padding: var(--reader-margin, 20px);
}
/* Links */
a {
color: var(--reader-link);
text-decoration: underline;
}
/* Text selection */
::selection {
background-color: var(--reader-selection);
}
/* Images */
img,
svg,
video {
max-width: 100%;
height: auto;
display: block;
margin: 0.5em auto;
}
/* Prevent orphans/widows */
p {
orphans: 3;
widows: 3;
}
/* Block quotes */
blockquote {
margin: 1em 0;
padding-left: 1em;
border-left: 3px solid var(--reader-link);
font-style: italic;
}
+1 -1
View File
File diff suppressed because one or more lines are too long