diff --git a/package-lock.json b/package-lock.json
index c5b0027..121414d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,14 +1,14 @@
 {
-  "name": "svelte-app",
-  "version": "1.0.0",
+  "name": "matrix-kernel-filter-calculator",
+  "version": "0.0.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "svelte-app",
-      "version": "1.0.0",
+      "version": "0.0.1",
       "dependencies": {
-        "sirv-cli": "^2.0.0"
+        "sirv-cli": "^2.0.0",
+        "svelte-themer": "^0.5.5"
       },
       "devDependencies": {
         "@rollup/plugin-commonjs": "^17.0.0",
@@ -981,11 +981,22 @@
       "version": "3.46.3",
       "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.46.3.tgz",
       "integrity": "sha512-mTOXvv74CVQqJHqoIZDprVfRKVVmYNadXP0VKnOEA54223kLGCr1nMrifS4Zx29qMt/xRB38Eq1D7dDH/fM8fQ==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
     },
+    "node_modules/svelte-themer": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/svelte-themer/-/svelte-themer-0.5.5.tgz",
+      "integrity": "sha512-mhW1Vth6WQgFGt9UYwjM9MsalNzSFhWoi7y1X7geQ5aELmKNGKR5CA6PlbD8uvOpbaqX09+487OZ/T6hxaMFlA==",
+      "engines": {
+        "node": ">=14",
+        "pnpm": ">=3"
+      },
+      "peerDependencies": {
+        "svelte": "^3.46.3"
+      }
+    },
     "node_modules/terser": {
       "version": "5.10.0",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.10.0.tgz",
@@ -1803,8 +1814,13 @@
     "svelte": {
       "version": "3.46.3",
       "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.46.3.tgz",
-      "integrity": "sha512-mTOXvv74CVQqJHqoIZDprVfRKVVmYNadXP0VKnOEA54223kLGCr1nMrifS4Zx29qMt/xRB38Eq1D7dDH/fM8fQ==",
-      "dev": true
+      "integrity": "sha512-mTOXvv74CVQqJHqoIZDprVfRKVVmYNadXP0VKnOEA54223kLGCr1nMrifS4Zx29qMt/xRB38Eq1D7dDH/fM8fQ=="
+    },
+    "svelte-themer": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/svelte-themer/-/svelte-themer-0.5.5.tgz",
+      "integrity": "sha512-mhW1Vth6WQgFGt9UYwjM9MsalNzSFhWoi7y1X7geQ5aELmKNGKR5CA6PlbD8uvOpbaqX09+487OZ/T6hxaMFlA==",
+      "requires": {}
     },
     "terser": {
       "version": "5.10.0",
diff --git a/package.json b/package.json
index 38a0175..2baa964 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "svelte": "^3.0.0"
   },
   "dependencies": {
-    "sirv-cli": "^2.0.0"
+    "sirv-cli": "^2.0.0",
+    "svelte-themer": "^0.5.5"
   }
 }
diff --git a/public/global.css b/public/global.css
index 8a5d8ca..42bf30a 100644
--- a/public/global.css
+++ b/public/global.css
@@ -5,30 +5,12 @@ html, body {
 }
 
 body {
-	color: #333;
 	margin: 0;
 	padding: 8px;
 	box-sizing: border-box;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 }
 
-a {
-	color: rgb(0,100,200);
-	text-decoration: none;
-}
-
-a:hover {
-	text-decoration: underline;
-}
-
-a:visited {
-	color: rgb(0,80,160);
-}
-
-label {
-	display: block;
-}
-
 input, button, select, textarea {
 	font-family: inherit;
 	font-size: inherit;
@@ -36,14 +18,11 @@ input, button, select, textarea {
 	padding: 0.4em;
 	margin: 0.5em;
 	box-sizing: border-box;
-	border: 1px solid #ccc;
+	border-width: 1px;
+	border-style: solid;
 	border-radius: 2px;
 }
 
-input:disabled {
-	color: #ccc;
-}
-
 /* Chrome, Safari, Edge, Opera */
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
@@ -55,21 +34,3 @@ input::-webkit-inner-spin-button {
 input[type=number] {
   -moz-appearance: textfield;
 }
-
-button {
-	color: #333;
-	background-color: #f4f4f4;
-	outline: none;
-}
-
-button:disabled {
-	color: #999;
-}
-
-button:not(:disabled):active {
-	background-color: #ddd;
-}
-
-button:focus {
-	border-color: #666;
-}
diff --git a/src/App.svelte b/src/App.svelte
index a2f2224..5415118 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,6 +1,9 @@
 <script>
-  import MatrixSizeInput from "./MatrixSizeInput.svelte";
+  import ThemeWrapper from "./../node_modules/svelte-themer/components/ThemeWrapper.svelte";
   import Matrix from "./Matrix.svelte";
+  import MatrixSizeInput from "./MatrixSizeInput.svelte";
+  import { themes } from "./themes";
+  import ThemeToggle from "./ThemeToggle.svelte";
 
   let matrixWidth = 4;
   let matrixHeight = 4;
@@ -58,54 +61,77 @@
   }
 </script>
 
-<div class="container">
-  <header><h1>Matrix Kernel Filter Calculator</h1></header>
-  <main>
-    <h5 style="grid-area: matrix-title">Matrix</h5>
-    <h5 style="grid-area: kernel-title">Kernel</h5>
-    <h5 style="grid-area: result-title">Result</h5>
-    <div style="grid-area: matrix-size">
-      <MatrixSizeInput bind:matrixWidth bind:matrixHeight />
-    </div>
-    <div style="grid-area: kernel-size">
-      <MatrixSizeInput
-        bind:matrixWidth={kernelWidth}
-        bind:matrixHeight={kernelHeight}
-      />
-    </div>
-    <div style="grid-area: result-size">{result[0].length}x{result.length}</div>
-    <div style="grid-area: matrix"><Matrix bind:matrix /></div>
-    <div style="grid-area: kernel"><Matrix bind:matrix={kernel} /></div>
-    <div style="grid-area: result">
-      <Matrix matrix={result} readonly="true" />
-    </div>
-    <div style="grid-area: padding">
-      <label>
-        <input type="checkbox" bind:checked={addPadding} />
-        Padding
-      </label>
-      <div>
-        <input
-          type="number"
-          bind:value={padding}
-          style="width: 3em;"
-          onclick="select()"
+<ThemeWrapper {themes} key="kernel-filter-calculator__theme">
+  <div class="container">
+    <header><h1>Matrix Kernel Filter Calculator</h1></header>
+    <main>
+      <h5 style="grid-area: matrix-title">Matrix</h5>
+      <h5 style="grid-area: kernel-title">Kernel</h5>
+      <h5 style="grid-area: result-title">Result</h5>
+      <div style="grid-area: matrix-size">
+        <MatrixSizeInput bind:matrixWidth bind:matrixHeight />
+      </div>
+      <div style="grid-area: kernel-size">
+        <MatrixSizeInput
+          bind:matrixWidth={kernelWidth}
+          bind:matrixHeight={kernelHeight}
         />
       </div>
-    </div>
-  </main>
-  <footer>
-    <a
-      href="https://github.com/mschuepbach/matrix-kernel-filter-calculator"
-      target="_blank"
-      title="GitHub Repository"
-    >
-      <img src="./GitHub-Mark.svg" alt="GitHub Repository" width="32px" />
-    </a>
-  </footer>
-</div>
+      <div style="grid-area: result-size">
+        {result[0].length}x{result.length}
+      </div>
+      <div style="grid-area: matrix"><Matrix bind:matrix /></div>
+      <div style="grid-area: kernel"><Matrix bind:matrix={kernel} /></div>
+      <div style="grid-area: result">
+        <Matrix matrix={result} readonly="true" />
+      </div>
+      <div style="grid-area: padding">
+        <label>
+          <input type="checkbox" bind:checked={addPadding} />
+          Padding
+        </label>
+        <div>
+          <input
+            type="number"
+            bind:value={padding}
+            style="width: 3em;"
+            onclick="select()"
+          />
+        </div>
+      </div>
+    </main>
+    <footer>
+      <div class="left"><ThemeToggle /></div>
+      <div class="center">
+        <a
+          href="https://github.com/mschuepbach/matrix-kernel-filter-calculator"
+          target="_blank"
+          title="GitHub Repository"
+        >
+          <img src="./GitHub-Mark.svg" alt="GitHub Repository" width="32px" />
+        </a>
+      </div>
+      <div class="right" />
+    </footer>
+  </div>
+</ThemeWrapper>
 
 <style>
+  :global(html) {
+    background-color: var(--theme-colors-background, initial);
+    color: var(--theme-colors-text, initial);
+  }
+
+  :global(input) {
+    color: var(--theme-colors-text, initial);
+    border-color: var(--theme-colors-input-border, initial);
+    background-color: var(--theme-colors-input-background, initial);
+  }
+
+  :global(button) {
+    color: var(--theme-colors-text, initial);
+  }
+
   h5 {
     margin: 1em 0 0;
   }
@@ -129,7 +155,7 @@
       "matrix-size kernel-size result-size"
       "matrix kernel result"
       "padding padding padding";
-    grid-gap: .8em;
+    grid-gap: 0.8em;
     align-items: center;
   }
 
@@ -150,6 +176,13 @@
   }
 
   footer {
+    display: flex;
     margin-top: 1em;
+    text-align: left;
+  }
+
+  .left,
+  .right {
+    flex: 1;
   }
 </style>
diff --git a/src/ThemeToggle.svelte b/src/ThemeToggle.svelte
new file mode 100644
index 0000000..3705e13
--- /dev/null
+++ b/src/ThemeToggle.svelte
@@ -0,0 +1,17 @@
+<script>
+  import { getContext } from "svelte";
+  let { toggle, current } = getContext("theme");
+</script>
+
+<button on:click={toggle} title="Toggle Theme">
+  <slot>{$current}</slot>
+</button>
+
+<style>
+    button {
+        border: none;
+        background: none;
+        font-weight: 600;
+        cursor: pointer;
+    }
+</style>
\ No newline at end of file
diff --git a/src/themes.js b/src/themes.js
new file mode 100644
index 0000000..43789ca
--- /dev/null
+++ b/src/themes.js
@@ -0,0 +1,34 @@
+export const themes = {
+  light: {
+    colors: {
+      text: "#333",
+      background: {
+        _: "#fff",
+        contrast: "#b1b1b1",
+      },
+      primary: "#0060df",
+      primary_dark: "#0250bb",
+      secondary: "#b000bf",
+      input: {
+        border: "#ccc",
+        background: "#fff",
+      },
+    },
+  },
+  dark: {
+    colors: {
+      text: "#eee",
+      background: {
+        _: "#333",
+        contrast: "#0d1215",
+      },
+      primary: "#0060df",
+      primary_dark: "#0250bb",
+      secondary: "#b000bf",
+      input: {
+        border: "#999",
+        background: "#333",
+      },
+    },
+  },
+};