From c57c2ca6f7ae36711cefdedd4d93470e57c87fc4 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Thu, 28 May 2026 15:01:28 +0300 Subject: [PATCH 1/2] kb(Common): Add KB for using consistent OS color mode and Telerik theme --- knowledge-base/common-dark-mode-scrollbars.md | 174 ++++++++++++++++++ 1 file changed, 174 insertions(+) create mode 100644 knowledge-base/common-dark-mode-scrollbars.md diff --git a/knowledge-base/common-dark-mode-scrollbars.md b/knowledge-base/common-dark-mode-scrollbars.md new file mode 100644 index 000000000..80770bd1d --- /dev/null +++ b/knowledge-base/common-dark-mode-scrollbars.md @@ -0,0 +1,174 @@ +--- +title: Scrollbars Not Visible on Mobile Phones and Tablets +description: Learn how to troubleshoot and fix a problem with hidden scrollbars in web browsers on touch devices like mobile phones and tablets. +type: troubleshooting +page_title: Scrollbars Not Visible on Mobile Phones and Tablets +meta_title: Scrollbars Not Visible on Mobile Phones and Tablets +tags: telerik, blazor, styles +ticketid: 1708420 +res_type: kb +components: ["general"] +--- + +## Environment + + + + + + + + +
ProductUI for Blazor
+ +## Description + +I have an issue with the visibility of scrollbars in Telerik Blazor components. While the scrollbars appear and function correctly in desktop browsers, they are completely hidden on mobile devices and tablets. This makes horizontal or vertical navigation through large datasets difficult for touch users. + +## Cause + +iOS and iPadOS use semi-transparent scrollbars and their color depends on the iOS theme: + +* Black in light mode +* White in dark mode + +The resulting scrollbars should always be gray. However, if the operating system uses dark mode and the web app uses light mode, the native browser scrollbars become effectively invisible, because they are have a semi-transparent white color on white or light background. + +## Solution + +To avoid scrollbar visibility issues on iOS devices: + +1. [Detect the operating system color mode](https://stackoverflow.com/questions/56393880/how-do-i-detect-dark-mode-using-javascript) with the help of [`matchMedia()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) and [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme). +1. [Load a consistent dark or light Telerik theme](slug:common-kb-change-theme-runtime). Note that the theme switching mechanisn in the example below is simplified and may not fit all scenarios. + +>caption Use dark or light Telerik theme, depending on the operating system color mode + +````RAZOR +@inject IJSRuntime JS + +

Browser DarkMode Active: @IsBrowserDarkMode

+ + + + + + + + + +
+ +
+ Scroll me vertically or horizontally +
+
+ +
+ Scroll me vertically or horizontally +
+
+ +
+ Scroll me vertically or horizontally +
+
+ +
+ Scroll me vertically or horizontally +
+
+ +
+ + + + + +@code { + private List GridData { get; set; } = new(); + + private bool IsBrowserDarkMode { get; set; } + + private bool DarkModeChecked { get; set; } + + protected override void OnInitialized() + { + var rnd = Random.Shared; + + for (int i = 1; i <= 27; i++) + { + GridData.Add(new Product() + { + Id = i, + Name = $"Name {i} {(char)rnd.Next(65, 91)}{(char)rnd.Next(65, 91)}", + Group = $"Group {i % 3 + 1}", + Price = rnd.Next(1, 100) * 1.23m, + Quantity = rnd.Next(0, 10000), + Released = DateTime.Today.AddDays(-rnd.Next(60, 1000)), + Discontinued = i % 4 == 0 + }); + } + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender && !DarkModeChecked) + { + DarkModeChecked = true; + IsBrowserDarkMode = await JS.InvokeAsync("detectDarkMode"); + if (IsBrowserDarkMode) + { + await JS.InvokeVoidAsync("loadDarkTheme"); + } + StateHasChanged(); + } + } + + public class Product + { + public int Id { get; set; } + public string Name { get; set; } = string.Empty; + public string Group { get; set; } = string.Empty; + public decimal Price { get; set; } + public int Quantity { get; set; } + public DateTime Released { get; set; } + public bool Discontinued { get; set; } + } +} +```` + +## See Also + +* [Change Telerik Theme at Runtime](slug:common-kb-change-theme-runtime) +* [Themes Overview](slug:themes-overview) From f30f42ce2aee420cafe7ab9161686b4bf8cb7049 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Fri, 29 May 2026 13:23:08 +0300 Subject: [PATCH 2/2] Update knowledge-base/common-dark-mode-scrollbars.md Co-authored-by: IvanDanchev --- knowledge-base/common-dark-mode-scrollbars.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/common-dark-mode-scrollbars.md b/knowledge-base/common-dark-mode-scrollbars.md index 80770bd1d..7bd29091c 100644 --- a/knowledge-base/common-dark-mode-scrollbars.md +++ b/knowledge-base/common-dark-mode-scrollbars.md @@ -39,7 +39,7 @@ The resulting scrollbars should always be gray. However, if the operating system To avoid scrollbar visibility issues on iOS devices: 1. [Detect the operating system color mode](https://stackoverflow.com/questions/56393880/how-do-i-detect-dark-mode-using-javascript) with the help of [`matchMedia()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) and [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme). -1. [Load a consistent dark or light Telerik theme](slug:common-kb-change-theme-runtime). Note that the theme switching mechanisn in the example below is simplified and may not fit all scenarios. +1. [Load a consistent dark or light Telerik theme](slug:common-kb-change-theme-runtime). Note that the theme switching mechanism in the example below is simplified and may not fit all scenarios. >caption Use dark or light Telerik theme, depending on the operating system color mode