Provide option to force use of system scrollbar styling (#32117)

app/helpers/application_helper.rb

@@ -147,6 +147,7 @@ module ApplicationHelper
     output << content_for(:body_classes)
     output << "theme-#{current_theme.parameterize}"
     output << 'system-font' if current_account&.user&.setting_system_font_ui
+    output << 'custom-scrollbars' unless current_account&.user&.setting_system_scrollbars_ui
     output << (current_account&.user&.setting_reduce_motion ? 'reduce-motion' : 'no-reduce-motion')
     output << 'rtl' if locale_direction == 'rtl'
     output.compact_blank.join(' ')

app/javascript/styles/mastodon-light/diff.scss

@@ -523,6 +523,13 @@ a.sparkline {
   }
 }
 
+.notification-group--annual-report {
+  .notification-group__icon,
+  .notification-group__main .link-button {
+    color: var(--indigo-3);
+  }
+}
+
 @supports not selector(::-webkit-scrollbar) {
   html {
     scrollbar-color: rgba($action-button-color, 0.25)
@@ -530,13 +537,8 @@ a.sparkline {
   }
 }
 
-::-webkit-scrollbar-thumb {
-  opacity: 0.25;
-}
-
-.notification-group--annual-report {
-  .notification-group__icon,
-  .notification-group__main .link-button {
-    color: var(--indigo-3);
+.custom-scrollbars {
+  ::-webkit-scrollbar-thumb {
+    opacity: 0.25;
   }
 }

app/javascript/styles/mastodon/reset.scss

@@ -59,24 +59,26 @@ table {
   }
 }
 
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
+.custom-scrollbars {
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
 
-::-webkit-scrollbar-thumb {
-  background-color: $action-button-color;
-  border: 2px var(--background-border-color);
-  border-radius: 12px;
-  width: 6px;
-  box-shadow: inset 0 0 0 2px var(--background-border-color);
-}
+  ::-webkit-scrollbar-thumb {
+    background-color: $action-button-color;
+    border: 2px var(--background-border-color);
+    border-radius: 12px;
+    width: 6px;
+    box-shadow: inset 0 0 0 2px var(--background-border-color);
+  }
 
-::-webkit-scrollbar-track {
-  background-color: var(--background-border-color);
-  border-radius: 0px;
-}
+  ::-webkit-scrollbar-track {
+    background-color: var(--background-border-color);
+    border-radius: 0px;
+  }
 
-::-webkit-scrollbar-corner {
-  background: transparent;
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
 }

app/models/concerns/user/has_settings.rb

@@ -43,6 +43,10 @@ module User::HasSettings
     settings['web.use_system_font']
   end
 
+  def setting_system_scrollbars_ui
+    settings['web.use_system_scrollbars']
+  end
+
   def setting_noindex
     settings['noindex']
   end

app/models/user_settings.rb

@@ -24,6 +24,7 @@ class UserSettings
     setting :use_blurhash, default: true
     setting :use_pending_items, default: false
     setting :use_system_font, default: false
+    setting :use_system_scrollbars, default: false
     setting :disable_swiping, default: false
     setting :disable_hover_cards, default: false
     setting :delete_modal, default: true

app/views/settings/preferences/appearance/show.html.haml

@@ -59,6 +59,7 @@
       = ff.input :'web.disable_swiping', wrapper: :with_label, label: I18n.t('simple_form.labels.defaults.setting_disable_swiping')
       = ff.input :'web.disable_hover_cards', wrapper: :with_label, label: I18n.t('simple_form.labels.defaults.setting_disable_hover_cards')
       = ff.input :'web.use_system_font', wrapper: :with_label, label: I18n.t('simple_form.labels.defaults.setting_system_font_ui')
+      = ff.input :'web.use_system_scrollbars', wrapper: :with_label, hint: I18n.t('simple_form.hints.defaults.setting_system_scrollbars_ui'), label: I18n.t('simple_form.labels.defaults.setting_system_scrollbars_ui')
 
     %h4= t 'appearance.discovery'
 

config/locales/simple_form.en.yml

@@ -60,6 +60,7 @@ en:
         setting_display_media_default: Hide media marked as sensitive
         setting_display_media_hide_all: Always hide media
         setting_display_media_show_all: Always show media
+        setting_system_scrollbars_ui: Applies only to desktop browsers based on Safari and Chrome
         setting_use_blurhash: Gradients are based on the colors of the hidden visuals but obfuscate any details
         setting_use_pending_items: Hide timeline updates behind a click instead of automatically scrolling the feed
         username: You can use letters, numbers, and underscores
@@ -223,6 +224,7 @@ en:
         setting_hide_network: Hide your social graph
         setting_reduce_motion: Reduce motion in animations
         setting_system_font_ui: Use system's default font
+        setting_system_scrollbars_ui: Use system's default scrollbar
         setting_theme: Site theme
         setting_trends: Show today's trends
         setting_unfollow_modal: Show confirmation dialog before unfollowing someone