Themes/colors are completely undocumented

[stevenpetryk]

Themes are supported using CSS custom properties:

--mafs-bg: black;
--mafs-fg: white;

--mafs-origin-color: var(--mafs-fg);
--mafs-line-color: #555;
--grid-line-subdivision-color: #222;

--mafs-red: #f11d0e;
--mafs-orange: #f14e0e;
--mafs-yellow: #ffe44a;
--mafs-green: #15e272;
--mafs-blue: #58a6ff;
--mafs-indigo: #7c58ff;
--mafs-violet: #ae58ff;
--mafs-pink: #ee00ab;

export const theme = {
  foreground: "var(--mafs-fg)",
  background: "var(--mafs-bg)",

  red: "var(--mafs-red)",
  orange: "var(--mafs-orange)",
  green: "var(--mafs-green)",
  blue: "var(--mafs-blue)",
  indigo: "var(--mafs-indigo)",
  violet: "var(--mafs-violet)",
  pink: "var(--mafs-pink)",
}

But it might be nice to indicate how to swap out the Mafs default theme (right now, the main way is to overwrite these custom properties on .MafsView, as in the home page riemann sum example.

[axelfran]

Hi,

I'm new to CSS variables and have been scratching my head about this. How would you go about to overwrite the custom properties in a NextJS app?

It would be awesome to be able to change the theme more easily! Thanks for making this awesome library 🎉

[stevenpetryk]

Hey @axelfran, sorry I missed this!

You can see the custom properties that are set on MafsView here.

To change them from a Next.js app (or any app tbh!), you can just reassign them (after importing mafs/core.css so that your styles "win"):

.MafsView {
  --mafs-fg: tomato;
  --mafs-red: pink; /* controversial */
}

[axelfran]

Brilliant @stevenpetryk! 🥇

Thank you for your assistance 😄