How to create theme changer using Cookies in JavaScript?

What is the theme?

Website theme determines the overall look of your site. Your theme is the layout or blueprint of your site, it helps structure your website, giving you to areas to place pictures and text, or things like navigation bars and other widgets.

A theme requirements the look and style of your website. Your theme is made up of a range of things, such as font types and sizes. Your theme helps to reflect your identity through your site, and helps to improve your customer’s experience.

Simply put, the layout and themes are the same as decorating a room in your house.

What does the theme control?

Website themes control the following elements of your website:

•       Default colors and shapes

•       Default site background and background image library

•       Text style choices in the content editor(e.g. Heading 1, heading 2)

•       Master layouts

•       Customization option that appear on the colors and styles screen

•       Menu location (vertical and horizontal) and the menu are static and dynamic.

Step to adding a Style Sheet change in JavaScript:

Let’s suppose that we have the following style sheet defined in our HEAD section.

<link rel="stylesheet" type="text/css" href="web-css/theme1.css" title="theme1">

<link rel="alternate stylesheet" type="text/css" href="web-css/theme2.css" title="theme2">

Create a Button:

<form method="post" class="left">

            <input type="submit" value="theme1" onclick="change_style('theme1');return false;" name="theme" id="theme1">

            <input type="submit" value="theme2" onclick="change_style('theme2');return false;" name="theme" id="theme2">

</form>

When the visitor clicks any of the button, the javascript onclick handler, change_style(), will run. The function will be passed either theme1 or theme2 as its parameter, depending on which button is clicked. The words theme1 and theme2 correspond to the title attributes for the link elements referencing the style sheets.

JavaScript Function to Change Style Sheet: 

The actual JavaScript code needed to implement css style changing can be found below.

<script type="text/javascript">

var scname = "style" ;    //Global variable declaration and initialize a value

var scduration = 30 ;      //Global variable declaration and initialize a value

function change_style ( css_title )   // let’s create a function Name

{           //css_style is used to pass  a value

  var i, tag ;   //local variable declaration

  tag = document.getElementsByTagName("link") ; 

/*getElementByTagName is a method and link is representing the name of elements. */

  for (i = 0; i < tag.length ; i++ )  //for Loop execute a block of code

  {

    if ((tag[i].rel.indexOf( "stylesheet" ) != -1)&&tag[i].title)

    {

      tag[i].disabled = true ;

      if (tag[i].title == css_title)

      {

        tag[i].disabled = false ;

      }

            /* The above code checks the value : If value is exact equal(==) than condition is true and put the Boolean value false. */

    }

/*The above code checks the value: If value is NOT EQUAL -1 (!=-1) and tag(array) of I value are same than condition true then after tag[i] is array and disabled is method and put the Boolean value true.*/

    set_cookie( scname, css_title,scduration );

  }

}

function set_style_from_cookie()   //Another function

{

  var css_title = get_cookie( scname );

  if (css_title.length) {

    switch_style( css_title );

  }

}

function set_cookie ( cookie_name, cookie_value,

    lifespan_in_days, valid_domain )  

{

   

    var domain_string = valid_domain ?

                       ("; domain=" + valid_domain) : '' ;

    document.cookie = cookie_name +

                       "=" + encodeURIComponent( cookie_value ) +

                       "; max-age=" + 60 * 60 *

                       24 * lifespan_in_days +

                       "; path=/" + domain_string ;

}

function get_cookie ( cookie_name )

{   

    var cookie_string = document.cookie ;

    if (cookie_string.length != 0) {

        var cookie_value = cookie_string.match ('(^|;)[\s]*' + cookie_name +

                        '=([^;]*)' );

        return decodeURIComponent ( cookie_value[2] ) ;

    }

    return '' ;

}

Onload Cookies Change: 

The visitors style sheet settings remain when they visit other pages of your site, as well as when they reload the page, you will also need to add an onload attribute to your web pages body element.

For example:

<body onload=”set_style_from_cookie()”>

Summary:

This article finish the series on creating a theme changer, to change style sheets, using both CSS and JavaScript. Above explanation will surely help you in understanding Theme Changer in JavaScript, CSS and HTML.