Hi,
Does anyone know how to add option in web page to change the css theme?
For example, i have two css files: "light.css", and "dark.css". I want to add option so the users to can change and use one of these themes, but when the user visits the site again, to see the theme he /she has chosen.
Option to change the CSS theme
-
- Posts: 106
Option to change the CSS theme
Admin
Welcome
It can be made with html and javascript:
- Add an id to the html <link> tag which loads the css file.
- Create a <select> with options for various themes / css files.
- Make a javascript script that takes the value of the chosen option from <select> and changes the one in the <link> tag, then adds / saves that value in the user's browser (in localStorage).
- When the page loads, check if there is a localStorage with a css theme, if exists, add it in the <link> tag.
Here's an example:
It can be made with html and javascript:
- Add an id to the html <link> tag which loads the css file.
- Create a <select> with options for various themes / css files.
- Make a javascript script that takes the value of the chosen option from <select> and changes the one in the <link> tag, then adds / saves that value in the user's browser (in localStorage).
- When the page loads, check if there is a localStorage with a css theme, if exists, add it in the <link> tag.
Here's an example:
Code: Select all
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Title</title>
<link href="css/light.css" rel="stylesheet" type="text/css" id="css_id" />
</head>
<body>
<select id="change_css">
<option value="css/light.css">Light</option>
<option value="css/dark.css">Dark</option>
</select>
<script>
// if the css option is saved in browser, use it
if(localStorage.getItem('css_teme')) {
document.getElementById('css_id').href = localStorage.getItem('css_teme');
// change the selected option in select
var sel_op = document.getElementById('change_css').querySelectorAll('option');
for(var i=0; i<sel_op.length; i++) {
if(sel_op[i].value == localStorage.getItem('css_teme')) {
sel_op[i].setAttribute('selected', 'selected');
break;
}
}
}
// when the select option is changed
document.getElementById('change_css').addEventListener('change', function(e) {
// change the used css file
document.getElementById('css_id').href = this.value;
// stores the value in browser's localstorage
localStorage.setItem('css_teme', this.value);
});
</script>
</body>
</html>
Similar Topics
-
How to change key in JS object
JavaScript - jQuery - Ajax
First post
I have a question: i want to change keys into a JavaScript object if their value is number, for example, I have the following object:Last post
const...
To change a key into a JavaScript object, you need to clone the value with the new key, and then you delete the old key in the object.
const... -
Display selected option into a Div
JavaScript - jQuery - Ajax
First post
How can I make that when an option from dropdowna <select> list is selected, the value of that option be displayed into a Div.Last post
I have this...
You have to start with a <select> element which raises a 'change' event when an option is selected.
Inside that event, 'this.value' refers to... -
Climate change is turning parts of Antarctica green
Remarkable News
Scientists have created the first large-scale map of microscopic algae on the Antarctic peninsula as they bloom across the surface of the melting...
-
The disable attribute in option tag not working
HTML - CSS
First post
I have designed a html page, but in option tag I have set disabled= true , still it is not disabling the option.Last post
Things I have tried:
disabled=...
The attribute disabled sets without value (without ='true' ). You need just add this attribute into the options you want disabled.
<option...