From c01da5bb8449ac9c1f0b1552b86a77ad3d66c6f4 Mon Sep 17 00:00:00 2001
From: pjaudiomv <34245618+pjaudiomv@users.noreply.github.com>
Date: Mon, 3 Jun 2024 15:45:31 -0400
Subject: [PATCH] dark mode (#65)
---
package-lock.json | 3 +-
package.json | 6 +-
src/app.html | 1 +
src/components/ThemeSwitcher.svelte | 47 ++++++
src/css/main.scss | 248 ++++++++++++++++++++++------
src/lib/DataConverter.svelte | 17 +-
src/stores/themeStore.ts | 11 ++
7 files changed, 272 insertions(+), 61 deletions(-)
create mode 100644 src/components/ThemeSwitcher.svelte
create mode 100644 src/stores/themeStore.ts
diff --git a/package-lock.json b/package-lock.json
index 2a65c9f..fb64fd4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,7 +25,7 @@
"js2xmlparser": "^5.0.0",
"prettier": "^3.1.1",
"prettier-plugin-svelte": "^3.1.2",
- "sass": "^1.71.0",
+ "sass": "^1.77.4",
"svelte": "^4.2.7",
"svelte-check": "^3.6.0",
"tslib": "^2.4.1",
@@ -3266,7 +3266,6 @@
"resolved": "https://registry.npmjs.org/sass/-/sass-1.77.4.tgz",
"integrity": "sha512-vcF3Ckow6g939GMA4PeU7b2K/9FALXk2KF9J87txdHzXbUF9XRQRwSxcAs/fGaTnJeBFd7UoV22j3lzMLdM0Pw==",
"dev": true,
- "license": "MIT",
"dependencies": {
"chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0",
diff --git a/package.json b/package.json
index 15d7447..b65c332 100644
--- a/package.json
+++ b/package.json
@@ -2,6 +2,7 @@
"name": "bmlt-data-converter",
"version": "0.0.1",
"private": true,
+ "type": "module",
"scripts": {
"dev": "vite dev",
"build": "vite build",
@@ -30,13 +31,12 @@
"js2xmlparser": "^5.0.0",
"prettier": "^3.1.1",
"prettier-plugin-svelte": "^3.1.2",
- "sass": "^1.71.0",
"svelte": "^4.2.7",
+ "sass": "^1.77.4",
"svelte-check": "^3.6.0",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"vite": "^5.0.3",
"xlsx": "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz"
- },
- "type": "module"
+ }
}
diff --git a/src/app.html b/src/app.html
index 77a5ff5..ce42d67 100644
--- a/src/app.html
+++ b/src/app.html
@@ -3,6 +3,7 @@
+
%sveltekit.head%
diff --git a/src/components/ThemeSwitcher.svelte b/src/components/ThemeSwitcher.svelte
new file mode 100644
index 0000000..ad38acf
--- /dev/null
+++ b/src/components/ThemeSwitcher.svelte
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+
diff --git a/src/css/main.scss b/src/css/main.scss
index 824ff68..f77c876 100644
--- a/src/css/main.scss
+++ b/src/css/main.scss
@@ -1,16 +1,3 @@
-// Variables
-$error-color: red;
-$button-bg-color: #007bff;
-$button-hover-bg-color: #0056b3;
-$border-color: #ccc;
-$border-radius: 3px;
-$font-family-default: Arial, sans-serif;
-$link-color: #007bff;
-$background-light: #f7f7f7;
-$background-dark: #e0d8d8;
-$background-white: #fff;
-$text-color-dark: #333;
-
@keyframes dots {
0%,
20% {
@@ -28,56 +15,84 @@ $text-color-dark: #333;
}
}
-.generateButtonProcessing::after {
+.light .generateButtonProcessing::after {
content: '';
+ color: #000000;
animation: dots 1.5s infinite;
}
-.generateButton::before {
+.dark .generateButtonProcessing::after {
+ content: '';
+ color: #ffffff;
+ animation: dots 1.5s infinite;
+}
+
+.light .generateButton::before {
+ color: #000000;
content: 'Generate Export Data';
}
-.download-links {
+.dark .generateButton::before {
+ color: #ffffff;
+ content: 'Generate Export Data';
+}
+
+$error-color: #ff4d4d; // Lighter red for better contrast in dark mode
+$button-bg-color: #2a2a2a;
+$button-hover-bg-color: #135ba1;
+$border-color: #555;
+$border-radius: 3px;
+$font-family-default: Arial, sans-serif;
+$background-light: #2a2a2a; // Dark background
+$background-dark: #1a1a1a; // Even darker background
+$background-white: #333333; // Darker white substitute
+$text-color-dark: #ddd; // Light text color
+
+.dark .download-links {
display: inline-block;
padding: 8px;
}
-.error,
-#errorMessages {
+.dark .error,
+.dark #errorMessages {
color: $error-color;
}
-#errorMessages,
-#description,
-h1,
-.download-links,
-.footer-link,
-#footer,
-#inner-box {
+.dark #errorMessages,
+.dark #description,
+.dark h1,
+.dark .download-links,
+.dark .footer-link,
+.dark #footer,
+.dark #inner-box {
text-align: center;
}
-#export-form,
-input[type='text'],
-button,
-#inner-box,
-#footer {
+.dark h1 {
+ color: #ffffff;
+}
+
+.dark #export-form,
+.dark input[type='text'],
+.dark button,
+.dark #inner-box,
+.dark #footer {
border-radius: $border-radius;
box-sizing: border-box;
}
-#export-form,
-#inner-box {
+.dark #export-form,
+.dark #inner-box {
border: 1px solid $border-color;
}
-#inner-box {
+.dark #inner-box {
padding: 20px;
margin-bottom: 20px;
background-color: $background-white;
}
-#export-form {
+.dark #export-form {
font-family: $font-family-default;
background-color: $background-light;
max-width: 800px;
@@ -85,18 +100,20 @@ button,
padding: 1px 20px 20px;
}
-input[type='text'],
-button {
+.dark input[type='text'],
+.dark button {
width: 100%;
padding: 10px;
margin-bottom: 10px;
}
-input[type='text'] {
+.dark input[type='text'] {
border: 1px solid $border-color;
+ background-color: #444; // Darker input background
+ color: $text-color-dark;
}
-button {
+.dark button {
background-color: $button-bg-color;
color: #fff;
border: none;
@@ -105,35 +122,164 @@ button {
height: 40px;
cursor: pointer;
transition: background-color 0.3s;
-
- &:hover {
- background-color: $button-hover-bg-color;
- }
}
-.download-links,
-.footer-link,
-a:hover {
- color: $link-color;
+.dark button:hover {
+ background-color: #333333;
}
-.download-links,
-.footer-link {
+.dark .download-links,
+.dark .footer-link,
+.dark .download-links,
+.dark .footer-link {
text-decoration: none;
+ color: #ffffff;
}
-a:hover {
+.dark a:hover {
text-decoration: underline;
}
-#footer {
+.dark #footer {
padding: 10px;
background-color: $background-dark;
border: 1px solid $background-dark;
}
-#description {
+.dark #description {
margin-top: 20px;
font-size: 1em;
color: $text-color-dark;
}
+.dark .switch .icon {
+ color: #ffffff;
+}
+
+.dark .generateButton {
+ background-color: black;
+}
+
+$error-color-light: red;
+$button-bg-color-light: #ffffff;
+$button-hover-bg-color-light: #0056b3;
+$border-color-light: #ccc;
+$border-radius-light: 3px;
+$font-family-default-light: Arial, sans-serif;
+$background-light-light: #f7f7f7;
+$background-dark-light: #f7f7f7;
+$background-white-light: #fff;
+$text-color-dark-light: #333;
+
+.light .switch .icon {
+ color: #000000;
+}
+
+.light .download-links {
+ display: inline-block;
+ padding: 8px;
+}
+
+.light .error,
+.light #errorMessages {
+ color: $error-color-light;
+}
+
+.light #errorMessages,
+.light #description,
+.light h1,
+.light .download-links,
+.light .footer-link,
+.light #footer,
+.light #inner-box {
+ text-align: center;
+}
+
+.light h1 {
+ color: #000000;
+}
+
+.light #export-form,
+.light input[type='text'],
+.light button,
+.light #inner-box,
+.light #footer {
+ border-radius: $border-radius-light;
+ box-sizing: border-box;
+}
+
+.light #export-form,
+.light #inner-box {
+ border: 1px solid $border-color-light;
+}
+
+.light #inner-box {
+ padding: 20px;
+ margin-bottom: 20px;
+ background-color: $background-white-light;
+}
+
+.light #export-form {
+ font-family: $font-family-default-light;
+ background-color: $background-light-light;
+ max-width: 800px;
+ margin: 20px auto 0;
+ padding: 1px 20px 20px;
+}
+
+.light input[type='text'],
+.light button {
+ width: 100%;
+ padding: 10px;
+ margin-bottom: 10px;
+}
+
+.light input[type='text'] {
+ border: 1px solid $border-color-light;
+}
+
+.light button {
+ background-color: $background-dark-light;
+ color: #fff;
+ border: none;
+ padding: 10px 20px;
+ margin-bottom: 15px;
+ height: 40px;
+ cursor: pointer;
+ transition: background-color 0.3s;
+}
+
+.light button:hover {
+ background-color: #ffffff;
+}
+
+.light .download-links,
+.light .footer-link,
+.light .download-links,
+.light .footer-link {
+ text-decoration: none;
+ color: #1a1a1a;
+}
+
+.light a:hover {
+ text-decoration: underline;
+}
+
+.light #footer {
+ padding: 10px;
+ background-color: #ffffff;
+ border: 1px solid $background-dark-light;
+}
+
+.light #description {
+ margin-top: 20px;
+ font-size: 1em;
+ color: $text-color-dark-light;
+}
+
+.dark body {
+ background-color: #333;
+}
+
+.light body {
+ background-color: #fff;
+}
diff --git a/src/lib/DataConverter.svelte b/src/lib/DataConverter.svelte
index f193af7..f7e0a7b 100644
--- a/src/lib/DataConverter.svelte
+++ b/src/lib/DataConverter.svelte
@@ -1,6 +1,15 @@
-