Method 1:
<link rel="stylesheet" ng-href=“cls-{{theme}}.css">
$scope.theme='normal';
$scope.themes = [{name:'red',url: 'red'},{ name:‘green’,url:‘green’}];
Method 2:
$scope.theme='red';
$scope.col=['red','green'];
$scope.colorchange = function(a)
{
$scope.theme=$scope.col[a];
}
<div class="cls-{{theme}}"></div>
请建议我哪个是定制主题更改概念的最佳方法并给我解释
答案 0 :(得分:0)
body.default{ .box{ background: #000; color: #fff; } }
body.red{ .box{ background: #f00; color: #fff; } }
body.red{ .box{ background: #0f0; color: #fff; } }
在主页面中加载所有主题(css文件)。如果可能的话,异步加载css文件除默认主题 - refer for async css
<link rel="stylesheet" href="default.css">
<link rel="stylesheet" href="red.css">
<link rel="stylesheet" href="green.css">
当用户更改主题时,只需更改body标签的类名,所以想法只是更改根元素类以反映所选主题。
<body ng-class="{{theme_classname}}">
$scope.theme="default";
$scope.colorChange = function(a)
{
$scope.theme_classname=$scope.col[a];
}