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 @@ -
+

BMLT Data Converter

event.key === 'Enter' && handleExport()} placeholder="BMLT URL query..." /> - + {#if $errorMessage}

{$errorMessage}

{/if} @@ -69,8 +78,6 @@ +
- - diff --git a/src/stores/themeStore.ts b/src/stores/themeStore.ts new file mode 100644 index 0000000..e79b94a --- /dev/null +++ b/src/stores/themeStore.ts @@ -0,0 +1,11 @@ +import { writable } from 'svelte/store'; + +const storedTheme = typeof window !== 'undefined' ? window.localStorage.getItem('theme') : null; +export const theme = writable(storedTheme || 'dark'); // Default to dark if no theme is stored + +theme.subscribe((value) => { + if (typeof window !== 'undefined') { + window.localStorage.setItem('theme', value); + document.body.style.backgroundColor = value === 'light' ? '#fff' : '#333'; + } +});