@magic-themes/docs

@magic-themes/docs

this is the @magic-themes docs theme. It is being used as the documentation theme for most @magic packages.

installation

npm install --save --save-exact @magic-themes/docs

usage

require

in /config.mjs, just require the theme.

// /config.mjsexport default {  // ... other config  THEME: 'docs',  // multiple themes can be used too:  THEME: ['docs', 'your-theme-name'],}

customize

you can customize and add any kind of style create /assets/themes/docs/index.mjs, any css there will overwrite the theme css

// /assets/themes/docs/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.

  • background
    • vars.background.light: #eeeeee
    • vars.background.dark: #232323
  • link
    • vars.link.light: #232323
    • vars.link.dark: #eeeeee
    • link.hover
      • vars.link.hover.light: #232323
      • vars.link.hover.dark: #fefefe
  • text
    • vars.text.light: #232323
    • vars.text.dark: #cccccc

breakpoints

the following width breakpoints exist

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

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