wrResolveCssColor

import { Component, ElementRef, afterNextRender, viewChild } from '@angular/core';
import { wrResolveCssColor } from 'ngwr/utils';

@Component({
  selector: 'app-swatch',
  template: '<canvas #canvas width="240" height="48"></canvas>',
})
export class Swatch {
  private readonly canvas = viewChild.required<ElementRef<HTMLCanvasElement>>('canvas');

  constructor() {
    afterNextRender(() => {
      const canvas = this.canvas().nativeElement;
      const ctx = canvas.getContext('2d');
      if (!ctx) return;

      ctx.fillStyle = wrResolveCssColor(canvas, 'var(--wr-color-primary)', '#3969e2');
      ctx.fillRect(0, 0, canvas.width, canvas.height);
    });
  }
}

wrResolveCssColor(canvas, '#3969e2', '#000');
// 'rgb(57, 105, 226)'

wrResolveCssColor(canvas, 'light-dark(#ffffff, #0b1120)', '#fff');
// whichever side is in effect on the canvas

wrResolveCssColor(canvas, 'color-mix(in srgb, var(--wr-color-primary) 20%, transparent)', '#0000');
// 'color(srgb … / 0.2)'

wrResolveCssColor(canvas, 'var(--not-set-anywhere)', '#0f172a');
// '#0f172a' — the fallback

import { wrResolveCssColorChannels } from 'ngwr/utils';

const [r, g, b] = wrResolveCssColorChannels(canvas, 'var(--wr-color-primary)', '#3969e2');
gl.uniform3f(tint, r, g, b);

wrResolveCssColorChannels(canvas, 'oklch(0.7 0.15 250)', '#000');
// another colour space is mixed into sRGB first

wrResolveCssColorChannels(canvas, 'not-a-colour', 'neither-is-this');
// [0, 0, 0]

import { afterNextRender } from '@angular/core';
import { wrResolveCssColor, wrWatchColorScheme } from 'ngwr/utils';

constructor() {
  afterNextRender(() => this.draw());
  // A canvas keeps the pixels it was given: draw again when the scheme switches.
  wrWatchColorScheme(() => this.draw());
}