ios appearance and theme override

This commit is contained in:
cupcakearmy 2021-05-05 10:42:37 +02:00
parent 0d79e9c85e
commit 1bb5d3ecb0
No known key found for this signature in database
GPG Key ID: D28129AE5654D9D9
6 changed files with 136 additions and 35 deletions

View File

@ -7,29 +7,46 @@
:root { :root {
font-family: 'Fira Mono', monospace; font-family: 'Fira Mono', monospace;
--ui-bg-0: #fefefe; --ui-bg-0: #111;
--ui-bg-0-85: #fefefed9; --ui-bg-0-85: #111111d9;
--ui-bg-1: #eee; --ui-bg-1: #333;
--ui-bg-2: #e2e2e2; --ui-bg-2: #444;
--ui-text-0: #111; --ui-text-0: #fefefe;
--ui-text-1: #222; --ui-text-1: #eee;
--ui-clr-primary: hsl(186, 65%, 55%); --ui-clr-primary: hsl(186, 65%, 55%);
--ui-clr-error: hsl(357, 77%, 51%); --ui-clr-error: hsl(357, 77%, 51%);
--ui-anim: all 150ms ease; --ui-anim: all 150ms ease;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: light) {
:root { :root {
--ui-bg-0: #111; --ui-bg-0: #fefefe;
--ui-bg-0-85: #111111d9; --ui-bg-0-85: #fefefed9;
--ui-bg-1: #222; --ui-bg-1: #eee;
--ui-bg-2: #282828; --ui-bg-2: #e2e2e2;
--ui-text-0: #fefefe; --ui-text-0: #111;
--ui-text-1: #eee; --ui-text-1: #333;
} }
} }
:root[theme='dark'] {
--ui-bg-0: #111 !important;
--ui-bg-0-85: #111111d9 !important;
--ui-bg-1: #333 !important;
--ui-bg-2: #444 !important;
--ui-text-0: #fefefe !important;
--ui-text-1: #eee !important;
}
:root[theme='light'] {
--ui-bg-0: #fefefe !important;
--ui-bg-0-85: #fefefed9 !important;
--ui-bg-1: #eee !important;
--ui-bg-2: #e2e2e2 !important;
--ui-text-0: #111 !important;
--ui-text-1: #333 !important;
}
.error-text { .error-text {
color: var(--ui-clr-error); color: var(--ui-clr-error);
} }
@ -61,6 +78,8 @@ input,
textarea, textarea,
button { button {
appearance: none; appearance: none;
-webkit-appearance: none;
border-radius: 0;
transition: var(--ui-anim); transition: var(--ui-anim);
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;

View File

@ -0,0 +1,63 @@
<script lang="ts" context="module">
import { writable } from 'svelte/store'
export enum Theme {
Dark = 'dark',
Light = 'light',
Auto = 'auto',
}
const NextTheme = {
[Theme.Auto]: Theme.Light,
[Theme.Light]: Theme.Dark,
[Theme.Dark]: Theme.Auto,
}
function init(): Theme {
if (typeof window !== 'undefined') {
const saved = window.localStorage.getItem('theme') as Theme
console.log(Theme, window.localStorage.getItem('theme'))
if (Object.values(Theme).includes(saved)) return saved
}
return Theme.Auto
}
export const theme = writable<Theme>(init())
theme.subscribe((theme) => {
if (typeof window !== 'undefined') {
window.localStorage.setItem('theme', theme)
const html = window.document.getElementsByTagName('html')[0]
html.setAttribute('theme', theme)
}
})
</script>
<script lang="ts">
import Icon from '$lib/ui/Icon.svelte'
function change() {
theme.update((current) => NextTheme[current])
}
</script>
<div on:click={change}>
<Icon class="icon" icon="contrast-sharp" />
{$theme}
</div>
<style>
div :global(.icon) {
height: 1rem;
width: 1rem;
margin-right: 0.5rem;
}
div {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
cursor: pointer;
}
</style>

View File

@ -0,0 +1,37 @@
<script lang="ts">
import Icon from '$lib/ui/Icon.svelte'
import ThemeToggle from '$lib/ui/ThemeToggle.svelte'
</script>
<footer>
<ThemeToggle />
<nav>
<a href="/">/home</a>
<a href="/about">/about</a>
<a href="https://github.com/cupcakearmy/cryptgeon" target="_blank" rel="noopener">/code</a>
</nav>
</footer>
<style>
footer {
display: flex;
justify-content: space-between;
padding: 1rem;
position: fixed;
bottom: 0;
right: 0;
width: 100%;
background-color: var(--ui-bg-0-85);
}
a {
margin: 0 0.5rem;
}
nav {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
</style>

View File

@ -8,7 +8,6 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xlink="http://www.w3.org/1999/xlink"
xml:space="preserve" xml:space="preserve"
xmlns:serif="http://www.serif.com/"
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
><g ><g
><clipPath id="_clip1"><rect x="6.336" y="3.225" width="193.55" height="193.55" /></clipPath ><clipPath id="_clip1"><rect x="6.336" y="3.225" width="193.55" height="193.55" /></clipPath
@ -78,5 +77,6 @@
width: 100%; width: 100%;
max-width: 16rem; max-width: 16rem;
transform: translateX(-1rem); transform: translateX(-1rem);
fill: currentColor;
} }
</style> </style>

View File

@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import Footer from '$lib/views/Footer.svelte'
import Header from '$lib/views/Header.svelte' import Header from '$lib/views/Header.svelte'
import '../app.css' import '../app.css'
@ -13,16 +14,9 @@
<slot /> <slot />
</main> </main>
<footer> <Footer />
<a href="/">/home</a>
<a href="/about">/about</a>
<a href="https://github.com/cupcakearmy/cryptgeon" target="_blank" rel="noopener">/code</a>
</footer>
<style> <style>
a {
margin: 0 0.5rem;
}
main { main {
padding: 1rem; padding: 1rem;
padding-bottom: 4rem; padding-bottom: 4rem;
@ -30,17 +24,4 @@
max-width: 35rem; max-width: 35rem;
margin: 0 auto; margin: 0 auto;
} }
footer {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
padding: 1rem;
position: fixed;
bottom: 0;
right: 0;
width: 100%;
background-color: var(--ui-bg-0-85);
}
</style> </style>

View File

@ -0,0 +1 @@
<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>Contrast</title><path d='M256 32C132.29 32 32 132.29 32 256s100.29 224 224 224 224-100.29 224-224S379.71 32 256 32zM128.72 383.28A180 180 0 01256 76v360a178.82 178.82 0 01-127.28-52.72z'/></svg>

After

Width:  |  Height:  |  Size: 279 B