Rethink modes

Is your feature request related to a problem? Please describe.

Modes are only applied to colors. Light/dark modes are the most common use case. However, I am frustrating when I have to manage a theme where you additionally have space modes such as “Comfortable”, “Cozy”, or “Compact”.

Describe the solution you’d like

I would like to see a better integration of Modes for other theme keys/CSS properties.

Describe alternatives you’ve considered

One solution to this is to setup space theme key as an object like colors, and have a modes object in it.

const theme = {
  // More theme keys...
  space: {
    px: "1px",
    "0": "0",
    "1": "0.25rem",
    "2": "0.5rem",
    "3": "0.75rem",
    "4": "1rem",
    "5": "1.25rem",
    "6": "1.5rem",
    "8": "2rem",
    "10": "2.5rem",
    "12": "3rem",
    "16": "4rem",
    "20": "5rem",
    "24": "6rem",
    "32": "8rem",
    "40": "10rem",
    "48": "12rem",
    "56": "14rem",
    "64": "16rem",
    modes: {
      comfortable: {},
      cozy: {},
      compact: {}
    }
};

Additional context

It would be awesome to design an API not only for colors and sizes but for everything (other theme keys).

[jxnblk]

Thanks, we discussed supporting this early on, but decided against it. Instead of adding additional nested modes to each scale, we think it’s more flexible to allow switching the top-level theme for more bespoke cases like this. Currently, the way Theme UI uses state makes this less than ideal, but in v0.3.0, we’re planning on removing state so that you can keep multiple themes or modes of themes in state above the ThemeProvider and have fine-grained control over how that works. We might add and additional component to make this easier to implement, but it likely won’t look exactly like the color modes API

[jxnblk]

Closing this out because v0.3 will allow for dynamic themes passed to ThemeProvider