Custom heading colors

[ivan-kleshnin]

1) I'd like to assign unique colors for H1-H4. For example: slate-800 for H1, slate-750 for H2 and so on.
2) I'd like to keep it working with dark modifier. It seems that both aims at the same time are currently not achievable.

Builtin functionality, e.g. customization of:

--tw-prose-headings + --tw-prose-invert-headings

satisfies 2) but not 1).

If, instead, I do this:

base: {
  css: {
    h1: {
      color: theme("colors.slate.800"),
    },
    h2: {
      ...
    },
    ...
  },
},

it achieves 1) but breaks 2).

---

Is there a way to assign light and dark mode colors unique per H1, H2, etc?

[ivan-kleshnin]

Solved like this:

typography(theme) {
  return {
    slate: {
      css: {
        "--tw-prose-body": theme("colors.black"),
        "--tw-prose-650": theme("colors.slate.650"), // ! reducing 'blackness' for very large headings
        "--tw-prose-700": theme("colors.slate.700"), 
        "--tw-prose-750": theme("colors.slate.750"), // ! added new color steps to TW defaults
        "--tw-prose-800": theme("colors.slate.800"),
        "--tw-prose-850": theme("colors.slate.850"), // !
        "--tw-prose-900": theme("colors.slate.900"),
      },
    },

    invert: {
      css: {
        "--tw-prose-body": theme("colors.white"), // 'dark' bg is usually non-black so requires pure 'white'
        "--tw-prose-650": theme("colors.white"),  // for good constrast
        "--tw-prose-700": theme("colors.white"),
        "--tw-prose-750": theme("colors.white"),
        "--tw-prose-800": theme("colors.white"),
        "--tw-prose-850": theme("colors.white"),
        "--tw-prose-900": theme("colors.white"),
      },
    },

    base: {
      css: {
        h1: {
          color: "var(--tw-prose-800)",
        },
        h2: {
          color: "var(--tw-prose-850)",
        },
        h3: {
          color: "var(--tw-prose-900)",
        },
        h4: {
          color: "var(--tw-prose-950)",
        }
      }   
    }
  }
}