Add dark theme

diff --git a/index.html b/index.html
index 72d6460fa550e61963f66ed6ae38811ba67e1137..1db4dff9b3431e385c8981f6b8a521790ce8589a 100644 (file)
--- a/index.html
+++ b/index.html
@@ -21,14 +21,28 @@
       box-sizing: border-box;
     }
 
       box-sizing: border-box;
     }
 

+    :root {
+      color-scheme: light dark;
+      --bg-color: light-dark(hsl(216deg 50% 98%), hsl(216deg 50% 20%));
+      --font-color: light-dark(hsl(216deg 50% 10%), hsl(216deg 60% 98%));
+      --border-color: light-dark(hsl(216deg 50% 80%), hsl(216deg 50% 50%));
+      --border-focus-color: light-dark(hsl(216deg 50% 70%), hsl(216deg 50% 60%));
+      --shadow-color: light-dark(hsl(216deg 50% 80%), hsl(216deg 50% 20%));
+      --surface-color: light-dark(hsl(216deg 50% 90%), hsl(216deg 75% 30%));
+    }
+
+    ::selection {      
+      background: hsl(216deg 50% 60%);
+    }
+

     body {
       min-block-size: 100dvb;
       font-family: system-ui, sans-serif;
       display: grid;
       place-items: center;
       grid-template-rows: auto 1fr auto;
     body {
       min-block-size: 100dvb;
       font-family: system-ui, sans-serif;
       display: grid;
       place-items: center;
       grid-template-rows: auto 1fr auto;

-      background: hsl(216deg 50% 98%);
-      color: hsl(216deg 50% 10%);
+      background: var(--bg-color);
+      color: var(--font-color);

     }
 
     header {
     }
 
     header {


@@ -62,14 +76,14 @@
       padding: 6px 4px;
       margin-block-end: 16px;
       border-radius: 4px;
       padding: 6px 4px;
       margin-block-end: 16px;
       border-radius: 4px;

-      border: 1px solid hsl(216deg 50% 80%);
+      border: 1px solid var(--border-color);

       transition: filter 600ms, border 600ms;
     }
 
     :is(textarea, input, .text-button, pre):focus-within,
     .text-button:hover {
       transition: filter 600ms, border 600ms;
     }
 
     :is(textarea, input, .text-button, pre):focus-within,
     .text-button:hover {

-      border: 1px solid hsl(216deg 50% 70%);
-      filter: drop-shadow(0 0 4px hsl(216deg 50% 80%));
+      border: 1px solid var(--border-focus-color);
+      filter: drop-shadow(0 0 4px var(--shadow-color));

       transition: filter 200ms, border 200ms;
     }
 
       transition: filter 200ms, border 200ms;
     }
 


@@ -93,7 +107,7 @@
 
     #ciphertext {
       overflow-x: auto;
 
     #ciphertext {
       overflow-x: auto;

-      background: hsl(216deg 50% 90%);
+      background: var(--surface-color);

       border-radius: 4px;
     }
 
       border-radius: 4px;
     }
 


@@ -104,7 +118,7 @@
     }
 
     .text-button {
     }
 
     .text-button {

-      background: hsl(216deg 50% 90%);
+      background: var(--surface-color);

     }
 
     .icon-button {
     }
 
     .icon-button {


@@ -122,7 +136,7 @@
     .copied::after {
       display: var(--display, none);
       position: absolute;
     .copied::after {
       display: var(--display, none);
       position: absolute;

-      background: hsl(216deg 50% 90%);
+      background: var(--surface-color);

       pointer-events: none;
       opacity: var(--opacity, 0);
       transition: opacity 200ms;
       pointer-events: none;
       opacity: var(--opacity, 0);
       transition: opacity 200ms;

diff --git a/template.html b/template.html
index 4656134000e5aa45acc6f15dd38f6f41fd204c28..40ddfe76cd662860c48bc758b7745267abe9dfab 100644 (file)
--- a/template.html
+++ b/template.html
@@ -7,12 +7,26 @@
   <link rel="icon" href="data:,">
   <title>Enter password</title>
   <style>
   <link rel="icon" href="data:,">
   <title>Enter password</title>
   <style>

+    :root {
+      color-scheme: light dark;
+      --bg-color: light-dark(hsl(216deg 50% 98%), hsl(216deg 50% 20%));
+      --font-color: light-dark(hsl(216deg 50% 10%), hsl(216deg 60% 98%));
+      --border-color: light-dark(hsl(216deg 50% 80%), hsl(216deg 50% 50%));
+      --border-focus-color: light-dark(hsl(216deg 50% 70%), hsl(216deg 50% 60%));
+      --shadow-color: light-dark(hsl(216deg 50% 80%), hsl(216deg 50% 20%));
+      --button-bg-color: light-dark(hsl(216deg 50% 90%), hsl(216deg 50% 20%));
+    }
+
+    ::selection {      
+      background: hsl(216deg 50% 60%);
+    }
+

     body {
       font-family: system-ui, sans-serif;
       min-block-size: 100dvb;
       margin: 0;
     body {
       font-family: system-ui, sans-serif;
       min-block-size: 100dvb;
       margin: 0;

-      background: hsl(216deg 50% 98%);
-      color: hsl(216deg 50% 10%);
+      background: var(--bg-color);
+      color: var(--font-color);

       display: grid;
       place-items: center;
     }
       display: grid;
       place-items: center;
     }


@@ -27,19 +41,19 @@
       padding-inline: 4px;
       padding-block: 8px 6px;
       border-radius: 4px;
       padding-inline: 4px;
       padding-block: 8px 6px;
       border-radius: 4px;

-      border: 1px solid hsl(216deg 50% 80%);
+      border: 1px solid var(--border-color);

       transition: filter 600ms, border 600ms;
     }
 
     :is(input, button):focus-within,
     button:hover {
       transition: filter 600ms, border 600ms;
     }
 
     :is(input, button):focus-within,
     button:hover {

-      border: 1px solid hsl(216deg 50% 70%);
-      filter: drop-shadow(0 0 4px hsl(216deg 50% 80%));
+      border: 1px solid var(--border-focus-color);
+      filter: drop-shadow(0 0 4px var(--shadow-color));

       transition: filter 200ms, border 200ms;
     }
 
     button {
       transition: filter 200ms, border 200ms;
     }
 
     button {

-      background: hsl(216deg 50% 90%);
+      background: var(--button-bg-color);

       cursor: pointer;
     }
   </style>
       cursor: pointer;
     }
   </style>