ANGULARJS switch site color scheme Simple example

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

A simple example is a ANGULARJS small app that switches the color scheme by clicking the button and replacing the CSS file.

The main files are three: index.html (master file), white.css (white background color scheme css file), BLACK.CSS (black background color scheme css file).

The index.html file code is as follows:

<! DOCTYPE html>

The black.css code is as follows:
Body{background-color:black;}. p1{color:red;}. P2{color:blue;}

The  white.css code is as follows:
Body{background-color:white;}


Index.html uses a black background color scheme by default. Click on the "White theme" button to switch to the black background color scheme, click "Black Theme" button to switch to a dark background color scheme. Specific examples are as follows:
Run index.html in the browser as follows:

To view the Web page source code, you can see that the called CSS file is black.css:

Click on the "White theme" button and change the index.html to a color scheme with the following page:

To view the Web page source code, you can see that the called CSS file is white.css:


ANGULARJS switch site color scheme Simple example