Dark appearance

[Neil Hodgson]

macOS 10.14 includes a dark appearance mode. While I’m not personally a fan of dark modes, it does look better to me than earlier implementations. A future release of the macOS version of SciTE will include some dark appearance support. The system draws controls like buttons to match the user’s preferred appearance but custom controls like the tab bar and the editing area (Scintilla) will need some more work.

Here's a screenshot of SciTE running with the dark appearance:
https://www.scintilla.org/DarkAppearance.png

Recent releases of Windows also have a dark mode choice but there isn’t much support for this in applications using the Win32 API like SciTE. It should be possible to determine that dark mode is on by reading the registry at HKCU\Software\Microsoft\Windows\CurrentVersion\Themes\Personalize\AppsUseLightTheme.

I don’t know how to detect this on GTK+.

If the user changes the appearance while running SciTE then this could be detected and SciTE’s appearance updated but this may be too much trouble. On macOS, it's possible to key-value-observe the appearance setting on a view but on Windows, I don’t know of a way to subscribe to changes on a registry entry. Fixing the appearance at startup will likely be good enough.

There should be a mechanism where the colours used for different styles change between light and dark appearance. One possibility is to use SciTE’s “if” statement and provide an APPEARANCE_DARK predicate so there can be settings like this:

style.*.32=$(font.base)
style.*.37=fore:#C0C0C0,back:#FFFFFF
colour.number=fore:#007F7F
if APPEARANCE_DARK
style.*.32=$(font.base),back:#000000,fore:#FFFFFF
style.*.37=fore:#939393
colour.number=fore:#00DFDF

There could also be an APPEARANCE_LIGHT predicate or else these are just left unconditional with order determining the priority.

SciTE would be distributed with a set of dark colours built in but which could be customized by the user. The APPEARANCE_DARK would normally follow the system setting but there should also be an override property for people that want a dark editor when other applications are light or vice-versa.

macOS defines 2 other appearances: High Contrast and High Contrast Dark which are used to enhance accessibility and these could also be exposed.

Instead of using “if” statements, conditional properties could be used. These would look like:

colour.number=fore:$(if AppearanceDark,#00DFDF,#007F7F)

While I have code for conditional properties, it hasn’t been committed. They are more expensive as the test is evaluated whenever the property is read unlike “if” statements which are evaluated when the properties file text is read.

Neil

[Carlos SS]

Hi Neil!

This dark mode can obtained from a menu entry?

[Neil Hodgson]

Carlos SS:

> This dark mode can obtained from a menu entry?

On macOS, it's an option in System Preferences | General.
https://www.macrumors.com/how-to/enable-dark-mode-macos-mojave/

Neil

[Carlos SS]

Thanks!

But I was talking about Windows or Linux.

On Wednesday, October 3, 2018 at 8:54:05 AM UTC+2, Neil Hodgson wrote:

[Neil Hodgson]

Carlos SS:

> But I was talking about Windows or Linux.

For Windows: https://www.itprotoday.com/windows-server/quick-tip-how-turn-dark-app-mode-theme-windows-10-anniversary-update

On Linux, GTK+ has themes but doesn’t appear to have a dark mode that is separate from themes.

Neil

[Carlos SS]

Thanks Neil, but I was asking about a Scite menu entry, not a Windows change: not all people has Windows 10 or wants dark modes on GTK.

On Wednesday, October 3, 2018 at 8:54:05 AM UTC+2, Neil Hodgson wrote:

[Neil Hodgson]

Carlos SS:

> Thanks Neil, but I was asking about a Scite menu entry, not a Windows change: not all people has Windows 10 or wants dark modes on GTK.

Implementing a dark appearance mode on operating systems that do not support one themselves would be a lot more work. It's not something I would take on.

Neil

[Carlos SS]

Thanks for your time and for your super-detailed response!

On Wednesday, October 3, 2018 at 8:54:05 AM UTC+2, Neil Hodgson wrote:

[Alexey Danilchenko]

Hi Neil

Is this dark appearance coming to Windows version any time soon? I tries to customise SciTE manually but that leaves toolbar and menu still bright and frankly looks odd. Would be nice to have what you described with alternative dark appearance colours or at least a way to customise menu and toolbar backgrounds as well.

On Linux I guess GTK is fully skinable so it should be possible already.

Thanks

[Neil Hodgson]

Alexey Danilchenko:

> Is this dark appearance coming to Windows version any time soon?

Its unlikely. I haven’t been working on this.

Neil

[Alexey Danilchenko]

Would you then please consider adding menu and toolbar coloursto properties and make them customisable? The rest can be done with themes but the menus/toolbar stand out like a sore thumb.

 

Thanks

[Alexey Danilchenko]

After all it works very well for SciTE on macOS...

[Neil Hodgson]

Alexey Danilchenko:

> Would you then please consider adding menu and toolbar coloursto properties and make them customisable?

I do not know how to do that. Perhaps someone that thinks this is a priority can work on it.

Neil

[Neil Hodgson]

There is now some detection of the system’s dark mode and high contrast mode on Windows and GTK. These are stored into the global properties Appearance and Contrast. Appearance is 0 for light mode and 1 for dark mode. Contrast is 1 for high contrast mode or 0 for normal mode.

These may be used in properties files to choose different colours or other attributes such as making the caret wider in high contrast mode. There could be different ways of using properties but, initially, the “if” statement has been modified to take an expression and an “=“ function added to allow comparisons.

For example, the caret colour can be changed for dark mode with:
if $(= $(Appearance);1)
caret.fore=#FFFFFF

Since “if” statements are evaluated when reading properties files, a change to the Appearance or Contrast properties causes a re-read of all active properties files which is a fairly heavy operation. Its likely that users change these states rarely.

The GTK code reads the gtk-theme-name setting and treats a “-dark” suffix as dark. A HighContrast prefix sets high contrast mode and “HighContrastInverse” sets both dark and high contrast. While name matching is likely to be flakey, it is used by other applications. These are checked when a settings object receives a “notify::gtk-theme-name” signal.

The Win32 code reads the registry at HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Themes\Personalize\AppsUseLightTheme for light / dark and the SPI_GETHIGHCONTRAST system parameter for high contrast. These are checked whenever a WM_SETTINGCHANGE or WM_SYSCOLORCHANGE message is received.

The commit:
https://sourceforge.net/p/scintilla/scite/ci/09b21fe9d954ba1b350289fdbe7b16d59f7134ac/

There is no use of this feature in the default properties files as I expect that it will change further and ways to use it will also evolve.

There is no way to force a mode and its likely there should be a way for the user to control it more.

Available from the Mercurial repositories:
hg clone http://hg.code.sf.net/p/scintilla/code scintilla
hg clone http://hg.code.sf.net/p/scintilla/scite
and can be tried from
https://www.scintilla.org/scite.zip Source
https://www.scintilla.org/wscite.zip Windows executable (64-bit)

Some settings to experiment with:

# Appearance 0=light, 1=dark

if $(= $(Appearance);0)
text.back=back:#FFFFFF
text.fore=fore:#000000
text.fore.comment=fore:#007F00
text.fore.string=fore:#7F007F
text.fore.operator=fore:#000000
text.fore.other.operator=fore:#B06000
text.fore.preprocessor=fore:#7F7F00
text.fore.brace.good=fore:#0000FF
text.fore.brace.bad=fore:#FF0000
caret.fore=#000000
selection.back=#000000
selection.alpha=32
word.indicator=colour:#0080FF,outlinealpha:100,fillalpha:40
guide.indent=fore:#C0C0C0,back:#FFFFFF

if $(= $(Appearance);1)
text.back=back:#000000
text.fore=fore:#FFFFFF
text.fore.comment=fore:#80FF80
text.fore.string=fore:#FF00FF
text.fore.operator=fore:#FFFFFF
text.fore.other.operator=fore:#E08000
text.fore.preprocessor=fore:#FFFF00
text.fore.brace.good=fore:#20A0FF
text.fore.brace.bad=fore:#FF0000
caret.fore=#FFFFFF
selection.back=#FFFFFF
selection.alpha=64
word.indicator=colour:#20A0FF,outlinealpha:180,fillalpha:120
guide.indent=fore:#606060,back:#000000

# Default
style.props.0=$(text.back),$(text.fore)
# Comment
style.props.1=$(text.back),$(text.fore.comment),$(font.comment)
# Section
style.props.2=$(text.back),$(text.fore.string),eolfilled
# Assignment operator
style.props.3=$(text.back),$(text.fore.other.operator)
# Default value (@)
style.props.4=$(text.back),$(text.fore.preprocessor)
# Key
style.props.5=$(text.back),$(text.fore)
style.props.32=$(font.base),$(text.back),$(text.fore)

Neil