View Single Post
Old 01-19-2023, 12:01 PM   #12
jgneff
Member
jgneff brings flavor and color to the partyjgneff brings flavor and color to the partyjgneff brings flavor and color to the partyjgneff brings flavor and color to the partyjgneff brings flavor and color to the partyjgneff brings flavor and color to the partyjgneff brings flavor and color to the partyjgneff brings flavor and color to the partyjgneff brings flavor and color to the partyjgneff brings flavor and color to the partyjgneff brings flavor and color to the party
 
jgneff's Avatar
 
Posts: 21
Karma: 147742
Join Date: Nov 2017
Location: Vancouver, BC, Canada
Device: Kobo Touch B/C, Kobo Glo HD, Kobo Clara HD, Kobo Libra 2
SVG filters and CSS style for dark mode

I doubt e-readers have support for SVG filters, but the following added to your SVG file works pretty well in most browsers for general dark-mode support. Just add it right after the opening svg element.

Code:
<filter id="darkmode">
    <!-- Same as CSS 'filter: invert(1)' but in linear RGB -->
    <feComponentTransfer>
        <feFuncR type="table" tableValues="1 0"/>
        <feFuncG type="table" tableValues="1 0"/>
        <feFuncB type="table" tableValues="1 0"/>
    </feComponentTransfer>
    <!-- Same as CSS 'filter: hue-rotate(180deg)' -->
    <feColorMatrix type="hueRotate" values="180"/>
    <!-- Gamma function: C' = amplitude * pow(C, exponent) + offset -->
    <feComponentTransfer>
        <feFuncR type="gamma" exponent="2.2"/>
        <feFuncG type="gamma" exponent="2.2"/>
        <feFuncB type="gamma" exponent="2.2"/>
    </feComponentTransfer>
</filter>
<style>
@media (prefers-color-scheme: dark) {
    svg {filter: url('#darkmode');}
}
</style>
It inverts the colors (really just to go from light to dark), swings back around 180 degrees to the original color hues, and then converts the gamma back to sRGB from linear RGB. You can try changing or removing the gamma function if it's too dark even for dark mode.

Last edited by jgneff; 01-19-2023 at 02:48 PM.
jgneff is offline   Reply With Quote