themetoggle; layout changes; style tweaks;

src/lib/components/ThemeToggle.svelte

@@ -0,0 +1,66 @@
+<script>
+    import { onMount } from 'svelte';
+  
+    let theme;
+  
+    function determineTheme() {
+      const hour = new Date().getHours();
+      return (hour >= 8 && hour <= 21) ? 'light' : 'dark';
+    }
+  
+    function setTheme(theme) {
+      document.documentElement.style.setProperty('color-scheme', theme);
+      document.documentElement.setAttribute('data-theme', theme);
+    }
+  
+    function toggleTheme() {
+      theme = theme === 'light' ? 'dark' : 'light';
+      setTheme(theme);
+    }
+  
+    onMount(() => {
+      theme = determineTheme();
+      setTheme(theme);
+    });
+  </script>
+
+  <style>
+    .theme-toggle {
+      cursor: pointer;
+      border: none;
+      padding: 0;
+      margin: 0;
+      align-items: center;
+      height: auto;
+      display: flex;
+      border-radius: 999px;
+      aspect-ratio: 1;
+      align-items: center;
+      justify-content: center;
+    }
+    .theme-toggle:hover, .theme-toggle:active, .theme-toggle:focus {
+      background: none;
+      --c-toggle: var(--c-primary);
+    }
+  </style>
+  
+  <button class="theme-toggle" on:click={toggleTheme}>
+    {#if theme === 'light'}
+      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-moon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--c-toggle)" fill="none" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M12 1.992a10 10 0 1 0 9.236 13.838c.341 -.82 -.476 -1.644 -1.298 -1.31a6.5 6.5 0 0 1 -6.864 -10.787l.077 -.08c.551 -.63 .113 -1.653 -.758 -1.653h-.266l-.068 -.006l-.06 -.002z" stroke-width="0" fill="var(--c-toggle)" />
+      </svg>
+    {:else}
+      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-sun-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--c-toggle)" fill="none" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M12 19a1 1 0 0 1 .993 .883l.007 .117v1a1 1 0 0 1 -1.993 .117l-.007 -.117v-1a1 1 0 0 1 1 -1z" stroke-width="0" fill="var(--c-toggle)" />
+        <path d="M18.313 16.91l.094 .083l.7 .7a1 1 0 0 1 -1.32 1.497l-.094 -.083l-.7 -.7a1 1 0 0 1 1.218 -1.567l.102 .07z" stroke-width="0" fill="var(--c-toggle)" />
+        <path d="M7.007 16.993a1 1 0 0 1 .083 1.32l-.083 .094l-.7 .7a1 1 0 0 1 -1.497 -1.32l.083 -.094l.7 -.7a1 1 0 0 1 1.414 0z" stroke-width="0" fill="var(--c-toggle)" />
+        <path d="M4 11a1 1 0 0 1 .117 1.993l-.117 .007h-1a1 1 0 0 1 -.117 -1.993l.117 -.007h1z" stroke-width="0" fill="var(--c-toggle)" />
+        <path d="M21 11a1 1 0 0 1 .117 1.993l-.117 .007h-1a1 1 0 0 1 -.117 -1.993l.117 -.007h1z" stroke-width="0" fill="var(--c-toggle)" />
+        <path d="M6.213 4.81l.094 .083l.7 .7a1 1 0 0 1 -1.32 1.497l-.094 -.083l-.7 -.7a1 1 0 0 1 1.217 -1.567l.102 .07z" stroke-width="0" fill="var(--c-toggle)" />
+        <path d="M19.107 4.893a1 1 0 0 1 .083 1.32l-.083 .094l-.7 .7a1 1 0 0 1 -1.497 -1.32l.083 -.094l.7 -.7a1 1 0 0 1 1.414 0z" stroke-width="0" fill="var(--c-toggle)" />
+        <path d="M12 2a1 1 0 0 1 .993 .883l.007 .117v1a1 1 0 0 1 -1.993 .117l-.007 -.117v-1a1 1 0 0 1 1 -1z" stroke-width="0" fill="var(--c-toggle)" />
+        <path d="M12 7a5 5 0 1 1 -4.995 5.217l-.005 -.217l.005 -.217a5 5 0 0 1 4.995 -4.783z" stroke-width="0" fill="var(--c-toggle)" />
+      </svg>
+    {/if}
+  </button>
+  

src/routes/+layout.svelte

@@ -10,6 +10,7 @@
     import 'normalize.css/normalize.css';
     import 'milligram/dist/milligram.min.css';
     import '../styles/app.css';
+    import ThemeToggle from '$lib/components/ThemeToggle.svelte';
 </script>
 
 
@@ -32,6 +33,7 @@
                     {/if}
                 </a>
             </li>
+            <li><ThemeToggle /></li>
             
         </ul>
     </nav>

src/routes/+page.svelte

@@ -63,15 +63,13 @@
 
         <section>
             <h2>Today</h2>
-            <div class="container">
+            <div class="today__list">
-                <div class="row">
+                    <ul>
-                    <ul class="column">
                         {#each actions as action}
                         <li><span class="badge badge--{action.type}">{action.type}</span> at {new Date(action.timestamp).toLocaleTimeString('en-NL', { hour: '2-digit', minute: '2-digit' })}</li>
                         {/each}
                     </ul>
                     <Counters {actions} />
-                </div>
             </div>
         </section>
 {/if}

src/routes/calendar/+page.svelte

@@ -73,7 +73,7 @@ import { onMount } from 'svelte';
     .day-header, .hour-label {
       font-weight: bold;
       font-size: 1.2rem;
-      background: #e9e9e9;
+      background: var(--c-border);
     }
     .day-header {
       border-radius: 1em 1em 0 0;
@@ -86,17 +86,17 @@ import { onMount } from 'svelte';
       margin-left: .5rem;
     }
     .hour {
-      border: 1px solid #e9e9e9;
+      border: 1px solid var(--c-border);
       min-height: 60px;
     }
     .event {
       background-color: var(--color);
       border-radius: 4px;
-      padding: .5em 1em;
+      padding: 0.3em 0.8em;
       line-height: 1;
       margin: 2px;
       display: flex;
-      align-items: baseline;
+      align-items: center;
       justify-content: space-between;
       color: rgba(255,255,255,.5);
     }
@@ -107,7 +107,13 @@ import { onMount } from 'svelte';
       text-transform: uppercase;
       letter-spacing: .2em;
     }
-    
+
+    .event__time {
+      line-height: 1;
+      font-size: 1.2rem;
+      font-weight: 300;
+      color: rgba(255,255,255,.75);
+    }
   </style>
   
   <div class="calendar-wrapper">
@@ -127,7 +133,7 @@ import { onMount } from 'svelte';
           <div class="hour">
             {#each actions as action}
               {#if getDayOfWeek(action.timestamp) === dayIndex && getHourOfDay(action.timestamp) === hour}
-                <div class="event event--{action.type}"><span class="event__title">{action.type}</span><span>{formatTime(action.timestamp)}</span></div>
+                <div class="event event--{action.type}"><span class="event__title">{action.type}</span><span class="event__time">{formatTime(action.timestamp)}</span></div>
               {/if}
             {/each}
           </div>

src/styles/app.css

@@ -2,9 +2,37 @@
 	--c-primary: darkorange; /* Replace #yourColor with your desired color */
 }
 
-body {
+/* https://coolors.co/palette/5f0f40-9a031e-fb8b24-e36414-0f4c5c */
-	background-color: #f2f0ef;
+
+[class*='--food'] {
+	--color: #136f63;
 }
+[class*='--poop'] {
+	--color: #78290f;
+}
+[class*='--asleep'] {
+	--color: #032b43;
+}
+[class*='--awake'] {
+	--color: #ffba08;
+}
+[class*='--diaper'] {
+	--color: #3f88c5;
+}
+/* d00000 ff7d00 */
+
+html[data-theme='light'] body {
+  background-color: #f2f0ef;
+  --c-border: #e9e9e9;
+  --c-toggle: #00464b;
+}
+
+html[data-theme='dark'] body {
+    background-color: #181818;
+    --c-border: #2b2b2b;
+    --c-toggle: #ffe600;
+  }
+
 
 a,
 input[type='text']:focus,
@@ -19,6 +47,15 @@ button,
 input[type='submit'] {
 	background-color: var(--color);
 	border-color: var(--color);
+  transition: all .2s ease-in-out;
+}
+
+a {
+  transition: all .2s ease-in-out;
+}
+
+svg path {
+  transition: all .2s ease-in-out;
 }
 
 nav ul {
@@ -31,6 +68,12 @@ nav ul {
 
 nav ul li {
 	font-size: 2rem;
+  display: flex;
+  list-style: none;
+}
+
+.today__list ul {
+  list-style: none;
 }
 
 header {
@@ -61,27 +104,9 @@ aside button {
 
 section {
 	margin-top: 4rem;
+  position: relative;
 }
 
-/* https://coolors.co/palette/5f0f40-9a031e-fb8b24-e36414-0f4c5c */
-
-[class*='--food'] {
-	--color: #136f63;
-}
-[class*='--poop'] {
-	--color: #78290f;
-}
-[class*='--asleep'] {
-	--color: #032b43;
-}
-[class*='--awake'] {
-	--color: #ffba08;
-}
-[class*='--diaper'] {
-	--color: #3f88c5;
-}
-/* d00000 ff7d00 */
-
 .badge {
   background-color: var(--color);
   display: inline-block;
@@ -96,12 +121,24 @@ section {
   text-align: center;
 }
 
+
+
 .counters {
-	position: fixed;
+  position: absolute;
-	right: 0;
+  top: 0;
+  right: 0;
 	width: max-content;
-	outline: 1px solid #ccc;
+	outline: 1px solid var(--c-border);
-	background-color: #eee;
+	background-color: var(--c-border);
 	padding: 2rem;
-	border-radius: 2rem 0 0 2rem;
+	border-radius: 2rem;
+  font-size: 2.5rem;
+}
+
+@media screen and (max-width: 600px) {
+  .counters {
+    margin-right: -2rem;
+    border-radius: 2rem 0 0 2rem;
+  }
+  
 }