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

Source: Internet
Author: User

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)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.