ANGULARJS switch site color scheme simple Example 2 (toggle the Body element's class)

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

Simple example a ANGULARJS small app that toggles the color scheme by clicking the toggle button to toggle the class of the BODY element.

1. Live samples can be viewed at the following Codepen URLs: http://codepen.io/ChristyWang/pen/NPxNMx

2. Toggle button source code is generated by the following Web site: https://proto.io/freebies/onoff/

3. There are two main documents: Index.html and MAIN.CSS.

The index.html file code is as follows:

<! DOCTYPE html>

The main.css file code is as follows:
 /*for light swtich*/. Off p {color:red;} Body.on{background-color:grey;}. on p {color:blue;}    /*for the toggle Button*/.onoffswitch {position:relative; width:67px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none;}. Onoffswitch-checkbox {display:none;}.    Onoffswitch-label {display:block; overflow:hidden; cursor:pointer; border:2px solid #999999; border-radius:20px;}.    Onoffswitch-inner {display:block; width:200%; Margin-left:-100%; -moz-transition:margin 0.3s ease-in 0s;    -webkit-transition:margin 0.3s ease-in 0s; -o-transition:margin 0.3s ease-in 0s; Transition:margin 0.3s ease-in 0s;}.  Onoffswitch-inner:before,. onoffswitch-inner:after {display:block; float:left; width:50%; height:22px; padding:0;    line-height:22px; font-size:14px; Color:white; Font-family:trebuchet, Arial, Sans-serif;    Font-weight:bold; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; Box-sizing:border-box;}. Onoffswitch-inner:beFore {content: "on";    padding-left:10px; Background-color: #0064D2; Color:;}.    Onoffswitch-inner:after {content: "OFF";    padding-right:10px; Background-color: #F0F0F0;    Color: #999999; Text-align:right;}.    Onoffswitch-switch {display:block; width:18px; margin:2px;    Background: #FFFFFF; border:2px solid #999999;    border-radius:20px; Position:absolute; top:0; bottom:0;    right:41px; -moz-transition:all 0.3s ease-in 0s;    -webkit-transition:all 0.3s ease-in 0s; -o-transition:all 0.3s ease-in 0s; Transition:all 0.3s ease-in 0s; }.onoffswitch-checkbox:checked +. Onoffswitch-label. Onoffswitch-inner {margin-left:0;}.  Onoffswitch-checkbox:checked +. Onoffswitch-label. onoffswitch-switch {right:0px;}

4. Show:
Lightswich off:


LightSwitch on:

ANGULARJS switch site color scheme simple Example 2 (toggle the Body element's class)