<body x-data="{
darkMode: true,
toggleTheme() {
this.darkMode = !this.darkMode;
}
}"
:class="[darkMode ? 'ui-dark-theme' : 'ui-light-theme']">
<header class="l-header">
<h1><span>Темний режим</span></h1>
</header>
<div class="l-container">
<div class="c-theme-switch" @click="toggleTheme()">
<div class="c-theme-switch__toggle"></div>
</div>
</div>
</body>
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
.ui-dark-theme {
--color-text: #fff;
--color-custom: #ffeba7;
--color-bg: #26242e;
--color-primary: #ffeba7;
--color-switch-theme: #fff;
}
.ui-light-theme {
--color-text: #26242e;
--color-custom: #ff3671;
--color-bg: #fff;
--color-primary: #ff3671;
--color-switch-theme: #26242e;
.c-theme-switch {
.c-theme-switch__toggle {
transform: translateX(0px);
}
}
}
/* ****************** */
body {
height: 100vh;
overflow: hidden;
background: var(--color-bg);
font-family: 'Oswald', sans-serif;
transition: 500ms background ease;
}
body,
.l-container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.l-header {
margin-bottom: 12px;
color: var(--color-text);
h1 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-transform: uppercase;
font-family: Montserrat, sans-serif;
font-weight: 900;
font-size: 52px;
color: var(--color-custom);
}
}
.c-theme-switch {
position: relative;
width: 70px;
height: 30px;
border-radius: 50px;
color: var(--color-text);
border: 1px solid var(--color-switch-theme);
cursor: pointer;
.c-theme-switch__toggle {
width: 24px;
height: 24px;
background: var(--color-primary);
border-radius: 100%;
position: absolute;
top: 3px;
left: 4px;
transform: translateX(37px);
transition: 500ms all ease;
}
}
External CSS
This Pen doesn't use any external CSS resources.