Toggle light/dark mode

libretranslate/static/css/main.css

@@ -162,7 +162,7 @@ h3.header {
   left: 2px;
 }
 
-.locale-panel a:hover{
+.locale-panel a:hovselecter{
   background-color: transparent !important;
 }
 
@@ -186,10 +186,7 @@ h3.header {
 
 select {
   color: var(--fg-color);
-}
-
-select option {
-  color: var(--pri-bg-color);
+  background-color: var(--pri-bg-color);
 }
 
 .language-select {
@@ -206,7 +203,6 @@ select option {
   text-decoration: underline;
   -webkit-appearance: none;
   appearance: none;
-  background-color: transparent;
   padding: 0;
   text-indent: 0.01px;
   text-overflow: "";

libretranslate/templates/app.js.template

@@ -525,4 +525,83 @@ function setApiKey(){
     localStorage.setItem("api_key", newKey);
 }
 
+// Color scheme handling
+function getPreferredColorScheme(){
+  var systemScheme = 'light';
+  if(window.matchMedia('(prefers-color-scheme: dark)').matches){
+    systemScheme = 'dark';
+  }
+  var chosenScheme = systemScheme;
+
+  if(localStorage.getItem("scheme")){
+    chosenScheme = localStorage.getItem("scheme");
+  }
+
+  if(systemScheme === chosenScheme){
+    localStorage.removeItem("scheme");
+  }
+
+  return chosenScheme;
+}
+
+// Write chosen color scheme to local storage
+// Unless the system scheme matches the the stored scheme, in which case... remove from local storage
+function savePreferredColorScheme(scheme){
+  var systemScheme = 'light';
+
+  if(window.matchMedia('(prefers-color-scheme: dark)').matches){
+    systemScheme = 'dark';
+  }
+
+  if(systemScheme === scheme){
+    localStorage.removeItem("scheme");
+  } else {
+    localStorage.setItem("scheme", scheme);
+  }
+
+}
+
+// Get the current scheme, and apply the opposite
+function toggleColorScheme(){
+  let newScheme = "light";
+  let scheme = getPreferredColorScheme();
+  if (scheme === "light"){
+    newScheme = "dark";
+  }
+
+  applyPreferredColorScheme(newScheme);
+}
+
+// Apply the chosen color scheme by traversing stylesheet rules, and applying a medium.
+function applyPreferredColorScheme(scheme) {
+    for (var s = 0; s < document.styleSheets.length; s++) {
+        for (var i = 0; i < document.styleSheets[s].cssRules.length; i++) {
+            rule = document.styleSheets[s].cssRules[i];
+            if (rule && rule.media && rule.media.mediaText.includes("prefers-color-scheme")) {
+                switch (scheme) {
+                    case "light":
+                        rule.media.appendMedium("original-prefers-color-scheme");
+                        if (rule.media.mediaText.includes("light")) rule.media.deleteMedium("(prefers-color-scheme: light)");
+                        if (rule.media.mediaText.includes("dark")) rule.media.deleteMedium("(prefers-color-scheme: dark)");
+                        break;
+                    case "dark":
+                        rule.media.appendMedium("(prefers-color-scheme: light)");
+                        rule.media.appendMedium("(prefers-color-scheme: dark)");
+                        if (rule.media.mediaText.includes("original")) rule.media.deleteMedium("original-prefers-color-scheme");
+                        break;
+                    default:
+                        rule.media.appendMedium("(prefers-color-scheme: dark)");
+                        if (rule.media.mediaText.includes("light")) rule.media.deleteMedium("(prefers-color-scheme: light)");
+                        if (rule.media.mediaText.includes("original")) rule.media.deleteMedium("original-prefers-color-scheme");
+                        break;
+                }
+            }
+        }
+    }
+
+    savePreferredColorScheme(scheme);
+}
+
+applyPreferredColorScheme(getPreferredColorScheme());
+
 // @license-end

libretranslate/templates/index.html

@@ -78,6 +78,8 @@
 						</select>
 						<a href="https://hosted.weblate.org/projects/libretranslate/app/{{ current_locale }}/">{{ _h("Edit") }}<i class="material-icons">create</i></a>
 					</li>
+					<li class="change-theme"><a class="noline" href="javascript:toggleColorScheme()" title="{{ _h('Toggle dark/light mode') }}"><i class="material-icons">lightbulb_outline</i></a>
+					</li>
 					{% endset %}
 					{{ menulinks }}
 				</ul>