feat: add dark mode support (#10)

coliff · web-flow · commit 4b67468e367b · 2024-10-04T16:21:24.000+02:00
diff --git a/popup/choose_bootstrap_version.css b/popup/choose_bootstrap_version.css
@@ -1,4 +1,5 @@
 html, body {
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   width: max-content;
 }
 
@@ -11,3 +12,15 @@ html, body {
   flex-direction: column;
   gap: 10px;
 }
+
+label span {
+  opacity: 0.75;
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    color-scheme: dark;
+    background-color: #212529;
+    color: #fff;
+  }
+}
diff --git a/popup/choose_bootstrap_version.html b/popup/choose_bootstrap_version.html
@@ -1,8 +1,9 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <link rel="stylesheet" href="choose_bootstrap_version.css" />
+    <title>Choose Bootstrap Version</title>
   </head>
   <body>
     <div id="popup-content">
@@ -16,7 +17,7 @@
       </div>
       <div>
         <input type="checkbox" id="bs5" name="bs5" />
-        <label for="bs5">Bootstrap 5<br>(removed in Bootstrap 6)</label>
+        <label for="bs5">Bootstrap 5<br><span>(removed in Bootstrap 6)</span></label>
       </div>
       <button type="reset">Reset</button>
     </div>
