Adding a Dark Theme to Sigil

[slowsmile]

I've just added a dark theme to Sigil -- see thumbnail.

If anyone else wants to try doing this then do the following:

* Go to Github with this link: QDarkStylesheet

* Copy all the css code on the GitHub page.

* Using any text editor like Notepad or TextMate create a new file on your desktop called "qt_styles.qss" and paste all the copied code into that new file and save it.

* Open Sigil and go to Plugins > Manage Plugins > Open Preferences Location and copy your new "qt_styles.qss" file into that directory.

* Restart Sigil.

Other dark themes you can try that work on Sigil:
DarkOrange

[arakish]

Thanks a bunch. I much prefer dark themes because they are infinitely easier on the eyes. Learned this way back in 1997 when taking a web site design class. I found a Harvard study that showed this very fact. Yet, Microsoft pushed for the "paper" look as to blind us from what they are truly doing behind our monitors... ;-P

rmfr

[slowsmile]

@arakish...I agree with what you say but don't get too excited because there are problems with the QDarkStyleSheet plugin as you'll discover. I'm currently playing with the qss styles to see if I can lighten the black background slightly in the main tab frame so that the text is more readable in html view and text view on Sigil. I'm also looking for other qss dark themes on the inet that might also work in Sigil. I'll post links to them if I can find any.

[BetterRed]

Originally Posted by arakish

Yet, Microsoft pushed for the "paper" look as to blind us from what they are truly doing behind our monitors... ;-P

Apple and MS just copied what they saw at Parc Place when they had a look at Xerox Star. Find some screen shot images from Apple Lisa, Lisa was Wozniak's baby and it pre-dated Windows by at least 5 years, also remember MS was paying GUI design royalties to Apple.

Ooops: forgot to say thank you. slowsmile

I'll wait a bit in the hope that you overcome the glitches and/or find an acceptable alternative. For me, looking at scads of CSS code is a sure-fire anaesthetic. Even if it's front ended with a GUI, as in the calibre editor, I throw up my hands saying "Can't be bothered with this glitz-n-glamour nonsense"

BR

[Thasaidon]

Hi @slowsmile

Thanks for the information and making the css availiable.

I do not like such a dark screen but I should be able to amend it to one based on soft shades of green. From what I understand green is the easiest colour on the eyes.

I will let you know how I get on.

[theducks]

Originally Posted by BetterRed

Apple and MS just copied what they saw at Parc Place when they had a look at Xerox Star.


BR

That was Xerox PARC (Palo Alto Research Center)
The company I worked for, built ~200 'Graphics Workstations' for internal use world wide. They used a Monochrome Display on the desk (the rest sat on the floor)
I think a goodly chunk of the Silicon Valley toyed with the idea the Star represented. Apple ran with it. Even the 1 button mouse

[JustinThought]

Thank you for doing this, slowsmile. I've wanted a dark theme for Sigil ever since starting to use it.

One little detail. I seldom use the --element examiner-- (not sure if that's what it's called--the little slide-up window in the preview window), but I happened to be tracking down a little formatting problem yesterday, and mine was still open. That window was not affected by your addition.

For those who are now taking this ball and running with it, please share your results with the rest of us. I'm not completely enamored with some of the colors that showed up--but I'm working in daylight right now. I'll check back later, after dark, and see if I like it better.

Many thanks!

[DiapDealer]

Just so you "themers" all know; the next version of Sigil has added the ability to define a custom user stylesheet that is applied to Preview and Book View (which cannot be styled via the .qss file). Those with the ability to compile Sigil themselves can check it out now. The rest will have to wait (hopefully no longer than the end of July). Just create a file named "custom_preview_style.css" in your Sigil Preferences directory and add your custom css to it. Sigil will load it whenever it launches.

Just remember that you're on your own should an epub's css decide to pick a fight with your custom user css.

[slowsmile]

I can confirm what DiapDealer has said. I've been playing around and altering some values in the qss file. I've discovered that it's just not possible to change any styling in Book View which is dim and almost unreadable when you use QDarkStyleSheet. And in HTML View you can only change a few styles for just the book text like background color, foreground color and font styles. But you cannot alter the styling of any of the xml or doctype headers or html tags or anything alse. So this greatly limits what you can actually do to style your document.

See example thumbnail below where I've changed just the background color, text color and some fonts(based on QDarkStyleSheet) in Sigil's main tab frame by altering a couple of style properties in the qt_styles.qss stylesheet.

[Thasaidon]

Originally Posted by DiapDealer

Just so you "themers" all know; the next version of Sigil has added the ability to define a custom user stylesheet that is applied to Preview and Book View ...... (hopefully no longer than the end of July). Just remember that you're on your own should an epub's css decide to pick a fight with your custom user css.

Whee...

Thanks for the info.

[arakish]

@Slowsmile

Yeah I found those as soon as Sigil was restarted. Easy fix though you go into Edit > Preferences > Appearance. Not that hard.

Again, thanks.

rmfr

[BeckyEbook]

@slowsmile
Oh, you forgot about the UI graphics.
QSS styles are unfortunately a more complicated matter
From the source link (github) you must also copy the "rc" folder to the preferences folder.

In Windows you need edit qss file and change all:

:/qss_icons

to

C:/Users/USERNAME/AppData/Local/sigil-ebook/sigil

Of course USERNAME is your folder name.

I can suspect that preparing a perfect dark theme is impossible without the help of Sigil programmers and probably some modifications to the source code.

E.g:
QTableView is used in Validation Resuls window and in a table with a list of installed plugins.
I have no idea how to set the independent text color in both windows, so I used the {color: #666666;}, which looks decent in both places.

I set the colors in Code View by setting custom colors (Edit > Preferences > Appearance)

I set the colors in Book View and Preview Window by a single-line custom_preview_style.css file

body {background-color: #232629; color: #EFF0F1;}

[slowsmile]

@BeckyEBook...Remember that the QDarkStyleSheet qss is only for use within python application code that uses Qt. So, in other words , the qss stylsheet and resources must be properly imported into the application code in order to work properly -- see this link. The easiest way to get this python code is just to download and install the QDarkStyle python module into your python installation from the Python Index using pip as shown here. This also means that you would have to rebuild and recompile Sigil with the Qdarkstyle module to incorporate all of it properly into Sigil.

This QDarkStyleStylesheet cannot therefore be completely and properly added manually to an existing already-built application like Sigil. This also means that adding all the icons, as you have suggested, will have no effect on Sigil's existing icons at all when you manually add and use the qss file. You can check this easily by comparing the icons on your QDarkStyleSheet Sigil version with the icons used in normal Sigil without the stylesheet. There will be no difference between them.

So copying all the QDarkStyleSheet icons into the Sigil Preferences directory, as you recommend, will not change any icons when you incorporate this stylesheet into Sigil. And so doing that will have no effect and would be a waste of time. Just copying the stylesheet code and following the instructions above in the first post is all you have to do to install it on your Sigil app. It's not perfect but it's really the simplest way to do it for now. DiapDealer, in his post above, has more or less said the same thing as I have concerning how to manually load the qss stylesheet and has also described what's coming in a future Sigil release.

[BeckyEbook]

I think there was a misunderstanding.
I did not mention icons but about user interface elements (arrows, checkboxes etc.)

After my fixes, without recompiling Sigil and without installing QDarkStyle – it works.

[Hitch]

Originally Posted by DiapDealer

Just so you "themers" all know; the next version of Sigil has added the ability to define a custom user stylesheet that is applied to Preview and Book View (which cannot be styled via the .qss file). Those with the ability to compile Sigil themselves can check it out now. The rest will have to wait (hopefully no longer than the end of July). Just create a file named "custom_preview_style.css" in your Sigil Preferences directory and add your custom css to it. Sigil will load it whenever it launches.

Just remember that you're on your own should an epub's css decide to pick a fight with your custom user css.

That will be nice, Diap. I confess, despite my initial reaction to it, I've found that I really love the green-background on the Kindle 10. It's super-easy on the eyes.

Thanks, as always, to you and Kev.

Hitch