dark mode and second button

FCLauncher/src/index.html

@@ -19,16 +19,22 @@
     </div>
 
 
-    <div class="container">
+    <div class="container" data-bs-theme="dark">
 
        
       
     
 
-      <select name="modSelect" id="Modpacks">
+      <select name="modSelect" id="Modpacks" class="bg-dark text-white">
       </select>
 
       <button id="launchGame" type="button">Launch Minecraft</button> 
+
+
+      <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ?autoplay=1"
+        target="_blank">
+        <button>Buy Me A Coffee!</button>
+      </a>
       
     </div>
   </body>

FCLauncher/src/main.js

@@ -36,7 +36,7 @@ window.onload = async function() {
 function addModpacks(modpacks) {
   
   var dropdown = document.getElementById("Modpacks");
-  modpacks.sort();
+  modpacks.sort((a, b) => a.name.localeCompare(b.name));
   modpacks.reverse();
   for (let i = 0; i < modpacks.length; i++){
     var opt = document.createElement("option"); 

FCLauncher/src/styles.css

@@ -6,6 +6,7 @@
   font-size: 16px;
   line-height: 24px;
   font-weight: 400;
+  color-scheme: dark;
 
   color: #0f0f0f;
   background-color: #f6f6f6;
@@ -70,7 +71,7 @@ button {
   font-weight: 500;
   font-family: inherit;
   color: #4df3ff;
-  background-color: #ffffff;
+  background-color: #474747;
   transition: border-color 0.25s;
   box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
   width: 300px;
@@ -163,6 +164,9 @@ button {
   align-content: center;
   align-self: center;
   align-items: center;
+  background-color: #2f2f2f;
+  border: 2px solid rgb(26, 26, 26);
+  
 }
 .Logo{
   background-image: url('assets/CityBase.png');
@@ -176,3 +180,9 @@ button {
 #launchGame {
   margin-top: 20px;
 }
+
+
+.modSelect.select{
+  background: #272727;
+  flood-color: #0f0f0f;
+}