From e7d1efc505dea88ae13f6a8574886d714ba4d79f Mon Sep 17 00:00:00 2001
From: Wesley <Ma-ve@users.noreply.github.com>
Date: Thu, 1 May 2025 00:08:32 +0200
Subject: [PATCH] feat: support auto theme mode (#212)

Co-authored-by: Mave <11227996+Ma-ve@users.noreply.github.com>
Co-authored-by: Knut Ahlers <knut@ahlers.me>
---
 README.md                 |  6 +++-
 frontend/index.html       | 12 +++++++-
 i18n.yaml                 |  3 ++
 src/components/navbar.vue | 59 ++++++++++++++++++++++++++++++---------
 src/langs/langs.js        |  8 +++---
 src/main.js               | 12 +++++---
 6 files changed, 77 insertions(+), 23 deletions(-)

diff --git a/README.md b/README.md
index cf90438..a5dcd58 100644
--- a/README.md
+++ b/README.md
@@ -99,7 +99,11 @@ Requirements:
 - Node v22+
 - Tilt v0.33+
 
-Just run `tilt up` and visit `http://localhost:15641/` for the development server.
+Run `tilt up`, and see `http://localhost:10350/` for the Tilt dashboard.
+
+Front-end application is available at `http://localhost:15641/`.
+
+Run `make download_libs` to propagate all required/compiled CSS and fonts.
 
 ## Localize to your own language
 
diff --git a/frontend/index.html b/frontend/index.html
index 8e9e77a..be4e727 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -31,7 +31,17 @@
     <title>{{ .Customize.AppTitle }}</title>
 
     <script nonce="{{ .InlineContentNonce }}">
-      window.getTheme = () => localStorage.getItem('set-color-scheme') || (window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark')
+      window.getThemeFromStorage = () => localStorage.getItem('set-color-scheme') || 'auto'
+
+      window.getTheme = () => {
+        const colorScheme = window.getThemeFromStorage()
+
+        if (!colorScheme || colorScheme === 'auto') {
+          return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'
+        }
+
+        return colorScheme
+      }
 
       window.refreshTheme = () => {
         document.querySelector('html').setAttribute('data-bs-theme', window.getTheme())
diff --git a/i18n.yaml b/i18n.yaml
index be48a29..de40252 100644
--- a/i18n.yaml
+++ b/i18n.yaml
@@ -13,6 +13,7 @@ reference:
     btn-reveal-secret: Show me the secret!
     btn-reveal-secret-processing: Secret is being decrypted…
     btn-show-explanation: How does this work?
+    btn-theme-switcher-auto: Auto
     expire-default: Default Expiry
     expire-n-days: '{n} day | {n} days'
     expire-n-hours: '{n} hour | {n} hours'
@@ -107,6 +108,7 @@ translations:
       btn-reveal-secret: Zeig mir das Secret!
       btn-reveal-secret-processing: Secret wird entschlüsselt…
       btn-show-explanation: Wie funktioniert das?
+      btn-theme-switcher-auto: Auto
       expire-default: Server-Standard
       expire-n-days: '{n} Tag | {n} Tage'
       expire-n-hours: '{n} Stunde | {n} Stunden'
@@ -343,6 +345,7 @@ translations:
       btn-reveal-secret: Toon mij het geheim!
       btn-reveal-secret-processing: Geheim wordt ontsleuteld...
       btn-show-explanation: Hoe werkt dit?
+      btn-theme-switcher-auto: Auto
       expire-default: Standaard vervaltermijn
       expire-n-days: '{n} dag | {n} dagen'
       expire-n-hours: '{n} uur | {n} uur'
diff --git a/src/components/navbar.vue b/src/components/navbar.vue
index afe868a..ca6087a 100644
--- a/src/components/navbar.vue
+++ b/src/components/navbar.vue
@@ -56,19 +56,52 @@
         </ul>
         <form
           v-if="!$root.customize.disableThemeSwitcher"
-          class="d-flex align-items-center"
+          class="d-flex align-items-center btn-group"
         >
-          <i class="fas fa-sun me-2" />
-          <div class="form-check form-switch">
-            <input
-              id="themeswitch"
-              v-model="$root.darkTheme"
-              class="form-check-input"
-              type="checkbox"
-              role="switch"
-            >
-          </div>
-          <i class="fas fa-moon" />
+          <input
+            id="theme-light"
+            v-model="$root.theme"
+            type="radio"
+            name="theme"
+            class="btn-check"
+            value="light"
+          >
+          <label
+            class="btn btn-outline-secondary btn-sm"
+            for="theme-light"
+          >
+            <i class="fas fa-sun" />
+          </label>
+
+          <input
+            id="theme-auto"
+            v-model="$root.theme"
+            type="radio"
+            name="theme"
+            class="btn-check"
+            value="auto"
+          >
+          <label
+            class="btn btn-outline-secondary btn-sm"
+            for="theme-auto"
+          >
+            {{ $t('btn-theme-switcher-auto') }}
+          </label>
+
+          <input
+            id="theme-dark"
+            v-model="$root.theme"
+            type="radio"
+            name="theme"
+            class="btn-check"
+            value="dark"
+          >
+          <label
+            class="btn btn-outline-secondary btn-sm"
+            for="theme-dark"
+          >
+            <i class="fas fa-moon" />
+          </label>
         </form>
       </div>
     </div>
@@ -84,7 +117,7 @@ export default {
       // Use specified icon or fall back to light-mode appIcon (which might be null)
       const darkIcon = this.$root.customize.appIconDark || appIcon
 
-      return this.$root.darkTheme ? darkIcon : appIcon
+      return this.$root.theme === 'dark' ? darkIcon : appIcon
     },
   },
 
diff --git a/src/langs/langs.js b/src/langs/langs.js
index 44ca2ac..d888181 100644
--- a/src/langs/langs.js
+++ b/src/langs/langs.js
@@ -6,11 +6,11 @@ export default {
   'ca': JSON.parse('{"alert-secret-not-found":"Aquest no és el secret que busques\u0026hellip; - Si esperaves que el secret estiguera ací, és possible que s\'haja vist compromés, ja que una altra persona podria haver obert l\'enllaç en comptes de tu.","alert-something-went-wrong":"Alguna cosa ha eixit malament. Ens sap molt greu\u0026hellip;","btn-create-secret":"Crea el secret!","btn-create-secret-processing":"El secret s\'està creant...","btn-new-secret":"Nou secret","btn-reveal-secret":"Mostra\'m el secret!","btn-reveal-secret-processing":"El secret s\'està desxifrant...","btn-show-explanation":"Com funciona?","expire-default":"Caducitat predeterminada","expire-n-days":"{n} dia | {n} dies","expire-n-hours":"{n} hora | {n} hores","expire-n-minutes":"{n} minut | {n} minuts","expire-n-seconds":"{n} segon | {n} segons","items-explanation":["Introduïx un secret en el formulari que hi ha en aquesta pàgina","El teu navegador xifra el secret utilitzant una contrasenya generada","Únicament s\'envia al servidor el secret xifrat (mai s\'envien ni el secret sense xifrar ni la contrasenya!)","El servidor emmagatzema el secret xifrat durant un temps limitat","Envia al destinatari l\'enllaç mostrat, que conté l\'identificador del secret i la contrasenya de desxifrat","El destinatari pot veure el secret una sola vegada: si no pot, el secret podria haver sigut vist per una altra persona!","Quan s\'ha obtingut per primera i única vegada el secret xifrat, s\'elimina del servidor"],"label-expiry":"Caduca en:","label-secret-data":"Informació secreta:","label-secret-files":"Adjuntar arxius:","text-attached-files":"El remitent ha adjuntat arxius al secret. Assegura\'t que confies en aquesta persona, ja que els arxius no han sigut revisats.","text-burn-hint":"Per favor, recorda no accedir a aquest enllaç tu mateix, ja que això destruiria el secret. Només has de passar-li\'l a una altra persona!","text-burn-time":"Si no es mostra abans, aquest secret s\'eliminarà automàticament:","text-hint-burned":"\u003cstrong\u003eAtenció:\u003c/strong\u003e Només veuràs això una vegada. Quan recarregues la pàgina, el secret desapareixerà, així que copia\'l ja\u0026hellip;","text-max-filesize":"Mida màxima: {maxSize}","text-max-filesize-exceeded":"Els arxius seleccionats són massa grans per adjuntar-los: {curSize} / {maxSize}","text-powered-by":"Funciona amb","text-pre-reveal-hint":"Per a mostrar el secret prem aquest botó, però tingues en compte que en fer-ho es destruirà. Només pots veure\'l una vegada!","text-pre-url":"El teu secret ha sigut creat i emmagatzemat en el següent enllaç:","text-secret-create-disabled":"La creació de nous secrets està desactivada en aquesta instància.","title-explanation":"Així és com funciona\u0026hellip;","title-new-secret":"Crea un nou secret","title-reading-secret":"Obtenint el teu secret\u0026hellip;","title-secret-create-disabled":"S\'ha desactivat la creació de secrets...","title-secret-created":"Secret creat!"}'),
 
   'de': switchFormal(
-    JSON.parse('{"alert-insecure-environment":"Sie besuchen diese Instanz über eine unsichere Verbindung. Sie können deswegen keine Secrets erstellen oder lesen.","alert-secret-not-found":"Dieses Secret existiert nicht. - Falls Sie diesen Link noch nicht selbst geöffnet haben, könnte der Inhalt kompromittiert sein, da jemand anderes den Link geöffnet haben könnte.","alert-something-went-wrong":"Irgendwas ging schief. Entschuldigung\u0026hellip;","btn-create-secret":"Secret erstellen!","btn-create-secret-processing":"Secret wird erstellt…","btn-new-secret":"Neues Secret","btn-reveal-secret":"Secret anzeigen","btn-reveal-secret-processing":"Secret wird entschlüsselt…","btn-show-explanation":"Wie funktioniert das?","expire-default":"Server-Standard","expire-n-days":"{n} Tag | {n} Tage","expire-n-hours":"{n} Stunde | {n} Stunden","expire-n-minutes":"{n} Minute | {n} Minuten","expire-n-seconds":"{n} Sekunde | {n} Sekunden","items-explanation":["Sie geben ein Secret auf dieser Seite ein","Ihr Browser verschlüsselt das Secret mit einem generierten Passwort","Nur das verschlüsselte Secret wird an den Server geschickt (das Passwort oder das Secret im Klartext werden niemals übertragen!)","Der Server speichert das verschlüsselte Secret für eine Weile","Sie geben die angezeigte URL, welche die ID und das Passwort des Secrets enthält, an den Empfänger","Der Empfänger kann das Secret einmalig abrufen: Funktioniert das nicht, könnte jemand anderes es abgerufen haben!","Wenn das verschlüsselte Secret das erste Mal abgerufen wurde, wird es automatisch vom Server gelöscht"],"label-expiry":"Ablauf in:","label-secret-data":"Inhalt des Secrets:","label-secret-files":"Dateien Anhängen:","text-attached-files":"Der Absender hat Dateien an das Secret angehängt. Stellen Sie sicher, dass Sie dem Absender vertrauen, da die Dateien nicht geprüft wurden!","text-burn-hint":"Bitte rufen Sie die URL nicht selbst auf, da das Secret dadurch zerstört würde.","text-burn-time":"Wenn es vorher nicht eingesehen wurde, wird dieses Secret automatisch gelöscht:","text-hint-burned":"\u003cstrong\u003eAchtung:\u003c/strong\u003e Sie können das Secret nur einmal ansehen! Sobald Sie die Seite neu laden, kann das Secret nicht erneut abgerufen werden, also besser direkt kopieren und sicher abspeichern\u0026hellip;","text-invalid-files-selected":"Mindestens eine der ausgewählten Dateien ist nicht als Anhang erlaubt.","text-max-filesize":"Maximale Größe: {maxSize}","text-max-filesize-exceeded":"Die ausgewählten Dateien übersteigen die maximale Größe: {curSize} / {maxSize}","text-powered-by":"Läuft mit","text-pre-reveal-hint":"Klicken Sie auf diesen Button um das Secret anzuzeigen, bedenken Sie aber, dass das Secret nur einmal angezeigt und dabei gelöscht wird.","text-pre-url":"Das Secret wurde angelegt und unter folgender URL gespeichert:","text-secret-burned":"Das Secret wurde zerstört.","text-secret-create-disabled":"Auf dieser Instanz wurde das Erstellen neuer Secrets deaktiviert.","title-explanation":"So funktioniert es\u0026hellip;","title-new-secret":"Ein neues Secret erstellen","title-reading-secret":"Secret auslesen\u0026hellip;","title-secret-create-disabled":"Erstellen von Secrets deaktiviert…","title-secret-created":"Secret erstellt!","tooltip-burn-secret":"Secret jetzt zerstören!","tooltip-copy-to-clipboard":"In die Zwischenablage kopieren","tooltip-download-as-file":"Als Datei herunterladen"}'),
-    JSON.parse('{"alert-insecure-environment":"Du besuchst diese Instanz über eine unsichere Verbindung. Du kannst deswegen keine Secrets erstellen oder lesen.","alert-secret-not-found":"Das ist nicht das Secret, was du suchst\u0026hellip; - Falls du diesen Link noch nicht selbst geöffnet hast, könnte das Secret kompromittiert sein, da jemand anderes den Link geöffnet haben könnte.","alert-something-went-wrong":"Irgendwas ging schief. Entschuldigung\u0026hellip;","btn-create-secret":"Secret erstellen!","btn-create-secret-processing":"Secret wird erstellt…","btn-new-secret":"Neues Secret","btn-reveal-secret":"Zeig mir das Secret!","btn-reveal-secret-processing":"Secret wird entschlüsselt…","btn-show-explanation":"Wie funktioniert das?","expire-default":"Server-Standard","expire-n-days":"{n} Tag | {n} Tage","expire-n-hours":"{n} Stunde | {n} Stunden","expire-n-minutes":"{n} Minute | {n} Minuten","expire-n-seconds":"{n} Sekunde | {n} Sekunden","items-explanation":["Du gibst ein Secret auf dieser Seite ein","Dein Browser verschlüsselt das Secret mit einem generierten Passwort","Nur das verschlüsselte Secret wird an den Server geschickt (das Passwort oder das Secret im Klartext werden niemals übertragen!)","Der Server speichert das verschlüsselte Secret für eine Weile","Du gibst die angezeigte URL, welche die ID und das Passwort des Secrets enthält, an den Empfänger","Der Empfänger kann das Secret einmalig abrufen: Funktioniert das nicht, könnte jemand anderes es abgerufen haben!","Wenn das verschlüsselte Secret das erste Mal abgerufen wurde, wird es automatisch vom Server gelöscht"],"label-expiry":"Ablauf in:","label-secret-data":"Inhalt des Secrets:","label-secret-files":"Dateien Anhängen:","text-attached-files":"Der Absender hat Dateien an das Secret angehängt. Stell sicher, dass du dem Absender vertraust, da die Dateien nicht geprüft wurden!","text-burn-hint":"Bitte rufe die URL nicht selbst auf, da das Secret dadurch zerstört würde. Gib sie einfach weiter!","text-burn-time":"Wenn es vorher nicht eingesehen wurde, wird dieses Secret automatisch gelöscht:","text-hint-burned":"\u003cstrong\u003eAchtung:\u003c/strong\u003e Du kannst das nur einmal ansehen! Sobald du die Seite neu lädst, ist das Secret verschwunden, also besser direkt kopieren und sicher abspeichern\u0026hellip;","text-invalid-files-selected":"Mindestens eine der ausgewählten Dateien ist nicht als Anhang erlaubt.","text-max-filesize":"Maximale Größe: {maxSize}","text-max-filesize-exceeded":"Die ausgewählten Dateien übersteigen die maximale Größe: {curSize} / {maxSize}","text-powered-by":"Läuft mit","text-pre-reveal-hint":"Um das Secret anzuzeigen klicke diesen Button aber denk dran, dass das Secret nur einmal angezeigt und dabei gelöscht wird.","text-pre-url":"Dein Secret wurde angelegt und unter folgender URL gespeichert:","text-secret-burned":"Das Secret wurde zerstört.","text-secret-create-disabled":"Auf dieser Instanz wurde das Erstellen neuer Secrets deaktiviert.","title-explanation":"So funktioniert es\u0026hellip;","title-new-secret":"Erstelle ein neues Secret","title-reading-secret":"Secret auslesen\u0026hellip;","title-secret-create-disabled":"Erstellen von Secrets deaktiviert…","title-secret-created":"Secret erstellt!","tooltip-burn-secret":"Secret jetzt zerstören!","tooltip-copy-to-clipboard":"In die Zwischenablage kopieren","tooltip-download-as-file":"Als Datei herunterladen"}'),
+    JSON.parse('{"alert-insecure-environment":"Sie besuchen diese Instanz über eine unsichere Verbindung. Sie können deswegen keine Secrets erstellen oder lesen.","alert-secret-not-found":"Dieses Secret existiert nicht. - Falls Sie diesen Link noch nicht selbst geöffnet haben, könnte der Inhalt kompromittiert sein, da jemand anderes den Link geöffnet haben könnte.","alert-something-went-wrong":"Irgendwas ging schief. Entschuldigung\u0026hellip;","btn-create-secret":"Secret erstellen!","btn-create-secret-processing":"Secret wird erstellt…","btn-new-secret":"Neues Secret","btn-reveal-secret":"Secret anzeigen","btn-reveal-secret-processing":"Secret wird entschlüsselt…","btn-show-explanation":"Wie funktioniert das?","btn-theme-switcher-auto":"Auto","expire-default":"Server-Standard","expire-n-days":"{n} Tag | {n} Tage","expire-n-hours":"{n} Stunde | {n} Stunden","expire-n-minutes":"{n} Minute | {n} Minuten","expire-n-seconds":"{n} Sekunde | {n} Sekunden","items-explanation":["Sie geben ein Secret auf dieser Seite ein","Ihr Browser verschlüsselt das Secret mit einem generierten Passwort","Nur das verschlüsselte Secret wird an den Server geschickt (das Passwort oder das Secret im Klartext werden niemals übertragen!)","Der Server speichert das verschlüsselte Secret für eine Weile","Sie geben die angezeigte URL, welche die ID und das Passwort des Secrets enthält, an den Empfänger","Der Empfänger kann das Secret einmalig abrufen: Funktioniert das nicht, könnte jemand anderes es abgerufen haben!","Wenn das verschlüsselte Secret das erste Mal abgerufen wurde, wird es automatisch vom Server gelöscht"],"label-expiry":"Ablauf in:","label-secret-data":"Inhalt des Secrets:","label-secret-files":"Dateien Anhängen:","text-attached-files":"Der Absender hat Dateien an das Secret angehängt. Stellen Sie sicher, dass Sie dem Absender vertrauen, da die Dateien nicht geprüft wurden!","text-burn-hint":"Bitte rufen Sie die URL nicht selbst auf, da das Secret dadurch zerstört würde.","text-burn-time":"Wenn es vorher nicht eingesehen wurde, wird dieses Secret automatisch gelöscht:","text-hint-burned":"\u003cstrong\u003eAchtung:\u003c/strong\u003e Sie können das Secret nur einmal ansehen! Sobald Sie die Seite neu laden, kann das Secret nicht erneut abgerufen werden, also besser direkt kopieren und sicher abspeichern\u0026hellip;","text-invalid-files-selected":"Mindestens eine der ausgewählten Dateien ist nicht als Anhang erlaubt.","text-max-filesize":"Maximale Größe: {maxSize}","text-max-filesize-exceeded":"Die ausgewählten Dateien übersteigen die maximale Größe: {curSize} / {maxSize}","text-powered-by":"Läuft mit","text-pre-reveal-hint":"Klicken Sie auf diesen Button um das Secret anzuzeigen, bedenken Sie aber, dass das Secret nur einmal angezeigt und dabei gelöscht wird.","text-pre-url":"Das Secret wurde angelegt und unter folgender URL gespeichert:","text-secret-burned":"Das Secret wurde zerstört.","text-secret-create-disabled":"Auf dieser Instanz wurde das Erstellen neuer Secrets deaktiviert.","title-explanation":"So funktioniert es\u0026hellip;","title-new-secret":"Ein neues Secret erstellen","title-reading-secret":"Secret auslesen\u0026hellip;","title-secret-create-disabled":"Erstellen von Secrets deaktiviert…","title-secret-created":"Secret erstellt!","tooltip-burn-secret":"Secret jetzt zerstören!","tooltip-copy-to-clipboard":"In die Zwischenablage kopieren","tooltip-download-as-file":"Als Datei herunterladen"}'),
+    JSON.parse('{"alert-insecure-environment":"Du besuchst diese Instanz über eine unsichere Verbindung. Du kannst deswegen keine Secrets erstellen oder lesen.","alert-secret-not-found":"Das ist nicht das Secret, was du suchst\u0026hellip; - Falls du diesen Link noch nicht selbst geöffnet hast, könnte das Secret kompromittiert sein, da jemand anderes den Link geöffnet haben könnte.","alert-something-went-wrong":"Irgendwas ging schief. Entschuldigung\u0026hellip;","btn-create-secret":"Secret erstellen!","btn-create-secret-processing":"Secret wird erstellt…","btn-new-secret":"Neues Secret","btn-reveal-secret":"Zeig mir das Secret!","btn-reveal-secret-processing":"Secret wird entschlüsselt…","btn-show-explanation":"Wie funktioniert das?","btn-theme-switcher-auto":"Auto","expire-default":"Server-Standard","expire-n-days":"{n} Tag | {n} Tage","expire-n-hours":"{n} Stunde | {n} Stunden","expire-n-minutes":"{n} Minute | {n} Minuten","expire-n-seconds":"{n} Sekunde | {n} Sekunden","items-explanation":["Du gibst ein Secret auf dieser Seite ein","Dein Browser verschlüsselt das Secret mit einem generierten Passwort","Nur das verschlüsselte Secret wird an den Server geschickt (das Passwort oder das Secret im Klartext werden niemals übertragen!)","Der Server speichert das verschlüsselte Secret für eine Weile","Du gibst die angezeigte URL, welche die ID und das Passwort des Secrets enthält, an den Empfänger","Der Empfänger kann das Secret einmalig abrufen: Funktioniert das nicht, könnte jemand anderes es abgerufen haben!","Wenn das verschlüsselte Secret das erste Mal abgerufen wurde, wird es automatisch vom Server gelöscht"],"label-expiry":"Ablauf in:","label-secret-data":"Inhalt des Secrets:","label-secret-files":"Dateien Anhängen:","text-attached-files":"Der Absender hat Dateien an das Secret angehängt. Stell sicher, dass du dem Absender vertraust, da die Dateien nicht geprüft wurden!","text-burn-hint":"Bitte rufe die URL nicht selbst auf, da das Secret dadurch zerstört würde. Gib sie einfach weiter!","text-burn-time":"Wenn es vorher nicht eingesehen wurde, wird dieses Secret automatisch gelöscht:","text-hint-burned":"\u003cstrong\u003eAchtung:\u003c/strong\u003e Du kannst das nur einmal ansehen! Sobald du die Seite neu lädst, ist das Secret verschwunden, also besser direkt kopieren und sicher abspeichern\u0026hellip;","text-invalid-files-selected":"Mindestens eine der ausgewählten Dateien ist nicht als Anhang erlaubt.","text-max-filesize":"Maximale Größe: {maxSize}","text-max-filesize-exceeded":"Die ausgewählten Dateien übersteigen die maximale Größe: {curSize} / {maxSize}","text-powered-by":"Läuft mit","text-pre-reveal-hint":"Um das Secret anzuzeigen klicke diesen Button aber denk dran, dass das Secret nur einmal angezeigt und dabei gelöscht wird.","text-pre-url":"Dein Secret wurde angelegt und unter folgender URL gespeichert:","text-secret-burned":"Das Secret wurde zerstört.","text-secret-create-disabled":"Auf dieser Instanz wurde das Erstellen neuer Secrets deaktiviert.","title-explanation":"So funktioniert es\u0026hellip;","title-new-secret":"Erstelle ein neues Secret","title-reading-secret":"Secret auslesen\u0026hellip;","title-secret-create-disabled":"Erstellen von Secrets deaktiviert…","title-secret-created":"Secret erstellt!","tooltip-burn-secret":"Secret jetzt zerstören!","tooltip-copy-to-clipboard":"In die Zwischenablage kopieren","tooltip-download-as-file":"Als Datei herunterladen"}'),
   ),
 
-  'en': JSON.parse('{"alert-insecure-environment":"You are accessing this instance using an insecure connection. You will not be able to create or read secrets.","alert-secret-not-found":"This is not the secret you are looking for\u0026hellip; - If you expected the secret to be here it might be compromised as someone else might have opened the link already.","alert-something-went-wrong":"Something went wrong. I\'m very sorry about this\u0026hellip;","btn-create-secret":"Create the secret!","btn-create-secret-processing":"Secret is being created…","btn-new-secret":"New Secret","btn-reveal-secret":"Show me the secret!","btn-reveal-secret-processing":"Secret is being decrypted…","btn-show-explanation":"How does this work?","expire-default":"Default Expiry","expire-n-days":"{n} day | {n} days","expire-n-hours":"{n} hour | {n} hours","expire-n-minutes":"{n} minute | {n} minutes","expire-n-seconds":"{n} second | {n} seconds","items-explanation":["You enter a secret into the field on this page","Your browser encrypts the secret using a generated password","Only the encrypted secret is sent to the server (neither the plain secret nor the password are ever sent!)","The server stores the encrypted secret for a certain time","You pass the displayed URL containing the ID and the decryption password to the recipient","The recipient can view the secret exactly once: If they can\'t, the secret might have been viewed by someone else!","After the encrypted secret has been retrieved once, it is deleted from the server"],"label-expiry":"Expire in:","label-secret-data":"Secret data:","label-secret-files":"Attach Files:","text-attached-files":"The sender attached files to the secret. Make sure you trust the sender as the files were not checked!","text-burn-hint":"Please remember not to go to this URL yourself as that would destroy the secret. Just pass it to someone else!","text-burn-time":"If not viewed before, this secret will automatically be deleted:","text-hint-burned":"\u003cstrong\u003eAttention:\u003c/strong\u003e You\'re only seeing this once. As soon as you reload the page the secret will be gone so maybe copy it now\u0026hellip;","text-invalid-files-selected":"At least one of the selected files is not allowed as an attachment.","text-max-filesize":"Maximum size: {maxSize}","text-max-filesize-exceeded":"The file(s) you chose are too big to attach: {curSize} / {maxSize}","text-powered-by":"Powered by","text-pre-reveal-hint":"To reveal the secret click this button but be aware doing so will destroy the secret. You can only view it once!","text-pre-url":"Your secret was created and stored using this URL:","text-secret-burned":"The secret was successfully destroyed.","text-secret-create-disabled":"The creation of new secrets is disabled in this instance.","title-explanation":"This is how it works\u0026hellip;","title-new-secret":"Create a new secret","title-reading-secret":"Reading your secret\u0026hellip;","title-secret-create-disabled":"Secret creation disabled…","title-secret-created":"Secret created!","tooltip-burn-secret":"Burn Secret now!","tooltip-copy-to-clipboard":"Copy to Clipboard","tooltip-download-as-file":"Download as File"}'),
+  'en': JSON.parse('{"alert-insecure-environment":"You are accessing this instance using an insecure connection. You will not be able to create or read secrets.","alert-secret-not-found":"This is not the secret you are looking for\u0026hellip; - If you expected the secret to be here it might be compromised as someone else might have opened the link already.","alert-something-went-wrong":"Something went wrong. I\'m very sorry about this\u0026hellip;","btn-create-secret":"Create the secret!","btn-create-secret-processing":"Secret is being created…","btn-new-secret":"New Secret","btn-reveal-secret":"Show me the secret!","btn-reveal-secret-processing":"Secret is being decrypted…","btn-show-explanation":"How does this work?","btn-theme-switcher-auto":"Auto","expire-default":"Default Expiry","expire-n-days":"{n} day | {n} days","expire-n-hours":"{n} hour | {n} hours","expire-n-minutes":"{n} minute | {n} minutes","expire-n-seconds":"{n} second | {n} seconds","items-explanation":["You enter a secret into the field on this page","Your browser encrypts the secret using a generated password","Only the encrypted secret is sent to the server (neither the plain secret nor the password are ever sent!)","The server stores the encrypted secret for a certain time","You pass the displayed URL containing the ID and the decryption password to the recipient","The recipient can view the secret exactly once: If they can\'t, the secret might have been viewed by someone else!","After the encrypted secret has been retrieved once, it is deleted from the server"],"label-expiry":"Expire in:","label-secret-data":"Secret data:","label-secret-files":"Attach Files:","text-attached-files":"The sender attached files to the secret. Make sure you trust the sender as the files were not checked!","text-burn-hint":"Please remember not to go to this URL yourself as that would destroy the secret. Just pass it to someone else!","text-burn-time":"If not viewed before, this secret will automatically be deleted:","text-hint-burned":"\u003cstrong\u003eAttention:\u003c/strong\u003e You\'re only seeing this once. As soon as you reload the page the secret will be gone so maybe copy it now\u0026hellip;","text-invalid-files-selected":"At least one of the selected files is not allowed as an attachment.","text-max-filesize":"Maximum size: {maxSize}","text-max-filesize-exceeded":"The file(s) you chose are too big to attach: {curSize} / {maxSize}","text-powered-by":"Powered by","text-pre-reveal-hint":"To reveal the secret click this button but be aware doing so will destroy the secret. You can only view it once!","text-pre-url":"Your secret was created and stored using this URL:","text-secret-burned":"The secret was successfully destroyed.","text-secret-create-disabled":"The creation of new secrets is disabled in this instance.","title-explanation":"This is how it works\u0026hellip;","title-new-secret":"Create a new secret","title-reading-secret":"Reading your secret\u0026hellip;","title-secret-create-disabled":"Secret creation disabled…","title-secret-created":"Secret created!","tooltip-burn-secret":"Burn Secret now!","tooltip-copy-to-clipboard":"Copy to Clipboard","tooltip-download-as-file":"Download as File"}'),
 
   'es': JSON.parse('{"alert-secret-not-found":"Este no es el secreto que buscas\u0026hellip; - Si esperabas que el secreto estuviera aquí, es posible que se haya visto comprometido, ya que otra persona podría haber abierto el enlace en tu lugar.","alert-something-went-wrong":"Algo ha salido mal. Lo sentimos mucho\u0026hellip;","btn-create-secret":"¡Crea el secreto!","btn-create-secret-processing":"El secreto se está creando...","btn-new-secret":"Nuevo secreto","btn-reveal-secret":"¡Muéstrame el secreto!","btn-reveal-secret-processing":"El secreto se está descifrando...","btn-show-explanation":"¿Cómo funciona?","expire-default":"Caducidad predeterminada","expire-n-days":"{n} día | {n} días","expire-n-hours":"{n} hora | {n} horas","expire-n-minutes":"{n} minuto | {n} minutos","expire-n-seconds":"{n} segundo | {n} segundos","items-explanation":["Introduce un secreto en el formulario que hay en esta página","Tu navegador cifra el secreto utilizando una contraseña generada","Únicamente se envía al servidor el secreto cifrado (¡nunca se envían ni el secreto sin cifrar ni la contraseña!)","El servidor almacena el secreto cifrado durante un tiempo limitado","Envía al destinatario el enlace mostrado, que contiene el identificador del secreto y la contraseña de descifrado","El destinatario puede ver el secreto una sola vez: si no puede, ¡el secreto podría haber sido visto por otra persona!","Cuando se ha obtenido por primera y única vez el secreto cifrado, se elimina del servidor"],"label-expiry":"Caduca en:","label-secret-data":"Información secreta:","label-secret-files":"Adjuntar archivos:","text-attached-files":"El remitente ha adjuntado archivos al secreto. Asegúrate de que confías en esta persona, ya que los archivos no han sido revisados.","text-burn-hint":"Por favor, recuerda no acceder a este enlace tú mismo, ya que esto destruiría el secreto. ¡Solo tienes que pasárselo a otra persona!","text-burn-time":"Si no se muestra antes, este secreto se eliminará automáticamente:","text-hint-burned":"\u003cstrong\u003eAtención:\u003c/strong\u003e Solo verás esto una vez. En cuanto recargues la página, el secreto desaparecerá, así que cópialo ya\u0026hellip;","text-max-filesize":"Tamaño máximo: {maxSize}","text-max-filesize-exceeded":"Los archivos seleccionados son demasiado grandes para adjuntarlos: {curSize} / {maxSize}","text-powered-by":"Funciona con","text-pre-reveal-hint":"Para mostrar el secreto pulsa este botón, pero ten en cuenta que al hacerlo se destruirá. ¡Solo puedes verlo una vez!","text-pre-url":"Tu secreto ha sido creado y almacenado en el siguiente enlace:","text-secret-create-disabled":"La creación de nuevos secretos está desactivada en esta instancia.","title-explanation":"Así es como funciona\u0026hellip;","title-new-secret":"Crea un nuevo secreto","title-reading-secret":"Obteniendo tu secreto\u0026hellip;","title-secret-create-disabled":"Creación de secretos desactivada...","title-secret-created":"¡Secreto creado!"}'),
 
@@ -20,7 +20,7 @@ export default {
 
   'lv': JSON.parse('{"alert-secret-not-found":"\u003cstrong\u003eZiņa nav atrasta!\u003c/strong\u003e\u0026hellip; - Ja ievadītā saite ir pareiza, tad ir beidzies ziņas glabāšanas laiks, vai arī tā jau vienreiz ir atvērta.","alert-something-went-wrong":"Neparedzēta sistēmas kļūda. Atvainojiet par sagādātajām neērtībām\u0026hellip;","btn-create-secret":"Šifrēt ziņu!","btn-new-secret":"Jauna ziņa","btn-reveal-secret":"Atvērt ziņu!","btn-show-explanation":"Kā tas strādā?","expire-n-days":"{n} diena | {n} dienas","expire-n-hours":"{n} stunda | {n} stundas","expire-n-minutes":"{n} minūte | {n} minūtes","expire-n-seconds":"{n} sekundes | {n} sekundes","items-explanation":["Tu ievadi ziņu ievades laukā","Pārlūks nošifrē ziņu ar uzģenerētu paroli","Tikai šifrētā ziņa tiek nosūtīta serverim (nešifrētā ziņa un parole sūtīta netiek!)","Serveris noteiktu laiku glabā šifrēto ziņu","Tu nodod URL ar ziņas ID un atšifrēšanas paroli saņēmējam","Saņēmējs var atvērt ziņu tikai vienreiz: ja tas neizdodas, iespējams, ziņu jau atvēris kāds cits!","Kad ziņa tiek atvērta pirmo reizi, tā no servera tiek dzēsta"],"label-secret-data":"Ziņa:","text-burn-hint":"Lūdzu atceries neatvērt saiti pats, jo tad ziņa tiks dzēsta. Nodod saiti ziņas saņēmējam!","text-hint-burned":"\u003cstrong\u003eUzmanību:\u003c/strong\u003e Ziņa tiek parādīta tikai vienu reizi. Līdzko lapa tiks pārlādēta, ziņa būs neatgriezeniski zaudēta, tāpēc nepieciešamības gadījumā nokopē to tagad\u0026hellip;","text-powered-by":"Darbina","text-pre-reveal-hint":"Lai parādītu ziņu nospied šo pogu, bet rēķinies ar to, ka pēc apskates ziņa vairs nebūs pieejama. To var atvērt tikai vienreiz!","text-pre-url":"Ziņa ir nošifrēta un ir atverama šajā adresē:","text-secret-create-disabled":"Šajā gadījumā jaunu noslēpumu izveide ir atspējota.","title-explanation":"Tā tas strādā\u0026hellip;","title-new-secret":"Šifrēt ziņu","title-reading-secret":"Atver ziņu\u0026hellip;","title-secret-create-disabled":"Slepena izveide atspējota...","title-secret-created":"Ziņa nošifrēta!"}'),
 
-  'nl': JSON.parse('{"alert-secret-not-found":"De gegevens die je zocht bestaan niet (meer)\u0026hellip; - Als je hier informatie verwachtte dan is de link mogelijk al door iemand anders bekeken!","alert-something-went-wrong":"Er ging iets verkeerd, sorry\u0026hellip;","btn-create-secret":"Geheim aanmaken!","btn-create-secret-processing":"Geheim wordt aangemaakt...","btn-new-secret":"Nieuw","btn-reveal-secret":"Toon mij het geheim!","btn-reveal-secret-processing":"Geheim wordt ontsleuteld...","btn-show-explanation":"Hoe werkt dit?","expire-default":"Standaard vervaltermijn","expire-n-days":"{n} dag | {n} dagen","expire-n-hours":"{n} uur | {n} uur","expire-n-minutes":"{n} minuut | {n} minuten","expire-n-seconds":"{n} seconde | {n} seconden","items-explanation":["Je vult vertrouwelijke informatie in op deze pagina.","Je browser versleutelt de ingevulde tekst via een automatisch gegenereerd wachtwoord.","Alleen de versleutelde data wordt naar de server gestuurd (de onversleutelde data of het wachtwoord worden nooit verstuurd!)","De server slaat de versleutelde data voor een bepaalde periode op","Je geeft de URL met ID en het gegenereerde wachtwoord aan de ontvanger.","De ontvanger kan de vertrouwelijke informatie exact eenmaal bekijken: indien het niet lukt heeft mogelijk iemand anders de info gezien!","Nadat het versleutelde geheim eenmalig bekeken is, wordt deze van de server verwijderd"],"label-expiry":"Verwijder na:","label-secret-data":"Vertrouwelijke info:","label-secret-files":"Bestanden toevoegen:","text-attached-files":"De afzender heeft bestanden toegevoegd. Deze zijn niet gecontroleerd, gebruik deze enkel als je de afzender vertrouwt!","text-burn-hint":"Open de URL niet zelf, deze is slechts eenmalig te gebruiken. Geef de URL aan de ontvanger.","text-burn-time":"Deze vertrouwelijke informatie wordt automatisch gewist indien niet bekeken voor:","text-hint-burned":"\u003cstrong\u003eOpgelet:\u003c/strong\u003e Je ziet deze informatie alleen nu. Je kan het niet meer opnieuw opvragen als je de pagina verlaat.","text-max-filesize":"Maximum grootte: {maxSize}","text-max-filesize-exceeded":"De bestanden die je toevoegde zijn te groot: {curSize} / {maxSize}","text-powered-by":"Mogelijk gemaakt door","text-pre-reveal-hint":"Gebruik deze knop om het geheim weer te geven. Let op: Je kan dit slechts eenmaal doen!","text-pre-url":"Het geheim kan opgevraagd worden via deze URL:","text-secret-create-disabled":"Het aanmaken van nieuwe geheimen is in deze omgeving uitgeschakeld.","title-explanation":"Dit is hoe het werkt\u0026hellip;","title-new-secret":"Nieuw geheim aanmaken","title-reading-secret":"Geheim wordt gelezen\u0026hellip;","title-secret-create-disabled":"Aanmaken geheimen uitgeschakeld...","title-secret-created":"Geheim aangemaakt!"}'),
+  'nl': JSON.parse('{"alert-secret-not-found":"De gegevens die je zocht bestaan niet (meer)\u0026hellip; - Als je hier informatie verwachtte dan is de link mogelijk al door iemand anders bekeken!","alert-something-went-wrong":"Er ging iets verkeerd, sorry\u0026hellip;","btn-create-secret":"Geheim aanmaken!","btn-create-secret-processing":"Geheim wordt aangemaakt...","btn-new-secret":"Nieuw","btn-reveal-secret":"Toon mij het geheim!","btn-reveal-secret-processing":"Geheim wordt ontsleuteld...","btn-show-explanation":"Hoe werkt dit?","btn-theme-switcher-auto":"Auto","expire-default":"Standaard vervaltermijn","expire-n-days":"{n} dag | {n} dagen","expire-n-hours":"{n} uur | {n} uur","expire-n-minutes":"{n} minuut | {n} minuten","expire-n-seconds":"{n} seconde | {n} seconden","items-explanation":["Je vult vertrouwelijke informatie in op deze pagina.","Je browser versleutelt de ingevulde tekst via een automatisch gegenereerd wachtwoord.","Alleen de versleutelde data wordt naar de server gestuurd (de onversleutelde data of het wachtwoord worden nooit verstuurd!)","De server slaat de versleutelde data voor een bepaalde periode op","Je geeft de URL met ID en het gegenereerde wachtwoord aan de ontvanger.","De ontvanger kan de vertrouwelijke informatie exact eenmaal bekijken: indien het niet lukt heeft mogelijk iemand anders de info gezien!","Nadat het versleutelde geheim eenmalig bekeken is, wordt deze van de server verwijderd"],"label-expiry":"Verwijder na:","label-secret-data":"Vertrouwelijke info:","label-secret-files":"Bestanden toevoegen:","text-attached-files":"De afzender heeft bestanden toegevoegd. Deze zijn niet gecontroleerd, gebruik deze enkel als je de afzender vertrouwt!","text-burn-hint":"Open de URL niet zelf, deze is slechts eenmalig te gebruiken. Geef de URL aan de ontvanger.","text-burn-time":"Deze vertrouwelijke informatie wordt automatisch gewist indien niet bekeken voor:","text-hint-burned":"\u003cstrong\u003eOpgelet:\u003c/strong\u003e Je ziet deze informatie alleen nu. Je kan het niet meer opnieuw opvragen als je de pagina verlaat.","text-max-filesize":"Maximum grootte: {maxSize}","text-max-filesize-exceeded":"De bestanden die je toevoegde zijn te groot: {curSize} / {maxSize}","text-powered-by":"Mogelijk gemaakt door","text-pre-reveal-hint":"Gebruik deze knop om het geheim weer te geven. Let op: Je kan dit slechts eenmaal doen!","text-pre-url":"Het geheim kan opgevraagd worden via deze URL:","text-secret-create-disabled":"Het aanmaken van nieuwe geheimen is in deze omgeving uitgeschakeld.","title-explanation":"Dit is hoe het werkt\u0026hellip;","title-new-secret":"Nieuw geheim aanmaken","title-reading-secret":"Geheim wordt gelezen\u0026hellip;","title-secret-create-disabled":"Aanmaken geheimen uitgeschakeld...","title-secret-created":"Geheim aangemaakt!"}'),
 
   'nl-BE': JSON.parse('{"alert-secret-not-found":"De gegevens die je zocht bestaan niet (meer)\u0026hellip; - Als je hier informatie verwachtte dan is de link mogelijk al door iemand anders bekeken!","alert-something-went-wrong":"Er ging iets verkeerd, sorry\u0026hellip;","btn-create-secret":"Nieuwe vertrouwelijke info aanmaken!","btn-create-secret-processing":"Vertrouwelijke info wordt versleuteld...","btn-new-secret":"Nieuw","btn-reveal-secret":"Toon mij de vertrouwelijke info!","btn-reveal-secret-processing":"Vertrouwelijke info wordt ontsleuteld...","btn-show-explanation":"Hoe werkt dit?","expire-default":"Standaard termijn","expire-n-days":"{n} dag | {n} dagen","expire-n-hours":"{n} uur | {n} uur","expire-n-minutes":"{n} minuut | {n} minuten","expire-n-seconds":"{n} seconde | {n} seconden","items-explanation":["Je vult vertrouwelijke informatie in op deze pagina.","Je browser versleutelt de ingevulde tekst via een automatisch gegenereerd wachtwoord.","Alleen de versleutelde data wordt naar de server gestuurd. (De leesbare versie of het wachtwoord worden nooit verstuurd!)","De server slaat de versleutelde data gedurende een beperkte periode op.","Je geeft de URL met identificatie en het gegenereerde wachtwoord aan de ontvanger.","De ontvanger kan de vertrouwelijke informatie exact eenmaal bekijken: indien het niet lukt heeft mogelijk iemand anders de info gezien!","De versleutelde data wordt van de server gewist van zodra de ontvanger het bekeken heeft."],"label-expiry":"Verwijder na:","label-secret-data":"Vertrouwelijke info:","label-secret-files":"Bestanden toevoegen:","text-attached-files":"De afzender heeft bestanden toegevoegd. Deze werden niet gecontroleerd, gebruik deze enkel als je de afzender vertrouwt!","text-burn-hint":"Bezoek de URL niet zelf: je kan deze slechts eenmaal gebruiken. Geef de URL aan de ontvanger.","text-burn-time":"Deze vertrouwelijke informatie wordt automatisch gewist indien niet bekeken voor:","text-hint-burned":"\u003cstrong\u003eOpgelet:\u003c/strong\u003e Je ziet deze informatie alleen nu. Je kan het niet meer opnieuw opvragen als je de pagina verlaat.","text-max-filesize":"Maximum grootte: {maxSize}","text-max-filesize-exceeded":"De bestanden die je toevoegde zijn te groot: {curSize} / {maxSize}","text-powered-by":"Mogelijk gemaakt door","text-pre-reveal-hint":"Gebruik deze knop om de vertrouwelijke info op te halen. Let op: Je kan dit slechts eenmaal doen!","text-pre-url":"Je vertrouwelijke informatie kan opgevraagd worden via deze URL:","text-secret-create-disabled":"Het aanmaken van nieuwe geheimen is in dit geval uitgeschakeld.","title-explanation":"Dit is hoe het werkt\u0026hellip;","title-new-secret":"Nieuwe vertrouwelijke info opslaan","title-reading-secret":"Vertrouwelijke info lezen\u0026hellip;","title-secret-create-disabled":"Geheime creatie uitgeschakeld...","title-secret-created":"Vertrouwelijke info opgeslaan!"}'),
 
diff --git a/src/main.js b/src/main.js
index 151c8bf..c025d46 100644
--- a/src/main.js
+++ b/src/main.js
@@ -43,7 +43,7 @@ new Vue({
 
   data: {
     customize: {},
-    darkTheme: false,
+    theme: 'auto',
     version,
   },
 
@@ -65,7 +65,11 @@ new Vue({
 
   mounted() {
     this.customize = window.OTSCustomize
-    this.darkTheme = window.getTheme() === 'dark'
+    this.theme = window.getThemeFromStorage()
+
+    window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', () => {
+      window.refreshTheme()
+    })
   },
 
   name: 'OTS',
@@ -73,8 +77,8 @@ new Vue({
   router,
 
   watch: {
-    darkTheme(to) {
-      window.setTheme(to ? 'dark' : 'light')
+    theme(to) {
+      window.setTheme(to)
     },
   },
 })