一个网站可以有多种配色方案，例如正常模式，夜间模式等。
简单示例一个通过点击按钮，更换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">
<scriptsrc="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：
