diff --git a/resources/static/script.js b/resources/static/script.js
index 339112d..82c58f9 100644
--- a/resources/static/script.js
+++ b/resources/static/script.js
@@ -129,10 +129,10 @@ const copyShortUrl = async (link) => {
     const site = await getSiteUrl();
     try {
         navigator.clipboard.writeText(`${site}/${link}`);
-        showAlert(`Short URL ${link} was copied to clipboard!`, "green");
+        showAlert(`Short URL ${link} was copied to clipboard!`, "light-dark(green, #72ff72)");
     } catch (e) {
         console.log(e);
-        showAlert(`Could not copy short URL to clipboard, please do it manually: <a href=${site}/${link}>${site}/${link}</a>`, "red");
+        showAlert(`Could not copy short URL to clipboard, please do it manually: <a href=${site}/${link}>${site}/${link}</a>`, "light-dark(red, #ff1a1a)");
     }
 
 }
@@ -213,7 +213,7 @@ const submitForm = () => {
         })
         .then(text => {
             if (!ok) {
-                showAlert(text, "red");
+                showAlert(text, "light-dark(red, #ff1a1a)");
             }
             else {
                 copyShortUrl(text);
@@ -238,7 +238,7 @@ const submitLogin = () => {
         } else {
             const wrongPassBox = document.getElementById("wrong-pass");
             wrongPassBox.innerHTML = "Wrong password!";
-            wrongPassBox.style.color = "red";
+            wrongPassBox.style.color = "light-dark(red, #ff1a1a)";
             password.focus();
         }
     })
diff --git a/resources/static/styles.css b/resources/static/styles.css
index c243e99..896e571 100644
--- a/resources/static/styles.css
+++ b/resources/static/styles.css
@@ -6,6 +6,33 @@
     src: url('/assets/Montserrat-VF.woff2');
 }
 
+:root {
+    color-scheme: light dark;
+}
+
+body {
+    color: light-dark(black, #e8e6e3);
+    background-color: light-dark(white, #181a1b);
+}
+
+.pure-button {
+    background-color: light-dark(#0078e7, #0060b9);
+}
+
+input {
+    border-color: light-dark(#cccccc, #3e4446) !important;
+    box-shadow: light-dark(#dddddd, #2b2f31) 0px 1px 3px inset !important;
+}
+
+::placeholder {
+    color: light-dark(#757575, #636061);
+}
+
+legend {
+    color: light-dark(#333333, #c8c3bc) !important;
+    border-bottom-color: light-dark(#e5e5e5 ,#373c3e) !important;
+}
+
 * {
     font-family: Montserrat;
 }
@@ -23,6 +50,19 @@ table tr td div {
     overflow: auto;
 }
 
+.pure-table {
+    border-color: light-dark(black, #867d6e);
+}
+
+.pure-table caption {
+    color: light-dark(black, #e8e6e3);
+}
+
+.pure-table thead {
+    color: light-dark(black, #e8e6e3);
+    background-color: light-dark(#e0e0e0, #2a2d2f);
+}
+
 .pure-table td {
     border-left: none;
 }