Fix colors in light mode

src/script/components/header.ts

@@ -51,10 +51,6 @@ export class AppHeader extends LitElement {
       }
 
       @media(prefers-color-scheme: light) {
-        header {
-          color: black;
-        }
-
         nav fluent-anchor::part(control) {
           color: initial;
         }

src/script/components/icons/icon-navigation.ts

@@ -8,13 +8,13 @@ export class NavigationIcon extends LitElement {
     return css`
             svg {
                 display: block;
-                color: var(--foreground-color);
+                color: white;
             }
         `;
   }
   render() {
     return html`
-            <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 4.5c0-.28.22-.5.5-.5h15a.5.5 0 010 1h-15a.5.5 0 01-.5-.5zm0 5c0-.28.22-.5.5-.5h15a.5.5 0 010 1h-15a.5.5 0 01-.5-.5zm.5 4.5a.5.5 0 000 1h15a.5.5 0 000-1h-15z"/></svg>
+            <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M2 4.5c0-.28.22-.5.5-.5h15a.5.5 0 010 1h-15a.5.5 0 01-.5-.5zm0 5c0-.28.22-.5.5-.5h15a.5.5 0 010 1h-15a.5.5 0 01-.5-.5zm.5 4.5a.5.5 0 000 1h15a.5.5 0 000-1h-15z"/></svg>
         `;
   }
-}
+}

src/script/pages/app-home.ts

@@ -24,6 +24,14 @@ export class AppHome extends LitElement {
         flex-grow: 1;
       }
 
+      .timer-wrapper {
+        padding: 10px;
+        box-sizing: border-box;
+        height: 100%;
+        border-radius: 1em;
+        background-color: var(--timer-background-default);
+      }
+
       p {
         margin: 0;
         text-align: center;
@@ -76,6 +84,7 @@ export class AppHome extends LitElement {
       `;
     } else {
       body = html`
+      <div class="timer-wrapper">
         <p>
           Create a timer to begin<br />
           <fluent-button
@@ -84,6 +93,7 @@ export class AppHome extends LitElement {
             New Timer
           </fluent-button>
         </p>
+       </div>
       `;
     }