Simple Example of Angularjs switching website Color Scheme

Simple Example of Angularjs switching website Color Scheme

A website can have multiple color schemes, such as normal mode and night mode.

A simple example is an angularjs app that switches the color scheme by clicking a button and changing the css file.

There are three main files: index.html (main file), white.css() 文css))), black.css (black background color scheme css file ).

Index.htmlThe file code is as follows:

 <Scriptsrc = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"> </script> <script> var myApp = angular. module ('app', []); myApp. factory ('myac', function () {return {changeTheme: function (themeFile) {// locate the element that loads css based on the ID, and change its href to a specific css file document. getElementById ('Global-css '). setAttribute ('href ', themeFile) ;};}); myApp. controller ('appcontroller', function ($ scope, myFac) {// if it is a whitetopic, use the cssfile white.css $ scope. whiteTheme = function () define myfac.changetheme('white.css ');} // if it is a blacktopic, use the cssfile black.css $ scope. blackTheme = function () define myfac.changetheme('black.css ') ;}}); </script>Black themeWhite theme
Test line 1
Test line 2

Black.cssThe Code is as follows:

body{background-color:black;}.p1{color:red;}.p2{color:blue;}

White.cssThe Code is as follows:

body{background-color:white;}

Index.html uses the black background color scheme by default. Click the "white theme" button to switch to the white background color scheme. Click the "black theme" button to switch to the black background color scheme. Example:

Run index.html in the browser as follows:

Refer to the source code of the webpage. The requested cssfile is black.css:

Click "white theme”, and change index.html to the white background color scheme. The webpage is as follows:

Refer to the source code of the webpage. You can see that the requested cssfile is white.css: