Skip to content

Commit

Permalink
Merge pull request #1 from zoglo/feature/dark-mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@Toflar
Toflar authored Feb 21, 2024
2 parents b027363 + e0c4583 commit d130594
Show file tree
Hide file tree
Showing 3 changed files with 420 additions and 22 deletions.
165 changes: 165 additions & 0 deletions page/layouts/partials/dark-mode-toggle.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,165 @@
<style>
.dark-mode__switch {
display: flex;
position: relative;
}
.dark-mode__input {
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}
.dark-mode__label {
position: relative;
display: inline-block;
width: 44px;
height: 22px;
margin: 16px 0 0;
background-color: #2b2b2b;
border: 2px solid #5b5b5b;
border-radius: 50px;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.46, 0.03, 0.52, 0.96);
}
.dark-mode__indicator {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) translateX(-72%);
display: block;
width: 15px;
height: 15px;
background-color: #7b7b7b;
border-radius: 50px;
box-shadow: 5px 0px 0 0 rgba(0, 0, 0, 0.2) inset;
}
.dark-mode__indicator::before, .dark-mode__indicator::after {
position: absolute;
content: "";
display: block;
background-color: #fff;
border-radius: 9999px;
}
.dark-mode__indicator::before {
top: 3.5px;
left: 3.5px;
width: 4.5px;
height: 4.5px;
background-color: #fff;
opacity: 0.6;
}
.dark-mode__indicator::after {
bottom: 4px;
right: 3px;
width: 6px;
height: 6px;
background-color: #fff;
opacity: 0.8;
}
.dark-mode__indicator, .dark-mode__indicator::before, .dark-mode__indicator::after {
transition: all 0.4s cubic-bezier(0.46, 0.03, 0.52, 0.96);
}
.dark-mode__decoration {
position: absolute;
top: 65%;
left: 50%;
display: block;
width: 2px;
height: 2px;
background-color: #fff;
border-radius: 50px;
opacity: .3;
}
.dark-mode__decoration::before, .dark-mode__decoration::after {
position: absolute;
display: block;
content: '';
width: 2px;
height: 2px;
background-color: #fff;
border-radius: 50px;
}
.dark-mode__decoration::before {
top: -8px;
left: 7px;
opacity: 1;
}
.dark-mode__decoration::after {
top: -3px;
left: 15px;
opacity: .2;
}
.dark-mode__input:checked + .dark-mode__label {
background-color: #8fb5f5;
border-color: #347cf8;
}
.dark-mode__input:checked + .dark-mode__label .dark-mode__indicator {
background-color: #ecd21f;
box-shadow: none;
transform: translate(-50%, -50%) translateX(72%);
}
.dark-mode__input:checked + .dark-mode__label .dark-mode__indicator::before, .dark-mode__input:checked + .dark-mode__label .dark-mode__indicator::after {
display: none;
}
.dark-mode__input:checked + .dark-mode__label .dark-mode__decoration {
top: 50%;
transform: translate(0%, -50%);
width: 10px;
height: 10px;
opacity: 1;
}
.dark-mode__input:checked + .dark-mode__label .dark-mode__decoration::before {
width: 5px;
height: 5px;
top: auto;
bottom: 0;
left: -4px;
opacity: 1;
}
.dark-mode__input:checked + .dark-mode__label .dark-mode__decoration::after {
width: 7px;
height: 7px;
top: auto;
bottom: 0;
left: 8px;
opacity: 1;
}
.dark-mode__input:checked + .dark-mode__label .dark-mode__decoration, .dark-mode__input:checked + .dark-mode__label .dark-mode__decoration::before, .dark-mode__input:checked + .dark-mode__label .dark-mode__decoration::after {
border-radius: 50px 50px 0 0;
}
.dark-mode__input:checked + .dark-mode__label .dark-mode__decoration::after {
border-bottom-right-radius: 50px;
}
</style>
<div class="dark-mode__switch">
<input id="dark-mode-toggle" class="dark-mode__input" type="checkbox" onchange="setColorMode(this.checked?'light':'dark')" onload="getColorMode()" checked=""/>
<label class="dark-mode__label" for="dark-mode-toggle">
<span class="dark-mode__indicator"></span>
<span class="dark-mode__decoration"></span>
</label>
</div>
<script>
const setColorMode = (theme) => {
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
}

const getColorMode = () => {
const getStoredTheme = () => localStorage.getItem('theme');
const storedTheme = getStoredTheme();

if (storedTheme) {
return storedTheme;
}

return window.matchMedia("(prefers-color-scheme: dark)").matches ? 'dark' : 'light';
}

const colorMode = getColorMode();
setColorMode(colorMode);
document.getElementById('dark-mode-toggle').checked = colorMode === 'light';
</script>
18 changes: 18 additions & 0 deletions page/layouts/partials/search.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<div class="searchbox">
<label for="search-by"><i class="fas fa-search"></i></label>
<input data-search-input id="search-by" type="search" placeholder="{{T "Search-placeholder"}}">
<span data-search-clear=""><i class="fas fa-times"></i></span>
</div>
{{ $assetBusting := not .Site.Params.disableAssetsBusting }}
<script type="text/javascript" src="{{"js/lunr.min.js" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}"></script>
<script type="text/javascript" src="{{"js/auto-complete.js" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}"></script>
<script type="text/javascript">
{{ if .Site.IsMultiLingual }}
var baseurl = "{{.Site.BaseURL}}{{.Site.LanguagePrefix}}";
{{ else }}
var baseurl = "{{.Site.BaseURL}}";
{{ end }}
</script>
<script type="text/javascript" src="{{"js/search.js" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}"></script>

{{ partial "dark-mode-toggle.html" . }}
Loading

0 comments on commit d130594

Please sign in to comment.