Dark Mode: Scroll bar so dark I can barely see it

I use Dark Mode.

See the screenshot:

Can you spot the scroll bar? Difficult, isn’t it? And when it’s not at the top, it’s even harder to spot.

This distracts from my writing because too often I find myself searching for the scroll bar. This is exacerbated by being unable to use my mouse’s click-scroll function so that I don’t need to touch the scrollbar. (This is a feature I requested a couple of years ago.)

I could not find a way to change the color, which would have solved it. As a feature request, it would be helpful if the scroll bar color could be customized.

I note that this issue was raised in the Windows beta for Vers. 3 and also mentioned as an issue for the Mac.

This is not a complaint. I hope by pointing this out, Scrivener can be improved. :slight_smile:

I’ve filed this to the Windows area, as whatever the Mac does is Apple’s thing, not Scrivener. It doesn’t have themes in the same sense as Windows does.

I do agree the dark mode UI needs a lot of work. I put in some time making Scapple’s dark mode better:

So a lot of the hard work is done.

2 Likes

Thanks, Amber. I really appreciate your responsiveness. :slight_smile:

To me, it boils down to:

  1. Choose a more contrasting color/shade for the scroll bar in the Dark Mode.
  2. Allow users who wish to to customize the scroll bar color.
  3. Provide a feature common in other Windows programs, web browsers, etc.: the click-scroll function.

In a Theme, you can customize the Scrollbar to your heart’s delight:

image

2 Likes

Hmm. Several weeks ago I tried to, but didn’t think it was possible. I had customized pretty much everything else. I’ll revisit this. Thanks for the tip!

Oh, wait. In the appearance settings, there is no setting for the scroll bar color or other scrollbar attributes. Are you saying that I could save my setting as a theme file (.scrtheme), unzip it, and modify the color (and maybe other things) there? I’m off to tinker! :slight_smile:

Yes, in a Theme. You’ll have to update the QSS Stylesheet to change the colors. I have code if you want it…

2 Likes

Yes, that would be fantastic. I’ve been writing it myself, but this will save me time.

WhiteRedScroolbars.zip (232.7 KB)

The White Theme with Red scrollbars…

Njoy!

2 Likes

That was super helpful! I was able to analyze how you did that and craft CSS code that changed the scrollbar handle to the color I wanted:

Here is the code I added to the .qss file:

/* Horizontal scrollbar */
QScrollBar:horizontal {
   border: none;
   background: darkgray;
   height: 20px;
   margin: 0px 20px;
}
QScrollBar::handle:horizontal {
   background: #55007F; /* Desired hex color */
   min-width: 20px;
}

/* Vertical scrollbar */
QScrollBar:vertical {
   border: none;
   background: darkgray;
   width: 20px;
   margin: 20px 0px;
}
QScrollBar::handle:vertical {
   background: #55007F; /* Desired hex color */
   min-height: 20px;
}

It was cool that you provided those white vector files, especially that 3d gripper image for the handle. When I have some time, I’ll try adding them. Can you tell me where they go? Do I need to create the appropriate image folder, add the .svg files to it, and then include it in the .scrtheme (zipped) file?

3 Likes

Custom icons for a Theme go in an Icons folder under the application folder, where the executable is. In some circumstances they won’t load, so I have a copy of that folder in the Application Support folder, where the Themes are stored.

2 Likes

@AntoniDol, why didn’t you tell me you’ve written a book on mastering Scrivener for Windows themes?

In looking at the “Read sample” pages on Amazon, it turns out that I have the exact tools you recommend, including Visual Studio Code (which I installed a couple of days ago) and AutoHotKey (also installed just a few days ago). Plus, I’ve been thinking about learning more about the Qt framework.

I’m off to buy your book. :slight_smile:

1 Like

And you have a subreddit on this? ScrivenerThemeBuilders

Very cool. I just joined.

1 Like

This thread helped me fix the scroll bar visibility problem. But here’s a more detailed step-by-step guide so future readers don’t need to spend extra time ironing out the kinks like I did.

I should note that I’m not using Scrivener’s regular dark theme, but rather Shellnut’s DOS Terminal theme. It’s awesome, but it has the same scroll bar colour problem.

Instructions:

1 - Export your current theme, which, aside from the stupid scroll bar, you are fond of.

File > Options > Manage (lower left corner of the Options window) > Save Theme to File > write a name and hit Save

2 - Open your theme file with 7-Zip, which you should install if you don’t already have it.

Right click your new .scrtheme file > 7-Zip > Open Archive

3 - In 7-zip, you should see four files, .pal, .prefs, .qss, and .xml. You want .qss.

Right click the .qss file > Edit

4 - The .qss file should open in Notepad. Scroll to the bottom, hit Enter twice, and paste this:

QScrollBar:horizontal {
   background: black;
   padding-left: 14px;
   padding-right: 14px;
}

QScrollBar::handle:horizontal {
   background: #242424;
   min-width: 16px;
}

QScrollBar:vertical {
   background: black;
   padding-top: 14px;
   padding-bottom: 14px;
}

QScrollBar::handle:vertical {
   background: #242424;
   min-height: 16px;
}

5 - Hit Ctrl + S to save. Close Notepad.

6 - A popup will appear saying, “File ‘somethingsomething.qss’ was modified. Do you want to update it in the archive?” Click OK.

7 - Close 7-Zip.

8 - Go back to Scrivener and import your modified theme.

File > Options > Manage > Import Themes > click your theme and hit Open

*Note: I don’t know the differences between Import Themes and Load Theme From File. Importing worked for me, so I didn’t bother to try loading.

9 - Choose your theme.

Click Manage again: under the list of Predefined Themes, you’ll see a section called Custom Themes. Click your custom theme.

10 - A popup will appear saying, “Please restart Scrivener to use the new theme.” Do that.

11 - Congratulations, you have (hopefully) fixed Scrivener’s scroll bar visibility issue.

My code is based on SCN’s, but it differs in some ways:

• I got rid of a few things that, as far as I can discern, benefit nothing.

• I changed the backgrounds from darkgray to black and the scroll bar handles from #55007F to #242424 because these colours fit better with the DOS Terminal theme. Use a hex colour picker to find what you’d like.

• I got rid of the margins and added padding. The scroll bar was travelling too far, covering the scroll arrows when I was at the top or bottom of a page. I haven’t checked if this problem occurs with SCN’s code in the regular dark theme, but it definitely occurs in the DOS Terminal theme. I don’t know CSS, so troubleshooting this took me forever. Use my solution so you don’t waste time like I did.

• I lowered the min size of the scroll bar handles because I felt like it.

5 Likes

Very cool of you to share such precise steps! :nerd_face:

Import Theme - copies the .scrtheme file and places it in Scrivener’s Application Support folder. On Windows, that’s C:\Users\USERNAME\AppData\Local\LiteratureAndLatte\Scrivener\Themes. This folder is where Scrivener pulls the list of themes for menu option Window > Themes. After doing Import Theme, that theme will be in the list for you to select & load into Scrivener.

Load Theme From File - will load the selected theme into Scrivener. The .scrtheme file can reside anywhere on your device. As Load Theme does not add the theme to the App Support folder, if you switch to another theme, the original Load From theme will be dropped from the Window > Themes list.

So – Load Theme From File is the one to use if you’re testing changes to a theme. When you’re happy with your changes, then do Import Theme to get the changed theme added to the Window > Themes list.

Best,
Jim

5 Likes

I’m glad you were able to springboard off my posting about changing that pesky scroll bar color. Kudos for taking the time to document the step-by-step process.

2 Likes