New Colour Themes

[vkbo]

This is a topic for discussing new colour themes with the new theme system created for 2.8.

[vkbo]

I got an idea from @HeyMyian's post in #2376 (comment), and I'm testing a theme based around a single colour.

This got me thinking if the active and inactive icon colours should also be exposed in the [Project] section of the theme.

[HeyMyian]

This got me thinking if the active and inactive icon colours should also be exposed in the [Project] section of the theme.

I think that would be great. I already edited an icon theme for my personal use in order to further de-colorize my sidebar.

[vkbo]

It makes sense since the status and importance labels will also be linked to the theme soon. I created #2382.

[vkbo]

Updated my Blue Streak theme. I agree, mono-colour (or nearly) does look nice. 😄

[vkbo]

The theme file also exclusively uses the lighter, darker and alpha syntax. It makes it a lot easier to keep the theme values matching.

[Main]
name       = Blue Streak Dark
mode       = dark
author     = Veronica Berglyd Olsen
credit     = Veronica Berglyd Olsen
url        = https://github.com/vkbo/novelWriter
license    = CC BY-SA 4.0
licenseurl = https://creativecommons.org/licenses/by-sa/4.0/

[Base]
base    = #2d2d2d
default = #cccccc
faded   = #999999
red     = #ff6666
orange  = #ff9966
yellow  = #ffcc66
green   = #99cc99
cyan    = #66cccc
blue    = #6699cc
purple  = #cc99cc

[Project]
root     = blue
folder   = default
file     = default
title    = blue:D150
chapter  = blue
scene    = blue:L150
note     = yellow
active   = blue:L150
inactive = blue:D150
disabled = faded

[Palette]
window          = base:L130
windowtext      = default
base            = base
alternatebase   = base:L180
text            = default
tooltipbase     = yellow:L140
tooltiptext     = base:D150
button          = base
buttontext      = default
brighttext      = base
highlight       = blue
highlightedtext = default:L120
link            = blue
linkvisited     = blue
accent          = blue

[GUI]
helptext  = blue:L125
fadedtext = faded
errortext = red

[Syntax]
background     = base
text           = default
link           = blue
headertext     = blue
headertag      = blue:D150
emphasis       = blue:L150
dialog         = blue
altdialog      = blue:L150
note           = blue:L150
hidden         = faded
shortcode      = blue:D125
keyword        = blue:D125
tag            = blue
value          = blue
optional       = blue
spellcheckline = red
errorline      = green
replacetag     = blue:L150
modifier       = blue:D125
texthighlight  = blue:96

[HeyMyian]

Something else I'd like to see split apart is highlightedtext. It's used as text color of selected text in the editor, and for switches in settings. Most (all?) existing light themes use a relatively dark highlight color where it makes perfect sense to use white as highlightedtext, which also looks good on switches. Using a rather bright highlight color would need a dark highlightedtext, which then looks very bad (imo) for switches.

❌ screenshot

[vkbo]

In Qt 6.6 there is a new ColorRole called "Accent" that can be used for this. It's described in QPalette::ColorRole.

I'm considering adding it to the theme file as well, but it won't work if novelWriter runs on less than Qt 6.6. novelWriter currently just populates it with the highlight colour, which is what Qt also defaults to if it isn't set.

novelWriter/novelwriter/gui/theme.py

Lines 429 to 432 in 33f4efc

	if CONFIG.verQtValue >= 0x060600:
	self._guiPalette.setBrush(QtColActive, QPalette.ColorRole.Accent, highlight)
	self._guiPalette.setBrush(QtColInactive, QPalette.ColorRole.Accent, highlight)
	self._guiPalette.setBrush(QtColDisabled, QPalette.ColorRole.Accent, grey)

[vkbo]

novelWriter is released with Qt 6.9 on Windows and MacOS, and in AppImage releases for Linux. For Debian and Fedora packages it just pulls whatever the system has, but has a lower requirement of Qt 6.4. I can eventually bump that to 6.6.

That would also help with detecting the OS switching between dark and light mode. If you have Qt 6.5 or higher, novelWriter will be notified that the OS switched colour mode, and if the theme is set to Auto mode, update accordingly. For lower versions, it only detects the OS colour mode at startup.

[vkbo]

Implementing this in pull request #2384. Note that this also updates your Primer theme files with default values for the 5 new settings. You can change them after it's merged.

I had to update these too as the tests now check that all themes are complete and up to date.

[HeyMyian]

Some more places I noticed. Maybe these colors could be split as well. I don't see a design logic why they should be hardcoded as red, blue, and orange. Specifically the red (warning?) and orange (syntax highlighting for emphasis and strikethrough might have other colors).

An idea would be to hand out three or so possible values for these elements, like icon, icon_alt and icon_alt2 (bad names).

For the formatting icons, maybe these could correspond to the syntax highlighting. Although that would become quite colorful again.

This theme stuff has really entranced me. I gotta get back to writing 😶

[vkbo]

I don't want to change the icon colouring logic at this point. However, I could provide an override setting for them, like for project icons, that would make them all the same colour. That's pretty easy to implement.

[HeyMyian]

It's for a very, very granular visual change only.

If it's easy enough I guess it's fine, but there also has to be taken into account to not overload the settings with stuff that doesn't matter. If you think this is worth it go ahead, but don't do this for me 😄

[vkbo]

After completing the blue theme, I still wanted to keep the coloured icons, but made the other colours not so vibrant to not stand out against the blue.

I am considering moving all the theming settings to its own settings dialog, since there are already quite a few of them. Adding a single option to make icons monochrome isn't a big deal.

[HeyMyian]

I love theme settings

[vkbo]

I can tell!

[HeyMyian]

Does Night Owl need to be fixed? At least in VSCode, the corresponding theme has a matching darker color in places, not a bright frame like in novelWriter. It looks really off to me especially in all kinds of settings windows.

Tomorrow Night Bright has the same problem - not sure this isn't done on purpose, at least the VSCode theme looks the sameas nW.

og *Night Owl*

fix?

*Tomorrow Night Bright*

[vkbo]

These used to be exclusively syntax themes, and the GUI theme values aren't really tuned to match. I need to tweak several of them before this is released. I've done a few rounds of that, but more is needed.

The base colour is the colour used for the document in most themes, and the window colour looks best if it's a tad lighter but not much. In these themes, the distance is too large.

[vkbo]

Made some improvements in #2396

[HeyMyian]

I put together this pink theme and a complementary dark theme:

Florescent Daydream

[Main]
name       = Florescent Daydream
mode       = light
author     = Myian
credit     = Myian
url        = https://github.com/HeyMyian
license    = MIT
licenseurl = https://opensource.org/license/mit

[Base]
base    = #ffdbe4	
default = #833559
faded   = #aa6179
red     = #da4f51
orange  = #cf7642
yellow  = #cfb45d
green   = #6ea87e
cyan    = #6eacb1
blue    = #4c76b6
purple  = #8864b1

[Project]
root     = faded
folder   = faded
file     = orange
title    = blue
chapter  = purple
scene    = red
note     = green
active   = green
inactive = #b88596
disabled = #dab9c9

[Palette]
window          = base
windowtext      = default
base            = #ffeef2
alternatebase   = #ffc7d8
text            = default
tooltipbase     = #fff0ba
tooltiptext     = #413309
button          = #ffe0ef
buttontext      = default
brighttext      = #ffffff
highlight       = #d3416d88
highlightedtext = #ffffff
link            = blue
linkvisited     = blue
accent          = #f780a4

[GUI]
helptext  = default:192
fadedtext = default:160
errortext = red

[Syntax]
background     = base:L111
text           = #691e35
link           = blue
headertext     = blue
headertag      = blue:160
emphasis       = #794fa8
dialog         = #c71b5d
altdialog      = #db2a1a
note           = #007d23
hidden         = #ac798b
shortcode      = #007d23
keyword        = #00350f
tag            = #005e1b
value          = #005e1b
optional       = #007d23
spellcheckline = #ff0000
errorline      = #005e1b
replacetag     = #007d23
modifier       = #00350f
texthighlight  = base

Florescent Midnight

[Main]
name       = Florescent Midnight
mode       = dark
author     = Myian
credit     = Myian
url        = https://github.com/HeyMyian
license    = MIT
licenseurl = https://opensource.org/license/mit

[Base]
base    = #1a0f16
default = #ccc1dd
faded   = #ac96bb
red     = #ff7b7d
orange  = #ffad6e
yellow  = #eedb94
green   = #79bd8b
cyan    = #8bcac8
blue    = #91b7ff
purple  = #b993ff

[Project]
root     = default
folder   = default
file     = orange
title    = blue
chapter  = purple
scene    = red
note     = green
active   = green
inactive = #7b6e83
disabled = #514e63

[Palette]
window          = #151622
windowtext      = default
base            = #1c1d2c
alternatebase   = #3d3753
text            = default
tooltipbase     = yellow
tooltiptext     = #4b3c08
button          = #221d35
buttontext      = default
brighttext      = #ffffff
highlight       = #8f63ad88
highlightedtext = #ffffff
link            = blue
linkvisited     = blue
accent          = #8f63ad

[GUI]
helptext  = default:184
fadedtext = default:160
errortext = red

[Syntax]
background     = #28283a
text           = #fff1fb
link           = blue
headertext     = blue
headertag      = blue:160
emphasis       = #ff9dd9
dialog         = #d9baff
altdialog      = #cecdff
note           = green:L105
hidden         = #a990ac
shortcode      = green:L128
keyword        = green:L160
tag            = green:L128
value          = green:L128
optional       = green:L105
spellcheckline = #ff4949
errorline      = green:L160
replacetag     = green:L128
modifier       = green:L160
texthighlight  = faded:64

Screenshots

[HeyMyian]

I encountered some difficulties along the way:

• Icons ignore alpha.
• highlight color is used in (too) many different contexts: as background, as text (on different backgrounds!), with different baked-in opacity. This made it incredibly finicky for me to select a color that fits most contexts and remains visually appealing. I fear I didn't catch all (see: "Locations" tab headline in the bottom right drawer).
• default is used for the sidebar icons. This got difficult when everything else fit together well and I wanted to adjust the sidebar icon color alone. Minor Major tinkering but can be worked around now that I know.
• Some variables, like base and background can't practically take transparency (I would have needed #ffffff88). base is the background color of the "Build Manuscript" window (without anything behind it), and background for the editor seems to be made out of multiple elements.
• The :D150 and :L150 functions to easily darken and lighten colors were not always the "correct" choice. In visual design, when creating darker or lighter shades of the same color, saturation should also be taken into account in most cases. It seemed very fine for the various green shades in my above dark theme though.

[vkbo]

• Icons ignore alpha.

Icons are SVG, and SVG has a separate setting for opacity. Icons should not be transparent though.

• highlight` color is used in (too) many different contexts: as background, as text (on different backgrounds!), with different baked-in opacity. This made it incredibly finicky for me to select a color that fits most contexts and remains visually appealing. I fear I didn't catch all (see: "Locations" tab headline in the bottom right drawer).

The highlight colour is a standard Qt colour that is used for many things, and on custom widgets in novelWriter it is used in similar ways for consistency. The only places there are additional transparency values is on the custom tab bar used in Preferences and similar, and on the Welcome dialog. I plan to look into reducing that transparency on my themes cleanup.

That said, I don't want to bypass the design purpose of highlight as implemented in Qt. Accent is an alternative here though. But I have never seen Qt actually use it anywhere on standard controls.

• Some variables, like base and background can't practically take transparency.

Neither should they. Transparency should be avoided as much as possible. I only added it in the first place when I added the text highlight shortcode.

• The :D150 and :L150 functions to easily darken and lighten colors were not always the "correct" choice. In visual design, when creating darker or lighter shades of the same color, saturation should also be taken into account in most cases. It seemed very fine for the various green shades in my above dark theme though.

This is a native feature of the QColor object, If you need to tune saturation, you must do so manually and use the hex colour. The intended usage of the darker/lighter feature of QColor seems to me to primarily be for creating 3D effects in buttons and frames.

[vkbo]

Anyway, the themes look very nice!

[HeyMyian]

Thanks for the explanations, makes sense.

That said, I don't want to bypass the design purpose of highlight as implemented in Qt. Accent is an alternative here though. But I have never seen Qt actually use it anywhere on standard controls.

That's fair. I only wanted to voice the difficulties I had - I felt like I was trying to solve a puzzle with like 1000 moving parts.

Neither should they. Transparency should be avoided as much as possible. I only added it in the first place when I added the text highlight shortcode.

Understood. I thought the option was here to use 😄 I'll completely remove transparency, as I don't need it anymore in the places I've used it.

[vkbo]

Understood. I thought the option was here to use 😄 I'll completely remove transparency, as I don't need it anymore in the places I've used it.

Sure, but the base colours should be solid colours. That's what I meant. But transparency should be avoided as the merged colour will vary depending on the background, so using it should be very deliberate. I've used it some places in the syntax theme to darken/lighten things in the past, but it's better to use the new lighter and darker methods instead. I'm replacing them as I come across them.

[vkbo]

LCARS theme inspired by Star Trek TNG.

[vkbo]

I've just merged #2400, so now Status and Importance labels can pick colours from the theme, or if the colour button itself is pressed and a colour picked, it goes back to "Custom", which is ye olde functionality.

I've also made pre-releases of 2.8 Alpha 1 packages with the latest changes to Launchpad.

This latest feature requires an update to the way status and importance labels store colour values in the project file, so once a project has been opened in 2.8 Alpha 1, all colour settings will be lost if the project is later loaded in a 2.7 or earlier version.

Old format:

    <status>
      <entry key="sf12341" count="8" red="100" green="100" blue="100" shape="SQUARE">New</entry>
      <entry key="sf24ce6" count="2" red="200" green="50" blue="0" shape="SQUARE">Notes</entry>
      <entry key="sc24b8f" count="3" red="182" green="60" blue="0" shape="BARS_1">Started</entry>
      <entry key="s90e6c9" count="5" red="193" green="129" blue="0" shape="BARS_2">1st Draft</entry>
      <entry key="sd51c5b" count="1" red="193" green="129" blue="0" shape="BARS_3">2nd Draft</entry>
      <entry key="s8ae72a" count="1" red="193" green="129" blue="0" shape="BARS_4">3rd Draft</entry>
      <entry key="s78ea90" count="1" red="58" green="180" blue="58" shape="STAR">Finished</entry>
    </status>

New format:

    <status>
      <entry key="sf12341" count="8" color="#646464" shape="STAR">New</entry>
      <entry key="sf24ce6" count="2" color="red" shape="STAR">Notes</entry>
      <entry key="sc24b8f" count="3" color="yellow" shape="BARS_1">Started</entry>
      <entry key="s90e6c9" count="5" color="yellow" shape="BARS_2">1st Draft</entry>
      <entry key="sd51c5b" count="1" color="yellow" shape="BARS_3">2nd Draft</entry>
      <entry key="s8ae72a" count="1" color="yellow" shape="BARS_4">3rd Draft</entry>
      <entry key="s78ea90" count="1" color="green" shape="STAR">Finished</entry>
    </status>

[HeyMyian]

While I was tweaking my contribution of the Primer themes, I concerned myself with the question of color contrast accessibility standards. Researching this, I found that the WCAG 2.x standard, on which the most popular online contrast checkers are based, is outdated. WCAG 2.x is known to judge color contrasts with a ratio, e.g. 4.5:1 or 12:1. Apparently, for specific colors/brightnesses, this system produces "passing" contrast ratios that are however very hard to read by the human eye.

The new system is called APCA and the specification is a little dense. As I understand(?) the gist of it, the minimum "readable" contrast is Lc 60, and minimum for body text is Lc 75.

An APCA contrast checker can be found e.g. here: https://contrast.tools/?tab=apca
There is also a WCAG/APCA switch to compare the two standards. For example, the default dark theme colors base #373737 and default #cccccc easily pass WCAG but technically fail in APCA.

Now, I don't know if or to which extent the novelWriter themes should be concerned with this because:

• There are many different themes the user can choose from.
• The user can set their own preferred font and font size, which effect the contrast rating.
• When foreground and background color meet the required minimum contrast, the contrast between the different syntax highlighting colors in turn might not be readily perceivable.

[vkbo]

There should definitely be themes that pass these requirements, but it also doesn't have to be all of them. I'm sure some of them do. There are at least two high contrast dark themes I know of already.

I think adding two high contrast default themes is a good idea.

Could you make a new issue for this? The text above is fine. I'm working on a bunch of accessibility-related topics. The app also has a number of issues for screen readers that I've been working on.

[vkbo]

By the way, if you're tweaking the Primer themes ...

I've merged a new feature in #2405 that adds a new syntax setting for highlighting the current line. I added some sensible defaults to your themes.

[HeyMyian]

I opened issue #2407 for this.

I saw the recent updates. I'm still sitting on my changes to the Primer themes because I didn't want to create more pull requests than necessary until they're done. Looking at ACPA last night, I've tweaked their colors again a bit (kind of a perfectionist here, nothing is ever done, etc.).

[HeyMyian]

I've created some more themes as my creative outlet. I had a lot of fun designing these 🙂 As I said, it's like finishing a puzzle with moving pieces.

You can include them in novelWriter if you like, but I'm also very happy to just leave them in my repository for people to grab on demand.

Castle by Night
Castle by Day

Basic4Tone Modern C Dark
Basic4Tone Modern C Light
(a clunkier name was not possible)

Chernozem (dark theme only) (alternative title: Black Soil)

I also made some changes to the Florescent themes for consistency and better readability.
Florescent Daydream
Florescent Midnight

[HeyMyian]

You don't even have to restart the app, since the theme is reloaded from file each time. You just have to cycle through light/dark to reload. Just in case you hadn't figured that out. 😄

Yeah I noticed 😄 I've smashed that button mercilessly. It is very helpful to have in the sidebar when developing a theme.

[vkbo]

It seems it doesn't completely clear the previous theme when you cycle. So there is a small memory leak when switching themes. Probably an issue between the garbage collectors i Python and Qt. It is supposed to delete all icons and regenerate them. I'm not sure it's significant enough to bother with. It's a few tens of kB each time.

You can see the memory diagnostics in the status bar when starting novelWriter with the --meminfo command line flag. It updates every 5 seconds.

[HeyMyian]

--meminfo

Oh, nice! Good to know. I didn't notice anything about the memory though (I have 16GB & 32GB respectively), and I smashed that button a lot. I figure it's not normal user behavior anyway.

What I did notice is that the colors in a search result are not updated when switching themes in the settings (I did that a lot, too). But again, who does that?

And this button I think is missing a color in general (red?):

[vkbo]

That button is a built-in button in the box itself and under Qt's control. I guess it defaults to one of the middle-of-the-road greys that only changes slightly between light and dark.

[vkbo]

Oh, and yeah, the search itself (if populated) is not updated. You'd have to re-run the search for that. I'm not fixing this as I am redesigning the search tool later in 2.8 when I get to #2256.

The project and novel views now use a model/view set for the content. Implemented in 2.6 and 2.7, respectively. The search tool will get the same treatment in 2.8, and all the refresh stuff will be added then.

[vkbo]

Another thing I've been thinking about is the license value in the themes. It's fair to credit the original creator, but I'm not sure their license applies to the theme file created for novelWriter when it is added there. Instead, it makes more sense that the novelWriter GPL license applies by default. I don't know if a selection of colour values are even copyrighted without the rest of their context.

[HeyMyian]

When a dark theme does not come with a complementary light theme, and I create a light theme based on the dark colors: How/should I credit the original dark theme? Should I include credit and url of the original dark theme? They technically have nothing to do with the novelWriter light theme, but I'm unsure.

Or mishmash, credit Myain, url original dark theme? I'd also just drop the two fields.

For example, Aura does not come with its own light theme but I created one for novelWriter.

Dark theme:

name        = Aura
mode        = dark
description = A beautiful dark theme for novelWriter and other apps
author      = Myian
credit      = Dalton Menezes
url         = https://github.com/daltonmenezes/aura-theme

Light theme?

name        = Aura (bright)
mode        = light
description = Purple and cyan colours based on the dark Aura theme
author      = Myian

[vkbo]

I think that's a judgement call for you. If you feel you should credit the theme you used for inspiration, then feel free, but if you feel it is your independent work (to the extent any work is independent anyway), then drop it.

You don't have to add complementary themes. It is just convenient if people want their light and dark themes to match. It makes sense that there are more dark themes than light themes since the colours are more prominent and variations stand out.

[vkbo]

By the way, I think I will drop the description field in the end. I think I instead will show a preview of the theme. Most descriptions aren't actually very helpful anyway. They're more like advertising slugs.

You also have a point about the translations, so there should be minimal text in the remaining fields too. Like the credit field should just state names which the url field can make clickable.

[HeyMyian]

You don't have to add complementary themes. It is just convenient if people want their light and dark themes to match. It makes sense that there are more dark themes than light themes since the colours are more prominent and variations stand out.

Well, now there are light themes. 😄 I came to despise yellow while making light themes. Yellow makes for such a pleasing contrast in dark themes but is an absolute %/)=§"$( on light backgrounds. Dark themes can, as you say, have so much more meaningful variation in everything.

I don't personally use light themes at all, but as you also said earlier, it's nice to have them for completeness sake.

By the way, I think I will drop the description field in the end. I think I instead will show a preview of the theme. Most descriptions aren't actually very helpful anyway. They're more like advertising slugs.

Roger that. I'm excited to see the final implementation of the new theme selection!

[vkbo]

Yellow in light themes is really tricky, yeah. I'm guessing it is because of the mix of red and green light, which is what our eyes are most sensitive to, so it becomes hard to distinguish from white which just adds a bit of blue. You get the exact opposite effect against black.

I don't use light themes much either, but if I sit on the balcony with my laptop, I need them to see anything at all.

Anyway, a larger number of themes is no longer a problem since I forced Qt to use the scrollable list for dropdowns also on Linux. The potentially huge pop-out menu never worked well at scale.

[vkbo]

First draft of "Espresso" from https://github.com/sainnhe/sonokai

[HeyMyian]

Should we drop the "Light/Dark" qualifiers from the name where they do not belong to the theme name? The dropdown as it is now should be clear enough that the user is selecting light themes here and dark themes there. I'm a bit at a loss how to name them, especially as right now the qualifiers are somewhat inconsistently applied.

An example where the qualifiers seem to be part of the theme name: "Light Owl" and "Night Owl", or "Noctis" and "Noctis Lux".
Where they aren't part of the theme name: "Everforest Light" and "Everforest Dark".

[vkbo]

Some, like "Snazzy Light" does have it as part of the name, and the "Solarized" themes are generally known by their Light/Dark suffixes, so I'm not sure. It is generally better if they have a reference to light or dark in the name of course, like "Night Owl".

I don't think it does any harm keeping them. It is easy to work with them when the file name matches the theme name too, and there we must keep the light/dark names.

[vkbo]

Up until the release of 2.8, you're free to rename your themes of course. After that, it's best to at least not rename the files, as the file name is what is used in the user config file.

[HeyMyian]

Seems good. I have another small (and last) batch of themes to put up for review soon. I'll have their names reference their respective light/dark mode.

[HeyMyian]

I couldn't stop and created 18 more themes: six dark/light pairs, two dark singles, and one quartett. The quartett was me trying to update the Cyberpunk theme but what came out had completely different vibes than the og cyberpunk, screenshots below.

How would you like me to proceed from here? Shall I present all themes with screenshots here in discussions, or shall I make another pull request and you can see which if any more themes you'd like to add?

Vivid Black Green + Vivid Black Red
Vivid White Green + Vivid White Red

[vkbo]

Sure, go ahead 😄

Yeah, leave the original Cyberpunk theme as-is. It was contributed, but has never been kept up to date. I may actually drop it since it has multiple issues. These Vivid themes are better for the same kind of look.

[HeyMyian]

Go ahead with... Discussions or Pull Request?

I think btw the author of the Cyberpunk theme wanted an @ for future releases (#1730 (comment)).

[vkbo]

I meant a PR, but 18 is a lot, so I leave it up to you. The above set seems like a good addition anyway due to the high contrast.

As for the Cyberpunk theme, I cannot keep individual people updated on changes, although I'm pretty sure I've pinged him in the past, or maybe it was the author of one of the other themes like Solarized. At least Solarized is a mainstream theme which anyone can update. If @alemvigh is around, and update for Cyberpunk would be nice. Especially now that there are so many new features.