Try arimo and better dark mode

dashboard/package-lock.json

@@ -7,6 +7,8 @@
     "": {
       "dependencies": {
         "@eslint/js": "^9.17.0",
+        "@fontsource/arimo": "^5.1.1",
+        "@fontsource/dm-sans": "^5.1.1",
         "@fontsource/inter": "^5.1.1",
         "@fontsource/noto-sans": "^5.1.1",
         "@fortawesome/fontawesome-free": "^6.7.2",
@@ -633,6 +635,18 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@fontsource/arimo": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/@fontsource/arimo/-/arimo-5.1.1.tgz",
+      "integrity": "sha512-D0pn+VveLnBhVllkb17KQCeDrN6VSyv0xD3mxAJbd9/nvQfRDQwYWm9Ct1TRXnA9DgQ//7KXXEptWWGP11DqlA==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@fontsource/dm-sans": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/@fontsource/dm-sans/-/dm-sans-5.1.1.tgz",
+      "integrity": "sha512-xApcrecLZkQMM6bl7U+Eokg8Y4LeYMiR+cQUTUNx4Adun5ZpiIlPB9+JEXg/k1gFea/72nmn30AekCBA+HhUCA==",
+      "license": "OFL-1.1"
+    },
     "node_modules/@fontsource/inter": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.1.1.tgz",
@@ -3327,6 +3341,16 @@
         "levn": "^0.4.1"
       }
     },
+    "@fontsource/arimo": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/@fontsource/arimo/-/arimo-5.1.1.tgz",
+      "integrity": "sha512-D0pn+VveLnBhVllkb17KQCeDrN6VSyv0xD3mxAJbd9/nvQfRDQwYWm9Ct1TRXnA9DgQ//7KXXEptWWGP11DqlA=="
+    },
+    "@fontsource/dm-sans": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/@fontsource/dm-sans/-/dm-sans-5.1.1.tgz",
+      "integrity": "sha512-xApcrecLZkQMM6bl7U+Eokg8Y4LeYMiR+cQUTUNx4Adun5ZpiIlPB9+JEXg/k1gFea/72nmn30AekCBA+HhUCA=="
+    },
     "@fontsource/inter": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.1.1.tgz",

dashboard/package.json

@@ -8,6 +8,8 @@
   "type": "module",
   "dependencies": {
     "@eslint/js": "^9.17.0",
+    "@fontsource/arimo": "^5.1.1",
+    "@fontsource/dm-sans": "^5.1.1",
     "@fontsource/inter": "^5.1.1",
     "@fontsource/noto-sans": "^5.1.1",
     "@fortawesome/fontawesome-free": "^6.7.2",

dashboard/src/modules.js

@@ -4,6 +4,8 @@ window.cloudronApiOrigin = import.meta.env.VITE_API_ORIGIN || '';
 
 import '@fortawesome/fontawesome-free/css/all.min.css';
 import '@fontsource/noto-sans';
+import '@fontsource/dm-sans';
+import '@fontsource/arimo';
 import '@fontsource/inter';
 import 'bootstrap-sass';
 import Chart from 'chart.js/auto';

dashboard/src/theme.scss

@@ -10,8 +10,8 @@ $brand-warning:                             #f0ad4e !default;
 $brand-danger:                              #ff4c4c !default;
 
 $body-bg:                                   #f4f4f4;
-$font-family-sans-serif:                    "Inter", "Noto Sans", Helvetica, Arial, sans-serif;
+$font-family-sans-serif:                    "Arimo", "DM Sans", "Noto Sans", Helvetica, Arial, sans-serif;
-$font-family-heading:                       "Inter Light", "Noto Sans Light", Helvetica, Arial, sans-serif;
+$font-family-heading:                       "Arimo", "DM Sans", "Noto Sans", Helvetica, Arial, sans-serif;
 
 $navbar-default-link-color:                 $brand-primary !default;
 $navbar-default-link-hover-color:           #62bdfc !default;
@@ -68,6 +68,9 @@ html {
         --card-background: #15181f;
         --navbar-background: #11161f;
         --body-background: #0b0e14;
+        --pankow-dialog-background-color: var(--navbar-background);
+        --pankow-color-background: var(--navbar-background);
+        --pankow-text-color: white;
     }
 }
 
@@ -434,6 +437,12 @@ html, body {
 .nav-sidebar-list {
     overflow: auto;
     padding-top: 20px;
+    scrollbar-color: transparent transparent;
+    scrollbar-width: thin;
+}
+
+.nav-sidebar-list:hover {
+    scrollbar-color: var(--color-neutral-border) transparent;
 }
 
 .nav-sidebar-item {
@@ -2443,7 +2452,8 @@ tag-input {
 // ----------------------------
 
 @media (prefers-color-scheme: dark) {
-    $textColor: #959595;
+    // $textColor: #959595;
+    $textColor: #ccc;
     $backgroundLight: #2b2b2e;
     $backgroundDark: #1c1c1c;