Custom CSS

Custom CSS can be added in More » Settings » Reader » "Html CSS" and will be injected into the reader when viewing a chapter.

You can use CSS to adjust colors, margins, spacing, and more.
If you are new to CSS, see the guide: CSS styling basics.

Exposed CSS variables

The reader provides several CSS variables that you can use in your custom styles:

• Text size → --shosetsu-text-size
• Paragraph indent → --shosetsu-indent-size
• Paragraph spacing → --shosetsu-paragraph-spacing

These values are linked to the reader settings, so any changes made there will automatically apply to your custom CSS.

Color variables

The reader exposes multiple color variables using the --md-sys-color- prefix.
You can find the full list of varibales used in Shosetsu here.

These color names follow the naming scheme from Material Design used by Material Web. For guidance on how Material color tokens are intended to be used, see: Material Web - Color