← Back to context

Comment by california-og

1 year ago

I was informed that the color palette can be changed with `override-colors` css rule, but havent had time to update the blog post yet.

2 comments

california-og

Reply
jfk13  1 year ago

I tried it (via Firefox DevTools) on your example page by inserting a @font-palette-values rule alongside the @font-face that loads the font:

    @font-palette-values --mycolors {
      font-family: Monaspace;
      base-palette: 0;
      override-colors: 0 red, 1 green, 2 blue,
                       3 magenta, 4 cyan, 5 yellow;
    }

(I just picked some arbitrary colors as a proof-of-concept; they don't actually look good.) Then adding the property:

    font-palette: --mycolors;

to the textarea element causes it to use these colors instead of the defaults in the font.