Change CSS theme in Angular

Question

Im currently working on a Angular2 application with webpack and Im trying to set differents css themes according to the user.

For example : When the user connect, If it's a boy, I want to have my backgrounds blue, and if it's a girl I want the backgrounds to be pink.

Simply changing the css value with setAttribute or style.property wont work because the DOM is destroyed when changing tab in the application, it needs to be kinda permanent.

I've tried using different css stylesheets (1 for each theme) and linking them to my html with javascript when the user connect. Problem is, webpack is always adding automatically my css to my html when building the app.

Thanks for the help.

Have you tried to declare scope var and use ngClass ?

Cyril Beeckman
– Cyril Beeckman

2017-04-26 15:00:24 +00:00
Commented Apr 26, 2017 at 15:00 — Cyril Beeckman
– Cyril Beeckman, Commented Apr 26, 2017 at 15:00

Cyril Beeckman · Accepted Answer · 2017-04-26 15:05:22Z

4

In your css, make a rule like :

.is-boy{
    background: blue;
}

.is-girl{
    background: pink;
}

and declare in you angular app a scope var like $scope.userSex = 'boy';

and on your body use ngClass like this

<body [ngClass]="{'is-boy': userSex === 'boy', 'is-girl': userSex === 'girl'}" ...

answered Apr 26, 2017 at 15:05

Cyril Beeckman

1,27810 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Duncan Over a year ago

This looks like its working, would have been better If I could hit all elements at once since I have to put ngClass on 50+ elements :p

Cyril Beeckman Over a year ago

@Duncan you don't use sass or less ? ^^

Duncan Over a year ago

I'm using sass but also WebPack who build the app and convert sass into css, and I need to change the theme while the app is running because I got the information 'isABoy : isAGirl' only when the user connect.

Cyril Beeckman Over a year ago

@Duncan just make a new stylesheet and encompass all rules with your class, no ?

Cyril Beeckman Over a year ago

@Duncan don't forget to click on the check button on the left if my response solve your problem, thank you

Daniel Cooke · Accepted Answer · 2017-04-26 15:22:45Z

1

:host-context selector

You could use the :host-context selector to apply styles to your component based on the parent component.

styles:[`
    :host-context(.parent1) div{
      border: 1px solid blue;
    }

    :host-context(.parent2) div{
      border: 1px solid blue;
    }
  `]

This allows you to conditionally apply styles based on a the selector that wraps the component.

plunker

edit:

So in your case - your parent would have a div with class .boy and a div with class .girl

You could load these containing divs with some flag controlled by ngIf

edited Apr 26, 2017 at 15:22

answered Apr 26, 2017 at 15:11

Daniel Cooke

1,66415 silver badges27 bronze badges

Comments

Maciej Szpyra · Accepted Answer · 2017-04-26 15:02:28Z

0

If you want to be permanent store class value in localStorage. To set the theme use ngClass with variable set to theme you need.

answered Apr 26, 2017 at 15:02

Maciej Szpyra

3121 silver badge12 bronze badges

Collectives™ on Stack Overflow

Change CSS theme in Angular

3 Answers 3

5 Comments

:host-context selector

plunker

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

:host-context selector

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related