Provide a dark theme

[Tamriel]

With the theme 'Breeze Dark' ReText looks like this:
Instead I would like it like this:

• The colours should be the same in the editor and in the preview
• The font colour should be bright, not black
• The colour for links should be e.g. cyan, not dark blue

[mitya57]

You can already tweak the colours as you like using the combination of colour schemes (for editor) and styleSheet (for HTML).

But I will try to make the default choice more smart in the next releases.

[cognifloyd]

Here's my breeze-dark.css stylesheet to make the html look better:

* { color: #eff0f1; }
a, a * { color: #2980b9; }
a { text-decoration: none; }

edit: updated stylesheeet to color subelements of a

And my editor colour scheme settings in ~/.config/ReText\ project/ReText.conf:

[General]
... snipped ...
highlightCurrentLine=true
lineNumbersEnabled=true
pygmentsStyle=native
styleSheet=/home/cognifloyd/.config/ReText project/breeze-dark.css
useWebKit=true

[ColorScheme]
codeSpans=#da4453
currentLineHighlight=#31363b
lineNumberArea=#31363b
lineNumberAreaText=#bdc3c7
marginLine=#3daee9
markdownLinks=#2980b9

Here are some screenshots of how these colors look with the doc I'm editing right now.

This shows codeSpans, lineNumber*, currentLineHighlight, and markdownLinks:

This shows pygmentsStyle=native:

And this shows the marginLine:

[igorsantos07]

I spent some time looking for options on Edit and Preferences where to change to a dark theme, and found none... Ended up at this ticket, and now I'm following any changes here.

I would suggest adding at least two color schemes to the editor, light and dark, and some guidance on how to tweak those things. I only found the color scheme thing through here :)

[Mat001]

How did you get these examples in dark? I tried breeze-dark.css as above and the editor backgound is still white. How did you set background to dark in above screenshots? Are these real or mocks?

[mitya57]

@Mat001 please be sure to add [ColorScheme] section to your ReText configuration file like in @cognifloyd’s excellent comment above.

[Blackhawke]

@Mat001 please be sure to add [ColorScheme] section to your ReText configuration file like in @cognifloyd’s excellent comment above.

And when adding [ColorScheme] doesn't work? I mean, I can manipulate the CSS file and change the preview all I want, but nothing seems to affect the editor window.

(EDIT)
To answer my own question: The reason is because the edit window is controlled by two different things. The first is a QT style sheet that must be pointed to by the appStyleSheet=~/.config/ReText project/style.css as well as the commands included in the config file.

[gcameron89777]

I've followed the steps above to try to get a dark theme:

• Changed ~/.config/ReText\ project/ReText.conf to

[General]
highlightCurrentLine=true
lineNumbersEnabled=true
pygmentsStyle=native
recentFileList=/home/doug/Documents/Notes/Work/LTV EPic Outline.md
styleSheet=/home/doug/.config/ReText\project/breeze-dark.css
useWebKit=true

[ColorScheme]
codeSpans=#da4453
currentLineHighlight=#31363b
lineNumberArea=#31363b
lineNumberAreaText=#bdc3c7
marginLine=#3daee9
markdownLinks=#2980b9

Then created a new file breeze-dark.css with

* { color: #eff0f1; }
a, a * { color: #2980b9; }
a { text-decoration: none; }

• I added this file to ~/.config/ReText\ project/ and then with the ReText app open I went to Editor > Use Webkit Renderer (True)
• I added the breeze-dark.css to the same .config dir and changed the stylesheet entry above to styleSheet=/home/doug/.config/ReText\project/breeze-dark.css

Outcome:

Was hoping to get a dark theme like in the screens in the discussion further up. How can I get to that?

[mitya57]

@gcameron89777 You need to actually change your interface style to some dark style.

As you seem to be using GNOME and not Plasma, so I will recommend the adwaita-qt package (use sudo apt install adwaita-qt to install it on Ubuntu).

To apply the theme, you have the following options:

• Run ReText with -style Adwaita-Dark command-line argument.
• Or export QT_STYLE_OVERRIDE=Adwaita-Dark environment variable.
• Or use qt5ct tool.

[gcameron89777]

Hi @mitya57 thanks for the information. I installed adwaita-qt and added a global variable to my ~/.bashrc file:

sudo apt install adwaita-qt
Reading package lists... Done
Building dependency tree       
Reading state information... Done
adwaita-qt is already the newest version (1.0-2).
The following packages were automatically installed and are no longer required:
  apt-clone archdetect-deb btrfs-tools gir1.2-geocodeglib-1.0
  gir1.2-timezonemap-1.0 gir1.2-xkl-1.0 libdebian-installer4 libfwup1
  libido3-0.1-0 libllvm8 libtimezonemap-data libtimezonemap1 python3-icu
  python3-pam rdate ubuntu-web-launchers
Use 'sudo apt autoremove' to remove them.
0 upgraded, 0 newly installed, 0 to remove and 3 not upgraded.
doug@doug-XPS-13-9300:~$ echo $QT_STYLE_OVERRIDE 
Adwaita-Dark

I then closed my shell and retext, then opened again. When I opened via Ubuntu apps menu, no change. I tried opening via the terminal only with just 'retext' and it works! May I ask a couple of follow ups?

When running retext in the terminal I got the foloowing warnings:

`Using configuration file: /home/doug/.config/ReText project/ReText.conf
libpng warning: iCCP: known incorrect sRGB profile
libpng warning: iCCP: known incorrect sRGB profile`

Do I need to do anything about those?

Is there a forum I can ask general Q's? I looked at Stack Overflow but there's no retext tag. Should I just ask Q's on the repo? My questions might be more general rather than technical?

[mitya57]

When I opened via Ubuntu apps menu, no change.

That is because ~/.bashrc does not apply to the apps menu. Try using ~/.profile as described in Ubuntu help.

libpng warning: iCCP: known incorrect sRGB profile

This was a bug in Qt WebKit which is fixed in 5.212.0 Alpha 3, see qtwebkit/qtwebkit#798. No need to do anything, just ignore it.

Is there a forum I can ask general Q's? I looked at Stack Overflow but there's no retext tag. Should I just ask Q's on the repo? My questions might be more general rather than technical?

You can ask on the repo, but better file a separate issue because this one has other subscribers.

[mitya57]

I have just pushed a commit (5343c00) with which adding custom CSS for dark themes should be no longer needed. Also earlier today I pushed retext-project/pymarkups@4536926026c830b2 which improves support for reStructuredText rendering with dark themes.

So the only remaining bit that needs to be added manually is the ColorScheme block in the configuration file.

[mitya57]

With the current version from master, there should be no need to set ColorScheme for dark themes anymore — they now work out of the box!

I used some colors from @cognifloyd's comment above — thanks a lot and I hope you don't mind.

Please help testing the new version. Any feedback is welcome.

[cognifloyd]

I don't mind. I'm glad it was useful.