Feature Request: Dark Mode/Theming

rodalpho commented 6 years ago

I find the bright white hard on the eyes, and would appreciate a lower-contrast dark mode with light grey text on a dark background.

Solarized dark is really nice: http://ethanschoonover.com/solarized

As is Monokai: https://atom.io/themes/monokai-neo-syntax

And City Lights: https://atom.io/themes/city-lights-syntax

And Seti: https://atom.io/themes/seti-syntax

smaragdus commented 6 years ago

@Mikescher

Question

Currently AlephNote (as of version 1.6.10) supports 6 themes:

Default
High Contrast (Black)
High Contrast (White)
Monokai Neo
Solarized Dark
Solarized Light

Is there a way to use other themes?

Mikescher commented 6 years ago

Ah yeah, that's the primary reason for issue #32, I wanted to write a wiki entry on how to use the theme editor...

These 6 themes are only the few I created, but the system is actually flexible enough to create more (they are just files in the /Themes/ folder). Until there is a proper tutorial I can give you a short introduction here:

Disclaimer: It's almost midnight here - so don't expect literary masterpiece...

Introduction

First there is the "default.xml" file. This is the base theme file and should never be changed. All other themes kinda use this file as the base and just modify some values.
The themes are under the hood plain key-value sets, you have a bunch of identifier that correspond to different part of the UI and you can change their values (most of the time colors, brushes or numerical values).

Folder structure

As I said previously all themes must be placed in the /themes/ subfolder and must have the extension xml.
And just to be nice I named all files lowercase-only and without whitespaces.

File structure

The theme files are XML files grouped into 3 parts:

Part 1 <meta> contains a few meta information about the theme (author, name, version ...). You can alsoo specify here with which version of AlephNote this theme works, the syntax is the same that node.js uses
Part 2 <ref> here you can specify "constants". These valuerefs cannot be changed later and can only be used in this specific file (you reference them with an @)
Part 3 <data> is the meat of the file. Here you specify the properties you want to change. Because default.xml is the master file it needs to have all available properties and you can simply look at it to see the possible property names. You can group stuff under <data> into groups (and sub-groups), this does not have any effect other than a more organized file, while parsing all tags <group> are ignored and flattened.

The existing theme files should give a good overview about the syntax and the structure

Syntax

The basic syntax is xml and pretty self-explanatory. In the value field you can write different values (ore value references):

Write numerical integer values by writing the number, e.g. value="1"
Write numerical float values by writing the number with a decimal point, e.g. value="1.5"
Write color values by writing the Hex color code together with a pound sign, e.g. value="#FFC355"
You can also write short color codes e.g. value="#F35" which is equal to value="#FF3355"
You can also write full color codes (with alpha channel) e.g. value="#FFC35580" which has 50% alpha
Write complex vertical gradients as a list of colors and percentage values (this means at position=0 it has color-A, at position=0.5 color-B and at position=1.0 color-C). E.g.: gradient-v://0.25:#FFF6F6F6|0.25:#FFEAE8E8|0.80:#FFDCD9D9|1.00:#FFFFFFFF. Always specify start-color (position=0.0) and end-color (position=1.0)
There are also horizontal gradients with the same syntax (except gradient-h)
You can reference refs by writing "@"+identifier. But you can only use refs from the current file. (Obviously the type of valueref must match)
At last you can also reference other properties by writing "$"+propertyname. This means property-A gets the value of property-B. These are called indirect properties.

Indirect properties are the interesting part of this system. While <valuerefs> are resolved eager (= as soon as possible), indirect properties are resolved lazy (= as late as possible). In practice this means if in the "default.xml" the property window.tageditor.popup:foreground is indirect set to the property of window.foreground you only need to change window.foreground in your theme file (remember you theme file is using default.xml as master and only overriding the already existing theme) to change both properties in effect.

This method (indirect properties) allows the theme files to change only a few properties and a lot of other properties get automatically adjusted. But if you want you can of course always change these other properties in your theme file to something completely different.

The theme editor

If you have now mentally given up, don't worry :). There is an interactive theme editor in AlephNote where you can simply write the xml and see the changes live.

First you need to start AlephNote.exe with the parameter --debug. Then you should get a new menu entry "debug" with a sub-entry "Show interactive editor"

Clicking it opens the interactive theme editor:

In the top left corner you can select a theme [1], or create a new one [2].

After you selected your theme you can see on the right side [3] the XML content of the theme file, here you can edit your theme (syntax-highlighting inclusive).

On the left side [4] is a list of all available properties, their default value and their value under your theme. If the value in your theme is unchanged they are grayed out a little bit.

The really useful feature of the theme editor is the preview function [5]. By clicking on [Preview] you apply your current theme to AlephNote and can directly preview it.
If there are any problems/errors in the theme file they will be displayed in the output box [6].

Btw: Don't forget to save your changes - there is currently no "Do you want to save" messagebox.

Warnings

You probably guessed it when you started AlephNote with the --debug flag. The theme editor and custom themes in general are not totally battle-tested so perhaps expect some rough edges here and there. But if you find anything that doesn't work / or really needs improvement tell me, I'm currently the only one using the theme editor.
The same is true for missing properties, I tried adding all UI values I found (or all I needed for the existing themes) but chances are good there are some parts that are currently not theme-able.

Also if that wall of text hasn't scared you off completely and you really end up creating a theme file please send a pull-request / create an issue / simply send the file or something like that. I would love to add more themes.

Greetings
~ Mike

smaragdus commented 6 years ago

@Mikescher

Thank you very much for the extremely detailed and helpful answer- this is really an extraordinary post! I may play with the theme editor when I have time. I asked this question because of the 6 current themes I really like (and use) 2- Default and Monokai Neo, the Solarized ones are so-so (perhaps I am too much used to these themes from other programs) while the High Contrast ones are not for me. As I said above I may try the theme editor but I do not expect good results. Was it very time-consuming to port the current themes to AlephNote? Do you plan also to port City Lights and Seti themes suggested by user rodalpho? I suppose that most users do not care for themes but for me it is refreshing to change themes from time to time, this changes the whole look and feel of the program. So far I haven't come across any issue using the Monokai Neo theme, if I encounter any problem I will report it as usual.

Off-topic

By the way I added AlephNote to The Portable Freeware database:

forum announcement database entry

I like AlephNote, I find it very useful, it has evolved a lot and I would like that more users discover it and enjoy it. Thank you for your great work.

Mikescher commented 6 years ago

I asked this question because of the 6 current themes I really like (and use) 2- Default and Monokai Neo, the Solarized ones are so-so (perhaps I am too much used to these themes from other programs) while the High Contrast ones are not for me

Yeah, the high contrast ones were a bit of a test if I can only use two colors for everything.

Was it very time-consuming to port the current themes to AlephNote

I think the actual porting wasn't time consuming (especially not for the Solarized ones, because they have a really great documentation).

Do you plan also to port City Lights and Seti themes

Not for the next version, I'm currently a bit busy - but If noone else does it I will keep it on my agenda

By the way I added AlephNote to The Portable Freeware database:

Thanks, yeah there are currently 61 people using AlephNote (perhaps more if they have disabled the anonymous-statistics setting), a three-digit number would probably a bit more .... motivating :).

I like AlephNote, I find it very useful, it has evolved a lot and I would like that more users discover it and enjoy it. Thank you for your great work.

Thanks for the nice words :)

smaragdus commented 6 years ago

@Mikescher

Thanks, yeah there are currently 61 people using AlephNote (perhaps more if they have disabled the anonymous-statistics setting), a three-digit number would probably a bit more .... motivating :).

Count them 62- I have disabled "Send anonymous statistics"- call me paranoid but I always disable any form of tracking when it is possible. I suppose the real users may be more than 100- it is likely that at least 1/3 of AlephNote users might have disabled sending statistics- as of today (2018-03-27) Softpedia shows 1030 downloads. Does GitHub provide any statistics for the number of downloads per version?

Regards

Arty2 commented 5 years ago

@Mikescher

I have been using ResophNote with Simplenotes for several years, and I am really impressed with your work and the configurability it allows, kudos! I've been periodically looking for other clients and only now it popped up in my radar, it appears very mature in terms of developement and feature set.

Looking into the theming options, it appears that the scrollbars cannot be themed? Perhaps enabling / disabling the display of the scrollbars could be used as a workaround, provided scroll button or touchpad functions are not hindered.

Mikescher / AlephNote