AngularJS switch css theme on user selection

后端未结

关注

 4  1485

I downloaded the themes from bootswatch and I\'m trying to allow the user to switch the theme. When the theme is switched all the bootstap css temporarily goes away until th

相关标签:

4条回答

被撕碎了的回忆

2020-12-19 15:59
I think it is not a problem of AngularJS. I think your approach should be different.

As I know, theme functionality is usually implemented like below.
1. Create a single CSS file for each theme (cerulean, cosmo, yeti). You should edit CSS files not to conflict each other. (put .cerulean, .cosmo, .yeti in front of all CSS selectors. If you use sass or less, it will be much easier.)
2. Load all CSS files from the HTML head.
```
<link rel="stylesheet" href="/bootstrap/css/bootstrap_cerulean.min.css">
<link rel="stylesheet" href="/bootstrap/css/bootstrap_cosmo.min.css">
<link rel="stylesheet" href="/bootstrap/css/bootstrap_yeti.min.css">
```
3. If a user select a theme, change a class of body or root element to a corresponding theme name.
```
<body class="cerulean">
<body class="cosmo">
<body class="yeti">
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

傲寒

2020-12-19 16:05

try this approach it will work..

<link href="css/style1.css" ng-if="load">
<link href="css/style2.css" ng-if="!load">

<body>
<input type="button" ng-click="changeTheme()" value="Change Theme"/>
</body>
<script>
$scope.load=true;
$scope.changeTheme=function(){
$scope.load=!$scope.load;
}
<script>

0 讨论(0)

-上瘾入骨i

2020-12-19 16:13
If you include all your themes at first load, them all of them have to be loaded by the browser. And it is not even clear if user will ever switch themes. So why should you load all of them. So here are few options.

1. Ng-if

Try to ad ng-if to link
```
<link ng-if="theme" ng-href="{{theme}}">
```
I am not sure if it will work but i have read somewhere that it worked for some people

2. Visibility

I am typing from ipad so ill be short.

Create css file with something like this
```
Body .container {display:none}
Body .loader {display:block}
```
Put all you content into container class div. create sibling div class loader and place loader animation there.

Load/link this file first in the head. Then link your theme in every theme add cancelation of those rules.
```
Body .container {display:block}
Body .loader {display:none}
```
So on the moment of css reload you will have a loader animation.
0 讨论(0)
发布评论:

提交评论
- 加载中...
星月不相逢

2020-12-19 16:18
I find it better to keep it simple, and there's no need to pre-load all the themes like other have suggested.

Stick to a single tag with ng-href:
```
<link rel="stylesheet" ng-href="/external/bootstrap/css/bootstrap_{{myTheme}}.min.css">
```
And initialize myVar in your scope to "yeti" in the index controller:
```
$scope.myTheme = 'yeti';
$rootScope.$watch('myTheme', function(value) {
  if (value != undefined) {
    $scope.myTheme = value;
  }
});
```
The rest stays the same.
0 讨论(0)
发布评论:

提交评论
- 加载中...