一個網站可以有多種配色方案，例如正常模式，夜間模式等。
簡單示例一個通過點擊按鈕，更換css文件，達到切換配色模式的angularjs 小app。
主要文件有三個：index.html（主文件），white.css（白色背景配色方案css文件），black.css（黑色背景配色方案css文件）。
index.html文件代碼如下：
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='black.css' id="global-css">
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script>
var myApp = angular.module('App', []);
myApp.factory('myFac', function() {
return {
changeTheme : function(themeFile) {
//根據ID定位加載css的元素，將其href修改爲特定css文件
document.getElementById('global-css').setAttribute('href',
themeFile);
}
};
});
myApp.controller('AppController', function($scope, myFac) {
//如果是white主題，使用css文件white.css
$scope.whiteTheme = function() {
myFac.changeTheme('white.css');
}
//如果是black主題，使用css文件black.css
$scope.blackTheme = function() {
myFac.changeTheme('black.css');
}
});
</script>
</head>
<body ng-app='App' ng-controller='AppController'>
<button ng-click='blackTheme()'>black theme</button>
<button ng-click='whiteTheme()'>white theme</button>
<p class='p1'>test line 1</p>
<p class='p2'>test line 2</p>
</body>
</html>black.css代碼如下：
body
{
background-color:black;
}
.p1
{
color:red;
}
.p2{
color:blue;
}white.css代碼如下：
body
{
background-color:white;
}index.html默認使用黑色背景配色方案。點擊“white theme”按鈕切換爲白色背景配色方案，點擊“black theme”按鈕，切換成黑色背景配色方案。具體示例如下：
在瀏覽器中運行index.html截圖如下：
查看網頁源代碼，可以看到調用的css文件是black.css：
點擊“white theme”按鈕，index.html改爲白色背景配色方案，網頁截圖如下：
查看網頁源代碼，可以看到調用的css文件是white.css：
