commit 95c5c29d32e64a3ac887e444ac895e9dd0983c91
parent 8208c0a16647c8199c2863da7bc090a58f1fd18b
Author: mokou <mokou@posteo.de>
Date: Fri, 26 Jun 2020 19:02:53 +0200
feat: Add dark mode
Diffstat:
8 files changed, 63 insertions(+), 21 deletions(-)
diff --git a/package-lock.json b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "koro",
- "version": "1.1.0",
+ "version": "1.2.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
diff --git a/public/index.html b/public/index.html
@@ -28,7 +28,6 @@
<script defer src='/build/main.js'></script>
</head>
-
<body>
</body>
</html>
diff --git a/src/App.svelte b/src/App.svelte
@@ -1,6 +1,6 @@
<script>
import navaid from 'navaid'
- import { is24Hrs } from './stores'
+ import { is24Hrs, isDarkMode } from './stores'
import Index from './pages/Index.svelte'
import Event from './pages/Event.svelte'
import Log from './pages/Log.svelte'
@@ -15,6 +15,14 @@
router.listen()
+ isDarkMode.subscribe(mode => {
+ if (mode) {
+ document.body.className = 'bg-gray-900'
+ } else {
+ document.body.className = 'bg-gray-100'
+ }
+ })
+
function setRoute(r) {
return (params) => {
route = r
@@ -23,16 +31,20 @@
}
</script>
-<main class="w-full max-w-screen-xl px-4 mx-auto px-6 mt-5">
+<div
+ class="w-screen"
+ class:text-gray-100={$isDarkMode}
+>
+<main class="w-full max-w-screen-xl mx-auto px-6 pt-5">
<svelte:component this={route} bind:params={routeParams} />
<hr class="border-gray-300 mt-5 mb-2 max-w-xl"/>
- <div class="text-center text-sm text-gray-800 max-w-xl">
+ <div class="text-center text-sm max-w-xl text-gray-100" class:text-gray-800={!$isDarkMode}>
koro v.{process.version} by
- <a class="text-purple-600" href="https://marisa.touhou.cz">Marisa</a>
- (<a class="text-purple-600" href="https://git.touhou.cz/mokou/koro">source</a>)
+ <a class="text-purple-400" class:text-purple-600={!$isDarkMode} href="https://marisa.touhou.cz">Marisa</a>
+ (<a class="text-purple-400" class:text-purple-600={!$isDarkMode} href="https://git.touhou.cz/mokou/koro">source</a>)
<br/>
- <span class="text-purple-600 hover:cursor-pointer" on:click={is24Hrs.set(!$is24Hrs)}>
+ <span class="text-purple-400 hover:cursor-pointer" class:text-purple-600={!$isDarkMode} on:click={is24Hrs.set(!$is24Hrs)}>
{#if $is24Hrs}
toggle AM/PM
{:else}
@@ -40,6 +52,15 @@
{/if}
</span>
•
- <a class="text-purple-600" href="/updates">update log</a>
+ <span class="text-purple-400 hover:cursor-pointer" class:text-purple-600={!$isDarkMode} on:click={isDarkMode.set(!$isDarkMode)}>
+ {#if $isDarkMode}
+ set light mode
+ {:else}
+ set dark mode
+ {/if}
+ </span>
+ •
+ <a class="text-purple-400" class:text-purple-600={!$isDarkMode} href="/updates">update log</a>
</div>
</main>
+</div>
diff --git a/src/components/DateTimeGrid.svelte b/src/components/DateTimeGrid.svelte
@@ -1,7 +1,7 @@
<script>
import day from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
- import { is24Hrs } from '../stores'
+ import { is24Hrs, isDarkMode } from '../stores'
day.extend(relativeTime)
export let startDate
@@ -62,7 +62,7 @@
}
</script>
-<div class="grid grid-cols-4 lg:grid-cols-11 w-full max-w-5xl datetimegrid">
+<div class="grid grid-cols-4 lg:grid-cols-11 w-full max-w-5xl datetimegrid" class:dark={$isDarkMode}>
<div
class="block lg:hidden text-xs bg-black text-white"
on:click={() => (view = view[1] < datesDay1.length ? [view[0] + 1, view[1] + 1] : view)}
diff --git a/src/main.css b/src/main.css
@@ -9,10 +9,13 @@
}
@import 'tailwindcss/base';
+
@import 'tailwindcss/components';
body {
font-family: 'Inter';
+ margin: 0 !important;
+ padding: 0 !important;
}
input {
@@ -26,6 +29,12 @@ input {
line-height: 1.5;
}
+input.dark,
+.dark input,
+.dark .autocomplete__option {
+ @apply text-gray-900;
+}
+
.btn {
@apply px-3 py-2 font-bold bg-purple-600 text-white border-purple-600 rounded-sm;
font-family: 'Inter';
@@ -43,6 +52,10 @@ input {
@apply px-2 py-2 border transition duration-300;
}
+.datetimegrid.dark div {
+ @apply border-gray-800;
+}
+
.datetimegrid div.time:hover {
@apply bg-purple-600 text-white;
}
diff --git a/src/pages/Event.svelte b/src/pages/Event.svelte
@@ -8,7 +8,7 @@
import { get } from 'svelte/store'
import { pouch, replicateToCouch, syncDoc } from '../couch'
import ResponseGrid from '../components/ResponseGrid.svelte'
- import { hasResponded, is24Hrs } from '../stores'
+ import { hasResponded, is24Hrs, isDarkMode } from '../stores'
day.extend(utc)
day.extend(relativeTime)
@@ -161,8 +161,8 @@
{#if !$hasResponded || !$hasResponded[params.id]}
<form class="mt-5 max-w-xl" on:submit|preventDefault={onSubmit}>
- <label for="name" class="font-bold text-gray-600">Your name</label>
- <input type="text" bind:value={name} />
+ <label for="name" class="font-bold text-gray-300" class:text-gray-800={!$isDarkMode}>Your name</label>
+ <input type="text" class:dark={$isDarkMode} bind:value={name} />
<div class="grid mt-4 grid-cols-3-1">
<div class="text-center">Yes</div>
<div class="text-center">Maybe</div>
@@ -171,15 +171,21 @@
{#each event.times.sort((a, b) => day.utc(a).isAfter(day.utc(b))) as t}
<div
class:bg-green-400={responses[day.utc(t).format()] === 'yes'}
- class="border border-gray-200 hover:cursor-pointer"
+ class:border-gray-400={!$isDarkMode}
+ class:border-gray-700={$isDarkMode}
+ class="border hover:cursor-pointer"
on:click={() => toggleYes(t)} />
<div
class:bg-yellow-400={responses[day.utc(t).format()] === 'maybe'}
- class="border border-gray-200 hover:cursor-pointer"
+ class:border-gray-400={!$isDarkMode}
+ class:border-gray-700={$isDarkMode}
+ class="border hover:cursor-pointer"
on:click={() => toggleMaybe(t)} />
<div
class:bg-red-400={responses[day.utc(t).format()] === 'no'}
- class="border border-gray-200 hover:cursor-pointer"
+ class:border-gray-400={!$isDarkMode}
+ class:border-gray-700={$isDarkMode}
+ class="border hover:cursor-pointer"
on:click={() => toggleNo(t)} />
<div class="ml-3">
<span class="font-bold">
diff --git a/src/pages/Index.svelte b/src/pages/Index.svelte
@@ -6,6 +6,7 @@
import isOnline from 'is-online'
import { nanoid } from 'nanoid'
import { onMount } from 'svelte'
+ import { isDarkMode } from '../stores'
import { pouch, replicateToCouch } from '../couch'
import DateTimeGrid from '../components/DateTimeGrid.svelte'
day.extend(utc)
@@ -123,17 +124,18 @@
{errorFlash}
</div>
{/if}
- <label for="name" class="font-bold text-gray-600">Your event's name</label>
+ <label for="name" class="font-bold text-gray-300" class:text-gray-600={!$isDarkMode}>Your event's name</label>
<input
id="name"
type="text"
bind:value={event.name}
+ class:dark={$isDarkMode}
placeholder="Raid with the boys" />
- <label for="duration" class="font-bold text-gray-600 inline-block mt-4">
+ <label for="duration" class="font-bold text-gray-300 inline-block mt-4" class:text-gray-600={!$isDarkMode}>
Duration of the event
</label>
- <div id="duration-mount" class="mb-5" />
- <label class="font-bold text-gray-600">Event start times</label>
+ <div id="duration-mount" class="mb-5" class:dark={$isDarkMode} />
+ <label class="font-bold text-gray-300" class:text-gray-600={!$isDarkMode}>Event start times</label>
</form>
<DateTimeGrid startDate={new Date()} bind:selected={event.times} />
<button class="btn mt-5" type="submit" on:click|preventDefault={submitForm} disabled={submitting}>
diff --git a/src/stores.js b/src/stores.js
@@ -4,6 +4,7 @@ const localStorage = window.localStorage
export const hasResponded = localStorageStore('hasResponded')
export const is24Hrs = localStorageStore('is24Hrs')
+export const isDarkMode = localStorageStore('isDarkMode')
export const isPouchAccessible = writable(true)
function localStorageStore(key) {
