Dark, Darker and Light themes for Sigil

[pablogil]

Hi all,

It's my very first post in this community but I have been authoring ePubs and used Sigil for a while.

I'm also actively collaborating with FreeCAD (https://www.freecadweb.org/), as a result I have created some themes with Qt stylesheets.

I have adapted and improved them for use in Sigil

Here you have some examples, they are 24 variants in total:






Here you can download and install them: https://github.com/pgilfernandez/sigil_stylesheets

In the GitHub repository I explain it all but I would like to note here the problems I faced while creating the themes just in case Sigil developers feel like improving the theme selection and/or collaborate with me in order to include them in the official builds:

• you can just select one stylesheet. It would be nice to have a preference entry to select between a list of .qss files
• you should set a full path for all images (icons) inside the qt_styles.qss file so that they are drawn in Sigil. It would be nice that a "Preferences folder location" variable is set so that the stylesheet just writes "qss:" and Sigil changes/find them on the fly.
• inside Tools > Add cover... window there is a splitter that shows zoomed, it seems to be something hardcoded.
• as Sigil already lets user setup some colors inside Preferences > Appearance, it's kind of messy because you need to "synchronize" colors from the stylesheet with those color Preferences in order to get a final nice theme. It would be desirable that all "Code editor" colors can be accessible by Preferences > Appearance and another Preference entry let user choose between a list of UI styles (.qss files).

I hope you like them
Cheers

[KevinH]

I believe large images should be made as attachments for people to select according to the posting guidelines.

Please make that change to your post so that the moderators do not need to do it.

Thanks

[KevinH]

Interesting themes. Sigil near Sigil 1.0 moved to supporting operating system Level light and dark themes. For example, on macOS if the user changes its theme from light to dark or visa-versa, Sigil adopts the new theme on the fly. I think for Windows and Linux it requires restarting Sigil.

As a result I try to stay away from too much qss as most of the palette and styling is taken from the OS itself.

I think many Linux users might be interested.

[DiapDealer]

Originally Posted by KevinH

I believe large impages should be made as attachments for people to select according to the posting guidelines.

Please make that change to your post so that the moderators do not need to do it.

Thanks

Exactly so. 600 px on the longest side is the max for inline images. There's no such limit on (thumbnailed) attachments.

[DiapDealer]

Originally Posted by KevinH

I think many Linux users might be interested.

Sigil on Linux is already able to be integrated with existing Desktop Environment themes in a variety of ways. I change my Sigil theme all the time.

[DiapDealer]

I thumbnailed the images so they don't break the forum theme. People can enlarge them by clicking on the thumbnails.

[pablogil]

Thanks DiapDealer,

I didn't know how to setup the thumbnails.

Sadly, Windows or even macOS still don't handle correctly the dark/light auto themes and, IMHO, the OS default styles are not very nice.
With these stylesheets you can be sure that the style is applied as you like...

[KevinH]

Please then file a Sigil bug report for the macOS dark /light theme issue you are seeing that does not handle something correctly. It appears to work just fine on my macOS machines. I use it all of the time to auto switch in the evenings and mornings.
.

[DiapDealer]

I'm not really interested in shipping any extra themes with the official Sigil builds. App skinning/theme-ing is pretty niche in my opinion. We've made it possible for those who wish to obsess over the aesthetics of how the app looks, so I doubt there will be a ton of additional Sigil preferences added just to make changing themes quicker.

I'll happily to put a link pointing to your Sigil theme repository where people can find it, though.

[Tex2002ans]

Originally Posted by pablogil

Sadly, Windows or even macOS still don't handle correctly the dark/light auto themes and, IMHO, the OS default styles are not very nice.

With these stylesheets you can be sure that the style is applied as you like...

I agree, I agree. Would be nice to be able to more easily apply themes, and those look like some very nice ones you've created!

* * *

qbittorrent is a Qt-based torrent program, and they recently added a very nice option to change between custom themes:

https://github.com/qbittorrent/qBitt...stom-UI-themes
https://github.com/qbittorrent/qBitt...or-qBittorrent

It was added in v4.2.2 last year. I'm not sure exactly how it was implemented, but here was one large issue discussing their "Dark Theme":

https://github.com/qbittorrent/qBitt...ment-606253598

I believe jagannatharjun was the user who implemented that support, so his Github comments/issues might have a lot more details on the subject.

Originally Posted by pablogil

I didn't know how to setup the thumbnails.

When you're in the Advanced posting mode, you see all the buttons up top? (Bold, Italics, Underline, [...]).

Towards the middle right, there should be a little paperclip icon. You click on that to attach images.

Then you can click on the little arrow NEXT TO the paperclip in order to insert it into your actual post.

[pablogil]

Originally Posted by KevinH

Please then file a Sigil bug report for the macOS dark /light theme issue you are seeing that does not handle something correctly. It appears to work just fine on my macOS machines. I use it all of the time to auto switch in the evenings and mornings.
.

I have played with Light/Dark modes in macOS, I can tell you that they work as expected, I'm sorry about alerting you. The only "issue" I found is that the Code View color set changed but, digging inside sigil.ini, I found that there is a different set of color when the Dark mode is on, so everything's fine

I still think you could add the following colors to Preferences > Appearance > Code View > Colors:

• default text color (when any of the other text colors apply)
• Code view background color
• selection text color
• selection background text color

This way any user could create a full theme for their Code View without relaying in their OS theme or .qss stylesheet

Originally Posted by DiapDealer

I'm not really interested in shipping any extra themes with the official Sigil builds. App skinning/theme-ing is pretty niche in my opinion. We've made it possible for those who wish to obsess over the aesthetics of how the app looks, so I doubt there will be a ton of additional Sigil preferences added just to make changing themes quicker.

I meet a lot of people that usually say that open source is ugly and, just because of that, they don't want to use it... I totally disagree, of course, and try to convince them showing them that they can use skins, themes, stylesheets, etc. so that the software looks cool... and from that day they like and use them. Those people usually have Windows or macOS computers. I know too that in Linux OS, apps themes very easily get the OS look and they really look cool, but, once again it sadly it doesn't happen in Windows or macOS and the default UI is pretty raw, heterogeneous and ugly.
With all this little speech I just want to say that it is not bad to make a little room in open source software for theme customization because we never know how the app looks in other OS or, even knowing it, we don't know the user look preferences...

Originally Posted by DiapDealer

I'll happily to put a link pointing to your Sigil theme repository where people can find it, though.

Thank you very much, not just for me (I really had fun developing/tweaking them) but for all those users (or future users) that may need it to have a better experience using Sigil

Originally Posted by Tex2002ans

I agree, I agree. Would be nice to be able to more easily apply themes, and those look like some very nice ones you've created!

This is another suggestion I made, an entry inside Preferences > Appearance to set the .qss stylesheet you want to load instead of be forced to use the file called "qt_styles.qss". I might not be hard to code and it would make life easier for users (that they usually are not very skilled...)

Originally Posted by Tex2002ans

When you're in the Advanced posting mode, you see all the buttons up top? (Bold, Italics, Underline, [...]).

Towards the middle right, there should be a little paperclip icon. You click on that to attach images.

Then you can click on the little arrow NEXT TO the paperclip in order to insert it into your actual post.

Thank you very much, I will do it next time