mdivecky/public-web
Archived
1
0
Fork 0
forked from NoLog.cz/public-web
Code Issues Pull requests 2 Projects Releases Packages Wiki Activity

Style color scheme selector

Browse source
This commit is contained in:
Ondřej 2022-10-21 10:20:01 +02:00
parent a9b5f93708
commit 6d34293f62
4 changed files with 101 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
assets/main.css
View file

@ -7,6 +7,38 @@ html {
font-size: theme("fontSize.2xl");
}
/* Color scheme */
.color-scheme--sync .color-scheme--light-icon {
display: none;
}
.color-scheme--sync .color-scheme--dark-icon {
display: block;
}
@media (prefers-color-scheme: dark) {
.color-scheme--sync .color-scheme--light-icon {
display: block;
}
.color-scheme--sync .color-scheme--dark-icon {
display: none;
}
}
.color-scheme--dark .color-scheme--dark-icon,
.color-scheme--light .color-scheme--light-icon {
display: none;
}
.color-scheme--dark .color-scheme--light-icon,
.color-scheme--light .color-scheme--dark-icon {
display: block;
}
/* Typography */
.prose p {
@apply mb-4;
}

40
assets/style.css
View file

@ -668,14 +668,14 @@ video {
align-items: center;
}
.gap-2 {
gap: 0.5rem;
}
.gap-6 {
gap: 1.5rem;
}
.gap-2 {
gap: 0.5rem;
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
@ -724,6 +724,38 @@ html {
font-size: 1.5rem;
}
/* Color scheme */
.color-scheme--sync .color-scheme--light-icon {
display: none;
}
.color-scheme--sync .color-scheme--dark-icon {
display: block;
}
@media (prefers-color-scheme: dark) {
.color-scheme--sync .color-scheme--light-icon {
display: block;
}
.color-scheme--sync .color-scheme--dark-icon {
display: none;
}
}
.color-scheme--dark .color-scheme--dark-icon,
.color-scheme--light .color-scheme--light-icon {
display: none;
}
.color-scheme--dark .color-scheme--light-icon,
.color-scheme--light .color-scheme--dark-icon {
display: block;
}
/* Typography */
.prose p {
margin-bottom: 1rem;
}

8
layouts/_default/baseof.html
View file

@ -12,13 +12,17 @@
{{ partialCached "tracking.html" . }}
</head>
<body>
<body
x-data="{ colorScheme: $persist('sync') }"
x-bind:class="`color-scheme--${colorScheme}`"
>
<header class="pt-4 pb-6">
<div class="container mx-auto px-6 flex mb-4 gap-2">
<div class="container mx-auto px-6 flex items-center mb-4 gap-6">
<a href="{{ "/" | relLangURL }}" title="Home" rel="home" class="md:mr-auto">
<img src="{{ "/images/logo.png" | relURL }}" width="60" alt="{{ site.Title }}" />
</a>
{{ partial "language-selector.html" . }}
{{ partial "theme-selector.html" . }}
</div>
{{ partial "menu.html" . }}
</header>

27
layouts/partials/theme-selector.html Normal file
View file

@ -0,0 +1,27 @@
<h2 class="sr-only">{{ i18n "theme_select_title" }}</h2>
<button x-on:click="toggleColorScheme">
<svg class="color-scheme--icon color-scheme--light-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32">
<g>
<path fill="none" d="M0 0h24v24H0z"/>
<path fill-rule="nonzero" d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/>
</g>
</svg>
<svg class="color-scheme--icon color-scheme--dark-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32">
<g>
<path fill="none" d="M0 0h24v24H0z"/>
<path fill-rule="nonzero" d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938 7.999 7.999 0 0 0 4 12z"/>
</g>
</svg>
</button>
<script>
function toggleColorScheme() {
const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
if (this.colorScheme === 'sync') {
this.colorScheme = prefersDarkMode ? 'light' : 'dark'
} else {
this.colorScheme = this.colorScheme === 'dark' ? 'light' : 'dark'
}
}
</script>