[FEATURE] Make text highlighting themeable too

[o-l-a-v]

[FEATURE] Make text highlighting themeable too

[pbek]

You could do that already with a script.

https://www.qownnotes.org/scripting/methods-and-objects.html#add-a-custom-stylesheet

QOwnNotes/src/libraries/qdarkstyle/style.qss

Lines 50 to 51 in db8a0e4

	selection-background-color:#c64a13;
	selection-color: black;

[o-l-a-v]

The feature request is about making that themeable too, as is changing dynamically with the theme.

Can a script access current theme colors? Could you set selected-background-color to say current theme foreground color? If yes: I agree scripting can semi-solve this. If no: Hardcoding a script to go along with a theme is not what I had in mind.

---

Edit: I've experimented a bit with theme and script.

Updated theme to match Dracula colors

[Export]
SchemaKey=EditorColorSchema-7d6d6248-e1c7-4d2a-b308-32c549c31e88

[EditorColorSchema-7d6d6248-e1c7-4d2a-b308-32c549c31e88]
BackgroundColorEnabled_-1=true
BackgroundColorEnabled_0=false
BackgroundColorEnabled_1=true
BackgroundColorEnabled_11=false
BackgroundColorEnabled_12=false
BackgroundColorEnabled_13=false
BackgroundColorEnabled_14=false
BackgroundColorEnabled_15=false
BackgroundColorEnabled_16=false
BackgroundColorEnabled_17=false
BackgroundColorEnabled_18=false
BackgroundColorEnabled_19=true
BackgroundColorEnabled_2=true
BackgroundColorEnabled_21=false
BackgroundColorEnabled_22=false
BackgroundColorEnabled_23=true
BackgroundColorEnabled_24=false
BackgroundColorEnabled_25=true
BackgroundColorEnabled_3=false
BackgroundColorEnabled_4=true
BackgroundColorEnabled_8=false
BackgroundColorEnabled_9=false
BackgroundColor_-1=@Variant(\0\0\0\x43\x1\xff\xff((**66\0\0)
BackgroundColor_0=@Variant(\0\0\0\x43\x1\xff\xff\xff\xff\xf8\xf8\xef\xef\0\0)
BackgroundColor_1=@Variant(\0\0\0\x43\x1\xff\xff\xff\xff\xf2\xf2\xe4\xe4\0\0)
BackgroundColor_11=@Variant(\0\0\0\x43\x1\xff\xff\xaa\xaa\xf7\xf7\xff\xff\0\0)
BackgroundColor_12=@Variant(\0\0\0\x43\x1\xff\xff\xf1\xf1\xf1\xf1\xf4\xf4\0\0)
BackgroundColor_13=@Variant(\0\0\0\x43\x1\xff\xff\xf1\xf1\xf1\xf1\xf4\xf4\0\0)
BackgroundColor_14=@Variant(\0\0\0\x43\x1\xff\xff\xf1\xf1\xf1\xf1\xf4\xf4\0\0)
BackgroundColor_15=@Variant(\0\0\0\x43\x1\xff\xff\xf1\xf1\xf1\xf1\xf4\xf4\0\0)
BackgroundColor_16=@Variant(\0\0\0\x43\x1\xff\xff\xf1\xf1\xf1\xf1\xf4\xf4\0\0)
BackgroundColor_17=@Variant(\0\0\0\x43\x1\xff\xff\xf1\xf1\xf1\xf1\xf4\xf4\0\0)
BackgroundColor_18=@Variant(\0\0\0\x43\x1\xff\xff\xfc\xfc\xe9\xe9OO\0\0)
BackgroundColor_19=@Variant(\0\0\0\x43\x1\xff\xff\xe2\xe2\xe7\xe7\xe2\xe2\0\0)
BackgroundColor_2=@Variant(\0\0\0\x43\x1\xff\xff\xff\xff\xf2\xf2\xe4\xe4\0\0)
BackgroundColor_21=@Variant(\0\0\0\x43\x1\xff\xff\xeb\xeb\xeb\xeb\xeb\xeb\0\0)
BackgroundColor_22=@Variant(\0\0\0\x43\x1\xff\xff\xf7\xf7\xf6\xf6\xff\xff\0\0)
BackgroundColor_23=@Variant(\0\0\0\x43\x1\xff\xff((**66\0\0)
BackgroundColor_24=@Variant(\0\0\0\x43\x1\xff\xff\xff\xff\xff\xff\xff\xff\0\0)
BackgroundColor_25=@Variant(\0\0\0\x43\x1\xff\xff\x44\x44GGZZ\0\0)
BackgroundColor_28=@Variant(\0\0\0\x43\x1\xff\xff\x44\x44GGZZ\0\0)
BackgroundColor_3=@Variant(\0\0\0\x43\x1\xff\xff\xff\xff\xff\xff\xff\xff\0\0)
BackgroundColor_4=@Variant(\0\0\0\x43\x1\xff\xff((**66\0\0)
BackgroundColor_8=@Variant(\0\0\0\x43\x1\xff\xff\xdb\xdb\xf9\xf9\xe5\xe5\0\0)
BackgroundColor_9=@Variant(\0\0\0\x43\x1\xff\xff\xba\xba\xbd\xbd\xb6\xb6\0\0)
Bold_12=true
Bold_13=true
Bold_14=true
Bold_15=true
Bold_16=true
Bold_17=true
Bold_24=true
Bold_8=true
FallbackSchema=EditorColorSchema-cdbf28fc-1ddc-4d13-bb21-6a4043316a2f
FontSizeAdaption_12=180
FontSizeAdaption_13=150
FontSizeAdaption_14=140
FontSizeAdaption_15=130
FontSizeAdaption_16=120
FontSizeAdaption_17=110
FontSizeAdaption_21=105
FontSizeAdaption_24=80
FontSizeAdaption_8=100
ForegroundColorEnabled_-1=true
ForegroundColorEnabled_-1000=true
ForegroundColorEnabled_0=true
ForegroundColorEnabled_1=true
ForegroundColorEnabled_10=true
ForegroundColorEnabled_11=true
ForegroundColorEnabled_12=true
ForegroundColorEnabled_13=true
ForegroundColorEnabled_14=true
ForegroundColorEnabled_15=true
ForegroundColorEnabled_16=true
ForegroundColorEnabled_17=true
ForegroundColorEnabled_18=true
ForegroundColorEnabled_19=true
ForegroundColorEnabled_2=true
ForegroundColorEnabled_20=true
ForegroundColorEnabled_21=true
ForegroundColorEnabled_22=true
ForegroundColorEnabled_23=true
ForegroundColorEnabled_24=true
ForegroundColorEnabled_26=true
ForegroundColorEnabled_3=true
ForegroundColorEnabled_31=true
ForegroundColorEnabled_4=true
ForegroundColorEnabled_5=true
ForegroundColorEnabled_6=true
ForegroundColorEnabled_7=true
ForegroundColorEnabled_8=true
ForegroundColorEnabled_9=true
ForegroundColor_-1=@Variant(\0\0\0\x43\x1\xff\xff\xf8\xf8\xf8\xf8\xf2\xf2\0\0)
ForegroundColor_-1000=@Variant(\0\0\0\x43\x1\xff\xff\0\0\0\0\0\0\0\0)
ForegroundColor_0=@Variant(\0\0\0\x43\x1\xff\xff\xff\xffyy\xc6\xc6\0\0)
ForegroundColor_1=@Variant(\0\0\0\x43\x1\xff\xff\xfc\xfc~~\0\0\0\0)
ForegroundColor_10=@Variant(\0\0\0\x43\x1\xff\xff\xa3\xa3\0\0{{\0\0)
ForegroundColor_1000=@Variant(\0\0\0\x43\x1\xff\xff\xff\xffyy\xc6\xc6\0\0)
ForegroundColor_1001=@Variant(\0\0\0\x43\x1\xff\xff\xf1\xf1\xfa\xfa\x8c\x8c\0\0)
ForegroundColor_1002=@Variant(\0\0\0\x43\x1\xff\xff\x62\x62rr\xa4\xa4\0\0)
ForegroundColor_1003=@Variant(\0\0\0\x43\x1\xff\xff\x8b\x8b\xe9\xe9\xfd\xfd\0\0)
ForegroundColor_1004=@Variant(\0\0\0\x43\x1\xff\xff\xff\xff\xb8\xb8ll\0\0)
ForegroundColor_1005=@Variant(\0\0\0\x43\x1\xff\xff\xbd\xbd\x93\x93\xf9\xf9\0\0)
ForegroundColor_1006=@Variant(\0\0\0\x43\x1\xff\xffPP\xfa\xfa{{\0\0)
ForegroundColor_11=@Variant(\0\0\0\x43\x1\xff\xff\x62\x62rr\xa4\xa4\0\0)
ForegroundColor_12=@Variant(\0\0\0\x43\x1\xff\xff\xbd\xbd\x93\x93\xf9\xf9\0\0)
ForegroundColor_13=@Variant(\0\0\0\x43\x1\xff\xff\xbd\xbd\x93\x93\xf9\xf9\0\0)
ForegroundColor_14=@Variant(\0\0\0\x43\x1\xff\xff\xbd\xbd\x93\x93\xf9\xf9\0\0)
ForegroundColor_15=@Variant(\0\0\0\x43\x1\xff\xff\xbd\xbd\x93\x93\xf9\xf9\0\0)
ForegroundColor_16=@Variant(\0\0\0\x43\x1\xff\xff\xbd\xbd\x93\x93\xf9\xf9\0\0)
ForegroundColor_17=@Variant(\0\0\0\x43\x1\xff\xff\xbd\xbd\x93\x93\xf9\xf9\0\0)
ForegroundColor_18=@Variant(\0\0\0\x43\x1\xff\xff\xf1\xf1\xfa\xfa\x8c\x8c\0\0)
ForegroundColor_19=@Variant(\0\0\0\x43\x1\xff\xff\0\0\x80\x80\0\0\0\0)
ForegroundColor_2=@Variant(\0\0\0\x43\x1\xff\xff\xfc\xfc~~\0\0\0\0)
ForegroundColor_20="@Variant(\0\0\0\x43\x1\xff\xff======\0\0)"
ForegroundColor_21=@Variant(\0\0\0\x43\x1\xff\xff\xbd\xbd\x93\x93\xf9\xf9\0\0)
ForegroundColor_22=@Variant(\0\0\0\x43\x1\xff\xff\xf1\xf1\xfa\xfa\x8c\x8c\0\0)
ForegroundColor_23=@Variant(\0\0\0\x43\x1\xff\xffPP\xfa\xfa{{\0\0)
ForegroundColor_24=@Variant(\0\0\0\x43\x1\xff\xff\xcf\xa3\xd6o\xe5\0\0\0)
ForegroundColor_26=@Variant(\0\0\0\x43\x1\xff\xff\xff\xffUUUU\0\0)
ForegroundColor_29=@Variant(\0\0\0\x43\x1\xff\xff\xff\xff\xb8\xb8ll\0\0)
ForegroundColor_3=@Variant(\0\0\0\x43\x1\xff\xff\xff\xffyy\xc6\xc6\0\0)
ForegroundColor_30=@Variant(\0\0\0\x43\x1\xff\xff\xbd\xbd\x93\x93\xf9\xf9\0\0)
ForegroundColor_31=@Variant(\0\0\0\x43\x1\xff\xff\xf8\xf8\xf8\xf8\xf2\xf2\0\0)
ForegroundColor_4=@Variant(\0\0\0\x43\x1\xff\xffPP\xfa\xfa{{\0\0)
ForegroundColor_5="@Variant(\0\0\0\x43\x1\xff\xff======\0\0)"
ForegroundColor_6="@Variant(\0\0\0\x43\x1\xff\xff======\0\0)"
ForegroundColor_7=@Variant(\0\0\0\x43\x1\xff\xff\xf1\xf1\xfa\xfa\x8c\x8c\0\0)
ForegroundColor_8=@Variant(\0\0\0\x43\x1\xff\xff\xff\xff\xb8\xb8ll\0\0)
ForegroundColor_9=@Variant(\0\0\0\x43\x1\xff\xff\xf8\xf8\xf8\xf8\xf2\xf2\0\0)
Italic_7=true
Name=Dracula (Copy)
Underline_0=true
Underline_18=true
Underline_26=true

Experimental script with hardcoded colors to go with the Dracula theme

import QtQml 2.0
QtObject {
  function init() {
    script.addStyleSheet(
      "QWidget {
        selection-background-color:#44475A;
        selection-color:#F8F8F2;
      }"
    );
    script.addStyleSheet(
      "QWidget:item:selected {
        background-color: #44475A;
        color: #F8F8F2;
      }"
    )
    script.addStyleSheet(
      "QListView, QTableView, QTreeView {
        background: #282A36;
      }"
    );
    script.addStyleSheet(
      "QListView::item:pressed, QTableView::item:pressed, QTreeView::item:pressed {
        background: #44475A;
        color: #F8F8F2;
      }"
    );
    script.addStyleSheet(
      "QListView::item:selected:active, QTableView::item:selected:active, QTreeView::item:selected:active {
        background: #44475A;
        color: #F8F8F2;
      }"
    );
    script.addStyleSheet(
      "QListView::item:selected:hover, QTableView::item:selected:hover, QTreeView::item:selected:hover {
        background: #44475A;
        color: #F8F8F2;
      }"
    );
  }
}

Learnings:

• Setting QWidget background-color also sets background color of the editor.
• Some places in the source code it's says QListView twice, probably a bug?

  • QOwnNotes/src/libraries/qdarkstyle/style.qss

    Line 995 in db8a0e4

    QListView::item:!selected:hover, QListView::item:!selected:hover, QTreeView::item:!selected:hover {

  • QOwnNotes/src/libraries/qdarkstyle/style.qss

    Line 1001 in db8a0e4

    QListView::item:selected:hover, QListView::item:selected:hover, QTreeView::item:selected:hover {

• Everything action related to script engine when running on Windows freezes up for many seconds.

[pbek]

The feature request is about making that themeable too, as is changing dynamically with the theme.

Hm, since this technically is something completely different (QML CSS Styles) from all the edit styles (QTextCharFormat in the highlighter), it will not easy to implement... 🤔 I'm not sure if I want to pull those settings into theming...

Setting QWidget background-color also sets background color of the editor.

yes, it's the background-color... selection-background-color should work tho...

Some places in the source code it's says QListView twice, probably a bug?

The CSS selectors are different 😉

Everything action related to script engine when running on Windows freezes up for many seconds.

Hm, really? Haven't heard any complaints from people using the script engine under Windows. 🤔

[o-l-a-v]

Hm, since this technically is something completely different (QML CSS Styles) from all the edit styles (QTextCharFormat in the highlighter), it will not easy to implement... 🤔 I'm not sure if I want to pull those settings into theming...

Roger roger.

yes, it's the background-color... selection-background-color should work tho...

Ok. I experimented with making the whole theme of QOwnNotes look Dracula-ish, but that will be hard if editor background can't be different from the application "frame" background.

The CSS selectors are different 😉

The exact same appears twice on the same line, is what I`m saying. Example:

• QOwnNotes/src/libraries/qdarkstyle/style.qss

  Line 995 in db8a0e4

  QListView::item:!selected:hover, QListView::item:!selected:hover, QTreeView::item:!selected:hover {

• "QListView::item:!selected:hover, QListView::item:!selected:hover, QTreeView::item:!selected:hover {"

I guess the second one should've been QTableView::item:!selected:hover? 🙂

• If yes I can make a PR.

Hm, really? Haven't heard any complaints from people using the script engine under Windows. 🤔

I can make an issue on it and try to get some relevant debug info when I got time.

[pbek]

Ok. I experimented with making the whole theme of QOwnNotes look Dracula-ish, but that will be hard if editor background can't be different from the application "frame" background.

Can't you use a CSS selector for just the editor? Something like QMarkdownTextEdit...

I guess the second one should've been QTableView::item:!selected:hover? 🙂

Why do you think so?
It's more like an upstream question...

I can make an issue on it and try to get some relevant debug info when I got time.

👍️

[o-l-a-v]

Can't you use a CSS selector for just the editor? Something like QMarkdownTextEdit...

Hmm, probably. But then the lines between script and theme are blurred, as in the script is doing some of the work a theme is supposed to do. At that point it would almost be better to include the whole theme in the script.

Why do you think so? It's more like an upstream question...

Sorry, wrong assumption on my part. Just thought defining the exaxt same thing twice is redundant.

[pbek]

But then the lines between script and theme are blurred, as in the script is doing some of the work a theme is supposed to do.

What you are doing is UI-Theming and that's what you can do with the scripting engine 😉

At that point it would almost be better to include the whole theme in the script.

Good question how hard that would be, to make that scriptable. 🤔

[github-actions]

This issue is stale because it has been open for 30 days with no activity.

[github-actions]

This issue was closed because it has been inactive for 14 days since being marked as stale.