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:
@@ -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", () => {
|
||||
|
||||
Reference in New Issue
Block a user