Add dark mode

index.html

@@ -121,7 +121,7 @@
 
                 <div class="control-group">
                     <label>Output Format</label>
-                    <div style="display: flex; gap: 2rem; align-items: center; border: 1px solid black; padding: 1rem; background: #fff;">
+                    <div class="format-selector">
                         <label style="margin:0; display:flex; align-items:center; cursor:pointer;">
                             <input type="radio" name="opt-fmt" value="png" checked style="width:auto; margin-right:0.5rem;">
                             PNG
@@ -133,7 +133,7 @@
                     </div>
                 </div>
             </details>
-            <button id="btn-clear" style="margin-top: 2rem; background: transparent; border: 1px solid black; color: black;">
+            <button id="btn-clear">
                 RESET
             </button>
         </section>

style.css

@@ -98,6 +98,16 @@ input, textarea, select {
     box-shadow: none;
 }
 
+/* Replaces the inline style for the radio container */
+.format-selector {
+    display: flex;
+    gap: 2rem;
+    align-items: center;
+    border: 1px solid var(--border-color);
+    padding: 1rem;
+    background: var(--bg-color); /* Uses variable now! */
+}
+
 input:focus, textarea:focus, select:focus {
     outline: 2px solid var(--text-color);
     outline-offset: -2px;
@@ -127,6 +137,19 @@ details.advanced-options {
     background: #fdfdfd; /* Slight contrast from white */
 }
 
+#btn-clear {
+    margin-top: 2rem;
+    background-color: transparent;
+    color: var(--text-color);
+    /* A slightly thicker border makes it feel "bolder" as requested */
+    border: 2px solid var(--text-color);
+}
+
+#btn-clear:hover:not(:disabled) {
+    background-color: var(--text-color);
+    color: var(--bg-color);
+}
+
 summary {
     cursor: pointer;
     padding: 1rem;
@@ -455,7 +478,7 @@ input[type="radio"]:focus {
     text-transform: uppercase;
     font-size: 0.9rem;
     line-height: 1.4;
-    
+
     /* Brutalist Box inside the Box */
     border: 2px solid red;
     padding: 1rem;
@@ -468,3 +491,130 @@ input[type="radio"]:focus {
     /* Existing styles... */
     position: relative; /* Just in case */
 }
+
+/* --- DARK MODE SUPPORT --- */
+
+/* --- DARK MODE SUPPORT (High Contrast / Brutalist) --- */
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        /* PURE BLACK & WHITE - No "middling greys" */
+        --bg-color: #000000;
+        --text-color: #ffffff;
+        --border-color: #ffffff;
+        --pane-bg: #000000;
+    }
+
+    /* 1. TEXTURE: Sharper Dots */
+    .preview-pane {
+        background-color: #000000;
+        /* White dots on black, high contrast */
+        background-image: radial-gradient(#666 0.5px, transparent 0.5px);
+    }
+
+    /* 2. INPUTS: Remove grey fills, use stark borders */
+    input, textarea, select {
+        background-color: transparent;
+        border-color: #fff;
+        color: #fff;
+    }
+
+    input:focus, textarea:focus, select:focus {
+        /* Invert on focus: White Block, Black Text */
+        background-color: #ffffff;
+        color: #000000;
+        outline: none;
+    }
+
+    /* Input Wrappers (Color pickers etc) */
+    .input-wrapper, .format-selector {
+        background: #000000;
+        border-color: #ffffff;
+    }
+
+    /* 3. DETAILS / SUMMARY (Advanced Config) */
+    details.advanced-options {
+        background: #000000;
+        border-color: #ffffff;
+    }
+    summary {
+        background-color: #000000;
+        color: #ffffff;
+        border-bottom: 1px solid #ffffff;
+    }
+    details[open] summary {
+        /* Invert header: White Block, Black Text */
+        background-color: #ffffff;
+        color: #000000;
+        border-bottom: 1px solid #ffffff;
+    }
+
+    /* 4. STICKY WRAPPER: Toned down shadow */
+    .sticky-wrapper {
+        background: #000000;
+        border: 1px solid #ffffff;
+
+        box-shadow: 10px 10px 0px 0px #aaa;
+    }
+
+    /* 5. QR CONTAINER: Dark to match the theme */
+    #qr-container {
+        /* Now transparent/black so it doesn't look like a "flashlight" */
+        background-color: #000000;
+        border: 1px solid #ffffff;
+    }
+
+    /* Ensure the generated images (which might be white squares) are centered and clean */
+    #qr-container img,
+    #qr-container canvas,
+    #qr-container svg {
+        /* Optional: Add a thin border to the actual code so a White QR
+           doesn't bleed into the White Page Border if sizing matches */
+        border: 1px solid #333;
+    }
+
+    /* 6. ERROR MESSAGE: Keep it popping */
+    .qr-error-msg {
+        background-color: #000000; /* Black box */
+        color: #ff0000;           /* Red Text */
+        border: 2px solid #ff0000; /* Red Border */
+    }
+
+    /* 6. ICONS & SVGS */
+    /* Invert Select Arrow to White */
+    select {
+        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="white"><path d="M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z"/></svg>');
+    }
+
+    /* 7. BUTTONS */
+
+    /* Primary Action: White Block, Black Text */
+    button {
+        background-color: #ffffff;
+        color: #000000;
+        border-color: #ffffff;
+    }
+    button:hover:not(:disabled) {
+        /* Hover: Invert to Black Block, White Text */
+        background-color: #000000;
+        color: #ffffff;
+        border-color: #ffffff;
+    }
+    button:disabled {
+        background-color: #333;
+        color: #000;
+        border-color: #333;
+    }
+
+    /* Reset Button: Transparent with White Border */
+    #btn-clear {
+        background-color: transparent;
+        color: #ffffff;
+        border-color: #ffffff;
+    }
+    #btn-clear:hover:not(:disabled) {
+        /* Hover: White Block, Black Text */
+        background-color: #ffffff;
+        color: #000000;
+    }
+}