CODEWITHSUNDEEP
javascriptcsshtml
user7138110
user7138110

Reputation:

Switch CSS theming with JavaScript

I have an HTML page with two buttons: a light theme button and a dark theme button. When I click the light theme button the background will turn light gray and text is black, when I click the dark theme button the background will turn black and text is white.

When I reopen my page the last theme selected should be generated.

so here is my html:

<html>
    <head>
        <script type="text/javascript" src="js/index.js"></script>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css/index.css">
    </head>

    <div class="MyPage">
        <body>
            <h1>choose a theme:</h1>
            <input id="b1" type="button" value="light theme">
            <input id="b2" type="button" value="darck theme">
            <p>this a sample for using API local storage in HTML5 </p>        
        </body>
    </div>
</html>

css:

.MyLightPage 
{
    background-color: gray;
    text-decoration-color: black;
}
.MyDarkPage
{
    background-color: black;
    color: white;  
}

My problem is how to connect the 3 diverse types of my project (HTML, CSS and JavaScript) and what functions should be existing in my JavaScript file to make this happen.

Upvotes: 2

Views: 3842

Answers (5)

RWC
RWC

Reputation: 5052

You can either use different CSS classes for the different styles/themes or you could use different CSS files. I would prefer the latter.

Here you can see how to do that:

https://stackoverflow.com/a/78293807/760777

If you want the the/style remembered for when a visitor revisits your site, you have to use cookies or localStorage (part of HTML5) ... or if an user of your site, store his preferences somewhere on the server (file or database).

Upvotes: 0

Aloxord
Aloxord

Reputation: 1

try this:

var element = document.querySelector('body'),
    button  = document.querySelector('#myButton');

button.addEventListener('click',function(){

    if(element.className == 'MyLightPage'){

        element.className = 'MyDarkPage';

    }else{

        element.className = 'MyLightPage';

    }

});

Upvotes: 0

A.Sharma
A.Sharma

Reputation: 2799

If you want to maintain the state of the last color that is clicked you need to hold some data on the server. The DOM will refresh every time you do a hard page reload. Database data, however, maintains the data that you can fetch on every page load. You can update this database data when one of the buttons is clicked. You have different ways to implement this. An example could be:

.theme-styling{
  <?php echo getDarkOrLightThemeCode(); ?>
}

Then in the DOM, you can assign theme styling to specific elements that have a light and dark element styling:

<button class="btn btn-large theme-styling">Hello</button>
<button class="btn btn-large theme-styling">Goodbye</button>

You can add an id to specific elements if you want additional styling apart from your dark and light theme styles.

And then specifically, when the user clicks a dark theme button or light theme button, you should create an AJAX request to update the variable property on the server.

Upvotes: 0

marnix
marnix

Reputation: 60

This can be easily done using JavaScript. The buttons call different functions where the background and text color is being set.

#MyPage {
        background-color: black;
        color: white;  
}
<div id="MyPage">
     <h1>choose a theme:</h1>
     <input id="b1" onclick="lightTheme()" type="button" value="light theme">
     <input id="b2" onclick="darkTheme()" type="button" value="dark theme">
     <p>this a sample for using API local storage in HTML5 </p>  
     <script>
     	  function darkTheme() {
            document.getElementById('MyPage').style.backgroundColor = "black";
            document.getElementById('MyPage').style.color = "white";
          }

          function lightTheme() {
            document.getElementById('MyPage').style.backgroundColor = "white";
            document.getElementById('MyPage').style.color = "black";
          }
     </script>
</div>

Upvotes: 1

Christian Zosel
Christian Zosel

Reputation: 1424

This snippet shows how to set the relevant CSS classes upon the click of a button. Saving the selecting theme can be added to the JS part easily - please refer to the very simple Localstorage API for details.

$('#b1').click(function() {
  $('body').attr("class","MyLightPage");
});
$('#b2').click(function() {
  $('body').attr("class","MyDarkPage");
});
.MyLightPage 
  {
     background-color: gray;
     text-decoration-color: black;

   }
 .MyDarkPage
     {
        background-color: black;
        color: white;  
     }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
 <div class="MyPage">

       <h1>choose a theme:</h1>
        <input id="b1" type="button" value="light theme">
        <input id="b2" type="button" value="dark theme">
        <p>this a sample for using API local storage in HTML5 </p>        
 </div>
</body>

As a side note, please also have a look at how a basic HTML document is structured. The body tag should not be the child of any divs, it has to be the direct child of the html tag.

Upvotes: 1

Related Questions