Angular2 - How to conditionally load css file in index.html?

Question

What I have right now is a page with dark theme in index.html:

<base href="/">
<html>
<head>
    <title>XXX</title>
</head>
<body>
    <link rel="stylesheet" type="text/css" href="assets/dark_room.css">
    <my-app>Loading...</my-app>
</body>
</html>

I also have a bright "light_room.css" theme that is required to implement, and user could switch theme base on needs. I am wondering how could I achieve this?

I thought it could be done by having an url parameter so that when user type like ?light_room=True at the end of url, the page will load light_room.css. However I think it can only be done in normal templates but not in index.html.

Does anyone have similar experience in conditionally loading css file in index.html?

Have you tried it this way? Let your backend generate different index.html depending on the URL-Parameters. — Niklas
– Niklas, Commented May 30, 2017 at 13:21
@Niklas I think it could be an approach but I don't know how. since setting up URL-parameters is usually done in the .ts file but index.html does not have one. — PIZZA PIZZA
– PIZZA PIZZA, Commented May 30, 2017 at 14:15

iRaS · Accepted Answer · 2017-05-30 14:53:39Z

2

The point is that theming is usually just some different colors. You can add all themes to one css. my-app > .dark gets different colors and the class will be added dynamically in the code.

Here is a more detailed example how I use it:

app-theme.scss:

@import '~@angular/material/theming';

@include mat-core();
$words-app-primary: mat-palette($mat-teal, 300);
$words-app-secondary: mat-palette($mat-indigo, 500);
$words-app-warn: mat-palette($mat-red, 500);

$words-app-theme: mat-light-theme($words-app-primary, $words-app-secondary, $words-app-warn);
@include angular-material-theme($words-app-theme);

app-words-root > md-sidenav-container.dark {
  $words-app-theme-dark: mat-dark-theme($words-app-primary, $words-app-secondary, $words-app-warn);
  @include angular-material-theme($words-app-theme-dark);
}

app.component.html:

<md-sidenav-container [class.dark]="useDarkTheme"> ... </md-sidenav-container>

non angular version

app.component.js

import { DOCUMENT } from '@angular/platform-browser';

class AppComponent {
  constructor(@Inject(DOCUMENT) document: any) {
    let head  = document.getElementsByTagName('head')[0];
    let link  = document.createElement('link');
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = 'assets/dark_room.css'; // you may want to get this from local storage or location
    head.appendChild(link);
  }
}

edited May 30, 2017 at 14:53

answered May 30, 2017 at 13:25

iRaS

2,2061 gold badge18 silver badges29 bronze badges

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

4 Comments

PIZZA PIZZA Over a year ago

thanks for answering but I am not allowed to touch the css files, so....I still need to find a way to choose those two files somehow

iRaS Over a year ago

This will be similar problem as for title - angular 2 does not have functions for dom manipulation outside of <app>. For title they offer a Title service. But not for loading css.

PIZZA PIZZA Over a year ago

Yeah, if I can include function it could be doable.

PIZZA PIZZA Over a year ago

It comes up my mind that can I just create 2 index.html and load the index.html after the url, but when I type in "/index_light.html", the page always shows "loading...."

Collectives™ on Stack Overflow

Angular2 - How to conditionally load css file in index.html?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related