Skip to content

Instantly share code, notes, and snippets.

@nitishk72

nitishk72/index.html

Created July 22, 2019 12:07
Show Gist options
  • Save nitishk72/c73dae6e078ab75a436ec4c7688e5122 to your computer and use it in GitHub Desktop.
Save nitishk72/c73dae6e078ab75a436ec4c7688e5122 to your computer and use it in GitHub Desktop.
Download ZIP
Theme Switch using CSS only
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body id="dark">
<div class="container">
<!-- Theme Switch -->
<div class="theme-switch">
<!-- Dark Theme Button -->
<a href="#dark" class="theme-btn">Dark</a>
<!-- Light Theme Button -->
<a href="#light" class="theme-btn">Light</a>
</div>
</div>
</body>
</html>
Raw
style.csss
:root{
--primary-color : #000000;
--secondary-color : #ffffff;
}
body{
font-family: sans-serif;
background: var(--secondary-color);
color: var(--primary-color);
transition: 1s ease;
margin: 0px;
}
body:target{
background: var(--primary-color);
color: var(--secondary-color);
}
.theme-btn{
padding: 8px 12px;
text-decoration: none;
}
body .theme-btn{
background: var(--primary-color);
color : var(--secondary-color)
}
body:target .theme-btn{
background: var(--secondary-color);
color : var(--primary-color);
}
body .theme-btn[href="#dark"]{
display: inline;
}
body:target .theme-btn[href="#dark"]{
display: none;
}
body:target .theme-btn[href="#light"]{
display: inline;
}
body .theme-btn[href="#light"]{
display: none;
}
.container{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment