Readabler JS , Scripts

How to change the Readabler script styles

You can use two ways to change the default Readabler script styles settings :

way 1 (preferred)

Add the styles to <head> </head>of index.html like in the example below

<style>
    :root {
        --readabler-bg: #ffffff;
    }
</style>
way 2

Add the new options via Readabler script. In the example below, the background color is specified via '--readabler-bg': 'green'.

<script>
    window.addEventListener('DOMContentLoaded', () => {
        const readabler = new Readabler( {

        '--readabler-bg': 'green'

        });


    });
</script>

Available Readabler script styles options

Popup styles
OptionDefault valueDescription
–readabler-bg#ffffffThe background color of the popup for the day(light) theme.
–readabler-bg-dark#16191bThe background color of the popup for the night(dark) theme.
–readabler-text#333The text color of the popup for the day(light) theme.
–readabler-text-dark#deeffdThe text color of the popup for the night(dark) theme.
–readabler-colorrgba(33, 150, 243, 1)The base color of the popup for the day(light) theme.
–readabler-color-darkrgba(33, 150, 243, 1)The base color of the popup for the night(dark) theme.
–readabler-color-transparentrgba(33, 150, 243, .2)The color transparent of the popup for the day(light) theme.
–readabler-color-transparent-darkrgba(222, 239, 253, .2)The color transparent of the popup for the night(dark) theme.
–readabler-border-radius20pxThe border-radius of the popup.
–readabler-animate600msThe animation duration of the popup appears.
Readabler script popup styles
Overlay styles
OptionDefault valueDescription
–readabler-overlayrgba(2, 83, 238, .5)The overlay background color.
Open button styles
OptionDefault valueDescription
–readabler-btn-margin10pxThe margin of the button.  You can set the value from 0 to 100 pixels.
–readabler-btn-padding20pxThe padding of the button.  You can set the value from 0 to 100 pixels.
–readabler-btn-radius50px The border-radius of the button.
–readabler-btn-color#ffffffThe text/icon color of the button.
–readabler-btn-color-hoverrgba(33, 150, 243, 1)The hover text/icon color of the button.
–readabler-btn-bgrgba(33, 150, 243, 1)The background color of the button.
–readabler-btn-bg-hover#ffffffThe hover background color of the button.
–readabler-btn-size24pxThe button size.
–readabler-btn-delay0sThe delay before the button appears on the page.
Virtual Keyboard styles
OptionDefault valueDescription
–readabler-keyboard-light-bg#ecececThe background color of the virtual keyboard for the day(light) theme.
–readabler-keyboard-light-key-bg#ffffffThe button’s background of the virtual keyboard for the day(light) theme.
–readabler-keyboard-light-key#111111The buttons text color of the virtual keyboard for the day(light) theme.
–readabler-keyboard-dark-bg#000000CCThe background color of the virtual keyboard for the night(dark) theme..
–readabler-keyboard-dark-key-bgrgba( 0, 0, 0, .5 )The button’s background of the virtual keyboard for the night(dark) theme.
–readabler-keyboard-dark-key#ffffffThe buttons text color of the virtual keyboard for the night(dark) theme.
Text Magnifier options
OptionDefault valueDescription
–readabler-text-magnifier-bg-color#333333The background color of the magnifier.
–readabler-text-magnifier-color#ffffffThe font color of the magnifier.
–readabler-text-magnifier-font-size36pxThe font size of the magnifier.
Highlight Titles styles
OptionDefault valueDescription
–readabler-highlight-titles-stylesolidThe border style of the highlighted title.
Values: none, dotted, dashed, solid, double, groove, ridge, inset, outset
–readabler-highlight-titles-color#639af9The border color of the highlighted title.
–readabler-highlight-titles-width2pxThe border width of the highlighted title.
–readabler-highlight-titles-offset2pxThe border offset of the highlighted title.
Highlight Links styles
OptionDefault valueDescription
–readabler-highlight-links-stylesolidThe border style of the highlighted links.
Values: none, dotted, dashed, solid, double, groove, ridge, inset, outset
–readabler-highlight-links-color#639af9The border color of the highlighted links.
–readabler-highlight-links-width2pxThe border width of the highlighted links.
–readabler-highlight-links-offset2pxThe border offset of the highlighted links.
Highlight Hover styles
OptionDefault valueDescription
–readabler-highlight-hover-stylesolidThe border style on hover content.
Values: none, dotted, dashed, solid, double, groove, ridge, inset, outset
–readabler-highlight-hover-color#639af9The border color on hover content.
–readabler-highlight-hover-width2pxThe border width on hover content.
–readabler-highlight-hover-offset2pxThe border offset on hover content.
Highlight Focus styles
OptionDefault valueDescription
–readabler-highlight-focus-stylesolidThe border style on focus content.
Values: none, dotted, dashed, solid, double, groove, ridge, inset, outset
–readabler-highlight-focus-color#639af9The border color on focus content.
–readabler-highlight-focus-width2pxThe border width on focus content.
–readabler-highlight-focus-offset2pxThe border offset on focus content.
Reading Guide styles
OptionDefault valueDescription
–readabler-reading-guide-width500pxThe width of the line guide.
–readabler-reading-guide-height17pxThe height of the line guide.
–readabler-reading-guide-radius10pxThe border-radius of the line guide.
–readabler-reading-guide-bg#0274e6The background color of the line.
–readabler-reading-guide-border-width7pxThe border width of the line guide.
–readabler-reading-guide-border-color#000000The border color of the line guide
–readabler-reading-guide-arrow10pxThe arrow size of the line guide.
–readabler-reading-guide-arrow-margin-10pxThe arrow margin of the line guide.
Reading mask style
OptionDefault valueDescription
–readabler-reading-maskrgba(0, 0, 0, 0.7) The overlay color of reading mask.
Text to speech styles
OptionDefault valueDescription
–readabler-tts-bgrgba(33, 150, 243, 1)The background color of text to speech button.
–readabler-tts-colorrgba(255, 255, 255, 1)The text/icon color of text to speech button.

Was this article helpful to you?