Implement dark mode

[ezellohar]

Is your feature request related to a problem? Please describe. TeXworks is shipped with only light theme

Describe the solution you'd like I'd like the option to choose between light and dark theme natively.

Describe alternatives you've considered I've themed it myself with an external css file. There's a few issues though, which don't make this solution easy for everyone. A few icons must be replaced (arrows, close and undock buttons...). I've created the icons as png and inserted the url in the css, but for anyone else who'd like to use it, they'd need both the css and the pngs.

Also, related to icons, there's an icon I've been unable to address (and thus change it), that's the console "close button". It's styled as a QToolButton, if I change something for the class, all buttons in the interface change. Is there a way to make the close button an unique id so one can edit it alone? IF I understand correctly, it seems that the button is coded in ClosableTabWidget.cpp (please correct me if I'm wrong). Maybe adding a simple "setObjectName" could make it.

A part from this little close button bug, my dark theme is almost complete, I could share it if it could be helpful to implement a native dark theme in the app.

Additional context Add any other context or screenshots about the feature request here.

[stloeffler]

Thanks for your work. Having a dark theme (and themes in general) is definitely on the wishlist. A css is perfect for personal customizations, however, I'm not entirely sure if it would be the right way to go in general (e.g., if it would work equally well across all operating systems and their respective styles). Anyway, I'm very interested to see what you came up with (the sources, and possibly some screenshots?)

Some things (like the close button you mention) are actually "standard icons" not specific to TeXworks. So ideally they should be aware of the surrounding theme. Either TeXworks does not pull them in correctly (so they always assume a light theme), or the "standard icons" may be implemented incorrectly - in which case it's probably a Qt bug.

Regarding styling the close button, the following should work (even without a unique name):

Tw--UI--ClosableTabWidget QToolButton { background-color: red; }

The background is that ClosableTabWidget lives in the namespaces Tw and UI, and you want to style a (all) QToolButton is contains (there currently is only one). But in case there will be more in the future, I set it's object name to closeButton as requested.

[ezellohar]

Thank you for your long answer. I'll try to reply to the best.

First of all, I agree css should not be the way to go, and a theme/mode selector in-app should be the optimal choice. I know it takes a lot of time to code it (and I'm no coder myself, so don't really know how to help...), so in the meantime, I thought a css could be helpful.

I've seen that most icons are standard, but when you start customizing with the css, in some cases you have to specify an image, or it'll be replaced by a dot (that's the case of up/down arrows of scroll bars, for example). So, for a really nice dark theme using css, you'll also need a few custom pngs.

With the hint you gave me on the close button, I can now change it as a QToolButton, thanks. I wasn't able to figure out that I should have used the namespace Tw--UI.

As far as I know, there's only an item left which is problematic with a custom theme: the ruler to set the screen DPI. The background is hardcoded, so it's always white, while the numbers & the lines uses the color specified in QWidget. In a dark theme, the color attribute should be white, so that's a problem. In my theme I used #aaaaaa, a light gray, and it's visible on white. Ideally, lines&number could be hardcoded black so the QWidget color settings won't interfere.

I think there's more that could be perfected, but as it is, it's quite an usable theme. I've tried on windows though, so more tests on linux could help. At this link you have all the file I have: source (darkbg.css), a res folder with the images I had to invert (those are svg I've made with inkscape and exported in png), and a couple screenshot. The css is already commented for most entries, so you can see why I used that item. (https://drive.google.com/drive/folders/1F1TaAOLeZi76NWTCobP5wa-cgESC9JhO?usp=sharing)

Let me know if I can help in any way, I'll be more than happy to.

[jthornton-0]

@ezellohar thank you for sharing your .css file, worked perfectly for me and I really appreciate it. If anyone else comes across this (as I did looking for dark themes) then follow the steps from tex.stackexchange here to implement the .css file. Just want to add that I am very much interested in dark themes for TeXworks as a wish list and I hope to see it one day if it is possible! Thank you both.

[ezellohar]

@stloeffler would you like me to create a page in the wiki with detailed instructions on how to set up the css and other small tweaks related to a dark theme (eg changing some syntax colors)? I wrote an article on these and some other customizations on ArsTeXnica, the official publication of the Italian Tex User group, I think it could help others who want to customize the appearance of TeXworks. I would gladly help

[stloeffler]

By all means, it would be great if you could contribute some documentation. I think it's not possible to edit or send pull requests for the wiki directly, but if you attach an appropriate Markdown file I will commit it on your behalf.

[ezellohar]

Thank you Stefan. I'll begin working on it then, I'll be back when it's ready

Il giorno ven 24 mar 2023 alle ore 22:47 Stefan Löffler < @.***> ha scritto:

By all means, it would be great if you could contribute some documentation. I think it's not possible to edit or send pull requests for the wiki directly, but if you attach an appropriate Markdown file I will commit it on your behalf.

— Reply to this email directly, view it on GitHub https://github.com/TeXworks/texworks/issues/932#issuecomment-1483454932, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGJIEWLMUSFLKLZ6TWKLQ43W5YI7TANCNFSM43OBMB6Q . You are receiving this because you were mentioned.Message ID: @.***>

-- "Si dovrebbe pensare più a far bene, che a star bene: e così si finirebbe anche a star meglio." Promessi Sposi, cap. XXXVIII

[projetmbc]

Helllo.

Can someone post here a good CSS file for a TeXworks dark mode?

[BLDC888]

您好：你的来信我已收到，我会尽快处理的。