fixed light mode

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

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;

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>
 
 

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>
 
 

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>