2

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.

Improve this question
4
  • If you want to maintain the same theme as last visit you'll need to store a variable somewhere on the server, perhaps in a database. You could set a cookie on the client machine or associate the setting with a particular login. Commented Nov 9, 2016 at 20:03
  • there is local storage in html 5 won't need to use a database Commented Nov 9, 2016 at 20:04
  • @Biffen You've been around long enough to know how to help out by making it better instead of complaining Commented Nov 9, 2016 at 20:11
  • @LGSon I made an attempt but couldn't come up with anything, perhaps I wasn't very motivated since it's not my job. Moreover, I think there's a point in pointing it out: Perhaps OP will learn something from it. Commented Nov 9, 2016 at 20:13

5 Answers 5

Reset to default
1

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

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.

Improve this answer

4 Comments

it didn't work in my project so can you tell me what i've done wrong!! this is my html's head: <html> <head> <script type="text/javascript" src="js/index.js"></script> <script src="ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/index.css"> </head>
You'll have to be a little more specific - please update your question with the code you have and the concrete issue you face.
can you please explain more to me because i don't know where to put the code of the click functions i put the themes in a css file and the first snippet in a javascript file
After re-reading your question, the issue might be the order in which you load your scripts. If you're using jQuery in index.js, jQuery has to be included before index.js. Try swapping the two script tags.
0

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.

Improve this answer

Comments

0

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';

    }

});
Improve this answer

1 Comment

i have to work on three files index.html ,index.css ,index.js so can you tell me what to put in each file please
0

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).

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.