[FEATURE] Make text highlighting themeable too #3021

o-l-a-v · 2024-05-04T16:15:05Z

Is your feature request related to a problem? Please describe.

Would be great if text highligting/selecting was themeable too.

I've updated the built-in Dracula theme with the color codes from the official palette ( https://draculatheme.com/contribute#color-palette ), I have plans to commit it soon. But I noticed that the color used when highlighting text is not themeable.

Describe the solution you'd like

Make text highlighting themeable too.

Describe alternatives you've considered

None yet.

Additional context

I've already added a screenshot.

Output from the debug section in the settings dialog

Not relevant.

pbek · 2024-05-04T18:10:58Z

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 · 2024-05-05T09:53:10Z

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 · 2024-05-05T13:03:17Z

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 · 2024-05-05T13:18:16Z

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 · 2024-05-05T13:26:27Z

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 · 2024-05-05T13:35:21Z

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 · 2024-05-05T16:24:19Z

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. 🤔

o-l-a-v added the Type: Support label May 4, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FEATURE] Make text highlighting themeable too #3021

[FEATURE] Make text highlighting themeable too #3021

o-l-a-v commented May 4, 2024

pbek commented May 4, 2024

o-l-a-v commented May 5, 2024 •

edited

pbek commented May 5, 2024 •

edited

o-l-a-v commented May 5, 2024 •

edited

pbek commented May 5, 2024

o-l-a-v commented May 5, 2024

pbek commented May 5, 2024

[FEATURE] Make text highlighting themeable too #3021

[FEATURE] Make text highlighting themeable too #3021

Comments

o-l-a-v commented May 4, 2024

Is your feature request related to a problem? Please describe.

Describe the solution you'd like

Describe alternatives you've considered

Additional context

Output from the debug section in the settings dialog

pbek commented May 4, 2024

o-l-a-v commented May 5, 2024 • edited

pbek commented May 5, 2024 • edited

o-l-a-v commented May 5, 2024 • edited

pbek commented May 5, 2024

o-l-a-v commented May 5, 2024

pbek commented May 5, 2024

o-l-a-v commented May 5, 2024 •

edited

pbek commented May 5, 2024 •

edited

o-l-a-v commented May 5, 2024 •

edited