Fix2

aranroig/app/app.vue

@@ -11,13 +11,17 @@
 </template>
 
 <script setup lang="ts">
-const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+import { onMounted } from 'vue';
+onMounted(() => {
+  const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+  if (isDarkMode) {
+    document.documentElement.setAttribute("data-theme", "dark");
+  } else {
+    document.documentElement.setAttribute("data-theme", "light");
+  }
+});
 
-if (isDarkMode) {
-  document.documentElement.setAttribute("data-theme", "dark");
-} else {
-  document.documentElement.setAttribute("data-theme", "light");
-}
 </script>
 
 <style lang="scss" scoped>

aranroig/app/assets/css/main.scss

@@ -22,4 +22,15 @@ body {
   /* OR for standard crisp images */
   image-rendering: crisp-edges;
   pointer-events: none;
+}
+
+ul {
+  list-style: none; /* Remove default bullets */
+}
+ul > li {padding: 10px 25px} /* Stretching li elements a little so it looks prettier */
+li::before {
+    content: "";
+    width: 16px;
+    height: 16px;
+    background-color: #d050ff;
 }