feat: scrollbar setting

amanharwara · Mar 1, 2023 · 892dc2f · 892dc2f
1 parent 3ba01aa
commit 892dc2f
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 5 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -64,7 +64,7 @@
   });
 </script>
 
-<main>
+<main class:custom-scrollbar={!$settings["systemScrollbars"]?.value}>
   {#if showTitlebar}
     <CustomTitlebar />
   {/if}

diff --git a/src/components/SettingsManager.svelte b/src/components/SettingsManager.svelte
@@ -176,10 +176,10 @@
     overflow-x: hidden;
     margin-bottom: 0.75rem;
   }
-  .settings::-webkit-scrollbar {
+  :global(.custom-scrollbar) .settings::-webkit-scrollbar {
     width: 5px;
   }
-  .settings::-webkit-scrollbar-thumb {
+  :global(.custom-scrollbar) .settings::-webkit-scrollbar-thumb {
     background: #36475d;
   }
   .setting {

diff --git a/src/components/TabBar.svelte b/src/components/TabBar.svelte
@@ -258,10 +258,10 @@
     display: flex;
     overflow-x: auto;
   }
-  .tabs::-webkit-scrollbar {
+  :global(.custom-scrollbar) .tabs::-webkit-scrollbar {
     height: 5px;
   }
-  .tabs::-webkit-scrollbar-thumb {
+  :global(.custom-scrollbar) .tabs::-webkit-scrollbar-thumb {
     background: #36475d;
   }
   .add-tab {

diff --git a/src/store/settings.ts b/src/store/settings.ts
@@ -81,6 +81,12 @@ const defaultSettings: () => Settings = () => {
       description:
         "When enabled, Altus will use a custom titlebar instead of the one provided by the system. (NOTE: Requires a restart for changes to apply.)",
     },
+    systemScrollbars: {
+      value: false,
+      name: "Use system scrollbars for UI",
+      description:
+        "When enabled, Altus will use the system scrollbar style instead of a custom style. This does not apply to the WhatsApp UI, use a custom theme for that.",
+    },
     rememberWindowSize: {
       value: false,
       name: "Remember Window Size",