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", () => {