#Best practices for theming an Angular app

7 messages · Page 1 of 1 (latest)

placid kraken
#

Hi All -- Wondering if anyone could recommend resources that might help me figure out how to efficiently create themes for an Angular application.

(We are not using Angular Material/this is not a question about theming Material components)

By efficiently what I mean is: given that I sometimes need color values in TS which with to do calculations (you can't do calculations on var(--my-color), what is the best way to make theme colors available in both SCSS and in JS without duplicating values?

Are people reading in a single JSON with values so as to have a single source of truth?

(Can you import JSON to SCSS?)

My current (/preliminary) strategy is to create a bunch of CSS vars in SCSS using Sass maps that are provided at the root level based on two theming options (one is set on app load, the other is triggered by user interaction), i.e.

html[data-theme-one] {
@sass-utils.make-scss-vars-from-maps($myMap)
}

But them I'm providing the same hex codes again in JS.

Is there a way around this?

rain igloo
#

What do you mean with (you can't do calculations on var(--my-color)?

placid kraken
#

We have a function that takes two potential label colors and the background color that the text would sit on and calculates which of the two label colors would have a higher contrast ratio with the background field.

(This is useful for something like a choropleth map in which data is driving the background color)

We need to be able to calculate the luminance of the colors for this. If my references in TS are say const labelColor1: string = GLOBAL_COLORS.primary[1] and globalColorPrimary1 equals 'var(--color-primary-1)' rather than a hex, rgb, or hsl value, that function can't work.

rain igloo
placid kraken
#

OH!

So, a developer could get the hex code value by querying with getPropertyValue, and then work with that.

rain igloo
#

Exactly.
Obviously, don't exepct to be able to use the runtime values in scss functions, because those ones are computed at build time.

placid kraken
#

Okay, that is a little annoying but far LESS annoying than maintaining variables in two places! 🙂