<!DOCTYPE html>
<html lang="en" class="theme-light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HcWeb-Téma váltás css,js</title>
</head>
<body>
<div class="container">
<h1>Téma vátlása</h1>
<button id="switch" onclick="toggleTheme()">Témaváltás</button>
</div>
<script>
// function to set a given theme/color-scheme
function setTheme(themeName) {
localStorage.setItem('theme', themeName);
document.documentElement.className = themeName;
}
// function to toggle between light and dark theme
function toggleTheme() {
if (localStorage.getItem('theme') === 'theme-dark') {
setTheme('theme-light');
} else {
setTheme('theme-dark');
}
}
// Immediately invoked function to set the theme on initial load
(function () {
if (localStorage.getItem('theme') === 'theme-dark') {
setTheme('theme-dark');
} else {
setTheme('theme-light');
}
})();
</script>
<style>
.container {background: var(--container);
float:right;top:5px;position fixed;}
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.theme-light {
--color-primary: #0060df;
--color-secondary: #fbfbfe;
--color-accent: #fd6f53;
--font-color: #000000;
--container: orange;
--divem:yellow;
--body: url("http://wotblitzmagyar.ucoz.hu/Blogback.png");repeat:no-repeat;
}
.theme-dark {
--color-primary: #17ed90;
--color-secondary: #243133;
--color-accent: #12cdea;
--font-color: #ffffff;
--container: green;
--divem:red;
--body:url("http://wotblitzmagyar.ucoz.hu/blitz_canal_map_03_1200x.jpg");
}
.divem {margin-top:10%;margin-left:25%;width:400px;min-height:300px;background: var(--divem);}
body {
display: flex;
width: 100%;
height: 100%;
background: var(--body);
flex-direction: column;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center; background-size: 100% 100%;
}
.container h1 {
color: var(--font-color);
}
.container button {float:right;margin-top:5px;position fixed;
color: var(--font-color);
background: var(--color-primary);
border: 0;
border-radius: 5px;
}
</style>
<div class="divem">valami</div>
</body>
</html>
Példa:Katt ide
|