From cf9bb7b4bf34a34fc685c6bcb86e1b5b42ef788d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johannes=20B=C3=BClow?= <johannes@jmbfountain.de>
Date: Thu, 12 Jan 2023 17:26:40 +0100
Subject: [PATCH] fixed light mode

---
 Makefile                      |  3 ++-
 src/app.css                   |  3 ++-
 src/lib/DecryptButton.svelte  | 16 ++++++++++++++++
 src/lib/EncryptButton.svelte  | 16 ++++++++++++++++
 src/lib/PasswordButton.svelte | 25 +++++++++++++++++++++++++
 5 files changed, 61 insertions(+), 2 deletions(-)

diff --git a/Makefile b/Makefile
index 403217e..306e740 100644
--- a/Makefile
+++ b/Makefile
@@ -3,6 +3,8 @@ ROOTDIR = $(dir $(CURDIR))
 HEAD=$(shell git rev-parse --short HEAD)
 
 
+all: build docker
+
 dev:
 	$(JSPKGMAN) run vite dev 
 
@@ -23,7 +25,6 @@ docker:
 	podman push docker.io/jmbitci/crypttool
 	podman push docker.io/jmbitci/crypttool:$(HEAD)
 
-all: build docker
 
 
 #TODO get rid of -f and check whether files exist instead
diff --git a/src/app.css b/src/app.css
index ee7a390..5f46ccd 100644
--- a/src/app.css
+++ b/src/app.css
@@ -4,7 +4,7 @@
   line-height: 24px;
   font-weight: 400;
 
-  color-scheme: light dark;
+  color-scheme: dark, light;
   color: rgba(255, 255, 255, 0.87);
   background-color: #242424;
 
@@ -57,6 +57,7 @@ div.container {
 
 button {
   border-radius: 8px;
+  color: rgba(255, 255, 255, 0.87);
   border: 1px solid transparent;
   padding: 0.6em 1.2em;
   font-size: 1em;
diff --git a/src/lib/DecryptButton.svelte b/src/lib/DecryptButton.svelte
index a5816dd..b96e5cb 100644
--- a/src/lib/DecryptButton.svelte
+++ b/src/lib/DecryptButton.svelte
@@ -83,6 +83,22 @@
     width: 10em;
     margin: auto;
   }
+  @media (prefers-color-scheme: light) {
+
+    .upload-button {
+      background-color: #f9f9f9;
+      border: #424242;
+      border-width: 3px;
+      border-style: solid;
+    }
+    button {
+      border: #424242;
+      border-width: 1px;
+      border-style: solid;
+      color: #1a1a1a;
+    }
+  }
+
 </style>
 
 
diff --git a/src/lib/EncryptButton.svelte b/src/lib/EncryptButton.svelte
index d61f037..341fce4 100644
--- a/src/lib/EncryptButton.svelte
+++ b/src/lib/EncryptButton.svelte
@@ -63,6 +63,22 @@
     margin: auto;
     margin-right: 1em;
   }
+
+  @media (prefers-color-scheme: light) {
+
+    .upload-button {
+      background-color: #f9f9f9;
+      border: #424242;
+      border-width: 3px;
+      border-style: solid;
+    }
+    button {
+      border: #424242;
+      color: #1a1a1a;
+      border-width: 1px;
+      border-style: solid;
+    }
+  }
 </style>
 
 
diff --git a/src/lib/PasswordButton.svelte b/src/lib/PasswordButton.svelte
index bcae323..684a7db 100644
--- a/src/lib/PasswordButton.svelte
+++ b/src/lib/PasswordButton.svelte
@@ -45,8 +45,33 @@ function updatePassword(e: Event) {
     font-weight: 500;
     font-family: inherit;
     background-color: #1a1a1a;
+    color: rgba(255, 255, 255, 0.87);
     transition: border-color 0.25s;
   }
+
+  @media (prefers-color-scheme: light) {
+
+    .password-field {
+      background-color: #f9f9f9;
+      border: #424242;
+      border-width: 3px;
+      border-style: solid;
+    }
+    button {
+      border: #424242;
+      color: #1a1a1a;
+      border-width: 1px;
+      border-style: solid;
+    }
+    input {
+      background-color: #f9f9f9;
+      border:#424242;
+      color: #1a1a1a;
+      border-width: 1px;
+      border-style: solid;
+    }
+  }
+
 </style>
 
 <div class=password-field>