@magic-themes/reader

ToC

@magic-themes/reader

this is the @magic-themes reader theme.

It is being used in explain.webboot

installation

npm install @magic-themes/reader

usage

require

in /config.mjs

// config.mjsexport default {  // ... other config  THEME: 'reader',  // multiple themes:  THEME: ['reader', 'custom'],}

customize

you can customize and add any kind of style

create /assets/themes/reader/index.mjs, any css there will overwrite the theme css

// /assets/themes/reader/index.mjsexport default vars => ({  body: {    color: vars.colors.orange[900],  },})

magic will then find and merge the themes automatically, just as it did on this page.

theme vars

colors

this theme exports and uses the following colors.

  • vars.white: #ffffff
  • vars.neutral: #5a5a5a
  • background
    • vars.background.light: #e0e0e0
    • vars.background.dark: #212121
  • link
    • vars.link.light: #ea4444
    • vars.link.dark: #ea4444
    • link.hover
      • vars.link.hover.light: #212121
      • vars.link.hover.dark: #c4c4c4
  • pageBackground
    • vars.pageBackground.light: #f0f0f0
    • vars.pageBackground.dark: #eeeeee
  • primary
    • vars.primary.neutral: rebeccapurple
    • vars.primary.light: #8f6ab4
    • vars.primary.dark: #412162
  • text
    • vars.text.light: #212121
    • vars.text.dark: #c4c4c4

max page width

vars.maxWidth: 1200px

fade duration:

vars.fadeDuration should be used for all css animations

vars.fadeDuration: 500ms

breakpoints

the following width breakpoints exist

  • vars.widths.tablet: 500px
  • vars.widths.laptop: 1024px
  • vars.widths.desktop: 1600px

headers

the five header sizes look like the following, the outlines indicate their padding.

This is a h1

This is a h2

This is a h3

This is a h4

This is a h5

links will look like the following:

This is a link