1

I have an app where the user chooses 4 colors:

  1. Brand
  2. Accent
  3. Contrast
  4. Accent Light

These get stored in the user record and I retrieve and cache that data when the user logs in.

I've been looking for a way to theme the application globally with those styles. Such as h1 - h3 tags have a border-bottom: $brand;

I've looked at and a couple of similar solutions, but they all follow the same concept of pre-defined themes.

Angular2: Update all color assignments in CSS dynamically

How can I use the users colours globally throughout the application?

ZeroBased_IX
  • 2,667
  • 2
  • 25
  • 46

2 Answers2

0

if not many differences (or use SASS) and a few themes

<div [ngClass]="theme">
 <h1>Hello word</h1>
 <router-oulet><router-oulet>
</div>

the css in vendor.css or in app.module.css if the component have encapsulation: ViewEncapsulation.None,

.Brand h1
{
    color:red;
}
.Accent h1
{
   color:blue
}

then assign theme variable in the app.component.ts

Eliseo
  • 50,109
  • 4
  • 29
  • 67
  • There are thousands of users, they pick the colors with a colorpicker. It's not feasible to do that approach. I need to somehow inject JS into the style. That's the only way I can see it working, I'm open to suggestions though. – ZeroBased_IX Nov 03 '17 at 10:43
  • Sorry my answers -it's not you are looking for. If only wan't change a color, You can add in all the tags [style.color]="variable" – Eliseo Nov 03 '17 at 11:56
  • Eliseo, yeah they're not what I'm looking for. It does seem that the only way is to manually use style bindings, which is what I was trying to avoid. I do appreciate your help though. – ZeroBased_IX Nov 03 '17 at 14:28
0

you can try use javascript functions https://plnkr.co/edit/b2kAztHntMuNjTfOv8jD?p=preview (it's NOT mine)

in a .js

var myJavaCall = (function() {

  return {
    func1: function(saludo) {
      alert(saludo+' function 1 called');
    }
  }

})(myJavaCall ||{})

then, in your component.ts

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import 'external.js'

declare var myJavaCall: any;

export myComponent{
  ...I can use myJavaCall.func1('Hello world') ...

}

Yes, You must look for a javascript way to change or import css

Eliseo
  • 50,109
  • 4
  • 29
  • 67