我现在拥有的是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>
我还有一个明亮的“light_room.css”主题需要实现,用户可以根据需要切换主题。我想知道我怎么能做到这一点?
我认为可以通过使用url参数来完成,这样当用户在url末尾键入?light_room=True
时,该页面将加载light_room.css。但是我认为它只能在普通模板中完成,而不能在index.html中完成。
有没有人在index.html中有条件地加载css文件?
答案 0 :(得分:2)
关键是主题通常只是一些不同的颜色。您可以将所有主题添加到一个CSS。 my-app > .dark
获得不同的颜色,类将在代码中动态添加。
以下是我如何使用它的更详细示例:
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>
非角度版
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);
}
}