fourpoints / reader-mode

A Firefox-inspired reader mode that toggles font and theme using css-variables and js.

reader-mode

A Firefox-inspired reader mode that toggles font and theme using css-variables and js.

Include the following in your html file

<script src="path/to/mode.js" defer></script>
<link rel="stylesheet" id="mode-css" href="path/to/themes/light.css">
<link rel="stylesheet" href="path/to/mode.css">

Include light.css, sepia.css, solarized.css, and dark.css in the themes folder.

Include the following in mode.css

:root {
	--mode-font-family: sans-serif;
	--mode-font-size: 16px;
	--mode-line-height: 24px;
	--mode-content-width: 800px;
}

and use the css var() function in a class to use these settings. e.g.

.content {font-family: var(--mode-font-family);