Recreation of this beautiful UI from @getdona on Twitter: https://twitter.com/getdona/status/1364515417201381379
A Pen by Håvard Brynjulfsen on CodePen.
Created
March 30, 2022 14:06
-
-
Save Roger963/ec2a3b53167f0a230aedcb9434a35df0 to your computer and use it in GitHub Desktop.
Light / Dark / Black Theme
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="menu"> | |
| <div class="menu-header"> | |
| <h2 class="menu-header-title">Theme</h2> | |
| <div class="theme-switcher"> | |
| <input type="radio" id="light-theme" name="themes" checked /> | |
| <label for="light-theme"> | |
| <span> | |
| <i data-feather="sun"></i>Light | |
| </span> | |
| </label> | |
| <input type="radio" id="dark-theme" name="themes" /> | |
| <label for="dark-theme"> | |
| <span> | |
| <i data-feather="moon"></i>Dark | |
| </span> | |
| </label> | |
| <input type="radio" id="black-theme" name="themes" /> | |
| <label for="black-theme"> | |
| <span> | |
| <i data-feather="star"></i>Black | |
| </span> | |
| </label> | |
| <span class="slider"></span> | |
| </div> | |
| </div> | |
| <div class="menu-body"> | |
| <a href="#"><i data-feather="user"></i>Account Settings</a> | |
| <a href="#"><i data-feather="message-square"></i>Give Feedback</a> | |
| <a href="#"><i data-feather="info"></i>About</a> | |
| <a href="#"><i data-feather="life-buoy"></i>Support</a> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| feather.replace(); | |
| // Just a tiny bit of JavaScript to add classnames to the HTML-element on toggle | |
| var html = document.getElementsByTagName('html'); | |
| var radios = document.getElementsByName('themes'); | |
| for (i = 0; i < radios.length; i++) { | |
| radios[i].addEventListener('change', function() { | |
| html[0].classList.remove(html[0].classList.item(0)); | |
| html[0].classList.add(this.id); | |
| }); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://unpkg.com/feather-icons"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"); | |
| *, | |
| *:after, | |
| *:before { | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --c-text-primary: #191919; | |
| --c-text-secondary: #737374; | |
| --c-border-primary: #ccc; | |
| --c-bg-body: #ccc; | |
| --c-bg-primary: #fff; | |
| --c-bg-secondary: #d4d8dd; | |
| --c-bg-button: #fff; | |
| --slider-shadow: inset 0 1px 1px #ddd, 0 2px 3px #ccc; | |
| &.dark-theme { | |
| --c-text-primary: #eee; | |
| --c-text-secondary: #d3d5db; | |
| --c-border-primary: #454545; | |
| --c-bg-primary: #323339; | |
| --c-bg-secondary: #222128; | |
| --c-bg-button: #494a50; | |
| --slider-shadow: inset 0 1px 1px #767676; | |
| } | |
| &.black-theme { | |
| --c-text-primary: #edeeef; | |
| --c-text-secondary: #d4d7e1; | |
| --c-border-primary: #323232; | |
| --c-bg-primary: #1b1d23; | |
| --c-bg-secondary: #000001; | |
| --c-bg-button: #343844; | |
| --slider-shadow: inset 0 1px 1px #555; | |
| } | |
| } | |
| body { | |
| font-family: "Inter", sans-serif; | |
| line-height: 1.5; | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: flex-end; | |
| justify-content: center; | |
| background-color: var(--c-bg-body); | |
| color: var(--c-text-primary); | |
| } | |
| .menu { | |
| width: 90%; | |
| max-width: 320px; | |
| background-color: var(--c-bg-primary); | |
| transition: background-color 0.15s ease; | |
| border-radius: 10px 10px 0 0; | |
| box-shadow: 0 0 2px rgba(#000, 0.05), 0 -4px 16px rgba(#000, 0.1); | |
| } | |
| .menu-header { | |
| padding: 1rem; | |
| } | |
| .menu-header-title { | |
| font-size: 0.875rem; | |
| color: var(--c-text-secondary); | |
| margin-bottom: 0.375rem; | |
| font-weight: 500; | |
| } | |
| .theme-switcher { | |
| background-color: var(--c-bg-secondary); | |
| border-radius: 10px; | |
| display: flex; | |
| padding: 0 3px; | |
| align-items: center; | |
| position: relative; | |
| overflow: hidden; | |
| .slider { | |
| display: block; | |
| position: absolute; | |
| z-index: 1; | |
| width: calc((100% - 6px) / 3); | |
| top: 3px; | |
| transform: translatex(-110%); | |
| bottom: 3px; | |
| border-radius: 6px; | |
| transition: 0.15s ease, transform 0.25s ease-out; | |
| background-color: var(--c-bg-button); | |
| box-shadow: var(--slider-shadow); | |
| } | |
| input { | |
| display: none; | |
| &:nth-of-type(1):checked ~ .slider { | |
| transform: translateX(0); | |
| } | |
| &:nth-of-type(2):checked ~ .slider { | |
| transform: translateX(100%); | |
| } | |
| &:nth-of-type(3):checked ~ .slider { | |
| transform: translateX(200%); | |
| } | |
| } | |
| label { | |
| position: relative; | |
| z-index: 2; | |
| width: calc(100% / 3); | |
| color: var(--c-text-secondary); | |
| span { | |
| padding: 8px 0; | |
| border-radius: 6px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| font-weight: 500; | |
| } | |
| svg { | |
| display: inline-block; | |
| margin-right: 0.5rem; | |
| width: 20px; | |
| } | |
| } | |
| } | |
| .menu-body { | |
| display: flex; | |
| flex-direction: column; | |
| padding: 0.5rem; | |
| border-top: 1px solid var(--c-border-primary); | |
| transition: border-color 0.15s ease; | |
| a { | |
| text-decoration: none; | |
| color: inherit; | |
| display: flex; | |
| align-items: center; | |
| padding: 0.625rem 0.5rem; | |
| border-radius: 4px; | |
| font-weight: 500; | |
| transition: 0.15s ease; | |
| svg { | |
| margin-right: 1rem; | |
| color: var(--c-text-secondary); | |
| transition: color 0.15s ease; | |
| } | |
| &:hover { | |
| background-color: var(--c-bg-secondary); | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment