Theming

[JayPanoz]

Following this issue in Swift and our engineering call, theming needs to be revisited.

To sum things up, ReadiumCSS prefs have been designed and built to allow theming from the start, meaning it already has most in place for common customisation e.g. the background-color and color variables.

A few presets e.g. modern, classic, etc. were made 2 years ago, but didn’t ship in Readium CSS alpha. They were simply built using several CSS variables e.g. I had something like:

{
  name: "classic",
  settings: {
    "--USER__appearance": "readium-default-on",
    "--USER__backgroundColor": "#FEFEFE",
    "--USER__textColor": "#121212",
    "--USER__textAlign": "justify",
    "--USER__bodyHyphens": "auto",
    "--USER__fontFamily": "var(--RS__oldStyleTf)",
    "--USER__fontSize": "100%",
    "--USER__typeScale": "1.125",
    "--USER__lineHeight": "1.5",
    "--USER__paraSpacing": "0",
    "--USER__paraIndent": "1rem",
    "--USER__wordSpacing": "0",      
    "--USER__letterSpacing": "0",
    "--USER__alignElements": "readium-center-elements"
  }
}

And it would go from

to this for instance:

With custom spacing (margins), fonts, etc. the user can pick/modify and save.

So the idea is to make that clearer, and extend it if needed.

This also impacts readium/r2-navigator-swift#65 though, but is similar to another issue I’ll open shortly.