Dark Mode

Кнопка перемикання стилю шаблона Wordpress

by Андрій Іванюра

HTML

<script src="https://kit.fontawesome.com/65bc12721f.js"></script>
<p>
  <span class="dark"></span>
</p>
<p>
  <span class="light"></span>
</p>

CSS

:root {
  --main-color: #222;
  --main-bg-color: #fff;
}
.dark {
    display: block;
    width: 60px;
    height: 35px;
    border-radius: 5em;
    background: var(--main-color);
}
.dark:before {
    content: "";
    display: block;
    width: 31px;
    height: 31px;
    position: absolute;
    border-radius: 50%;
    background: var(--main-bg-color);
    margin-top: 2px;
    margin-left: 2px;

}
.dark:after {
    content: "\f186";
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    position: absolute;
    font-size: 20px;
    margin-top: 7px;
    margin-left: 7px;
    color: var(--main-color);
}
.light {
    display: block;
    width: 60px;
    height: 35px;
    border-radius: 35px;
    background: var(--main-color);
}
.light:before {
    content: "";
    display: block;
    position: absolute;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    background: var(--main-bg-color);
    margin-top: 2px;
    margin-left: 27px;
}
.light:after {
    content: "\f185";
    font-family: "Font Awesome 5 Free";
    font-size: 20px;
    font-weight: 700;
    color: var(--main-color);
    position: absolute;
    margin-top: 7px;
    margin-left: 33px;

}