From 620ec76f3ccd548952d552ee9f1a26f2075b54b8 Mon Sep 17 00:00:00 2001 From: mschuepbach Date: Fri, 4 Feb 2022 15:28:23 +0100 Subject: [PATCH] Add dark theme --- package-lock.json | 32 ++++++++--- package.json | 3 +- public/global.css | 43 +------------- src/App.svelte | 125 ++++++++++++++++++++++++++--------------- src/ThemeToggle.svelte | 17 ++++++ src/themes.js | 34 +++++++++++ 6 files changed, 158 insertions(+), 96 deletions(-) create mode 100644 src/ThemeToggle.svelte create mode 100644 src/themes.js 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 @@ -
-

Matrix Kernel Filter Calculator

-
-
Matrix
-
Kernel
-
Result
-
- -
-
- -
-
{result[0].length}x{result.length}
-
-
-
- -
-
- -
- +
+

Matrix Kernel Filter Calculator

+
+
Matrix
+
Kernel
+
Result
+
+ +
+
+
-
-
- -
+
+ {result[0].length}x{result.length} +
+
+
+
+ +
+
+ +
+ +
+
+ + + + 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 @@ + + + + + \ 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", + }, + }, + }, +};