Dark mode for plain text and "Unable to process type" message.

[xiota]

I would like to change in the Preview-tab the white background of txt-documents.

In those documents there is the text "Unable to process type" with white background. Could it be that a change of the background-color in Preview is not possible for those documents?

[xiota]

This should be fixed in c260464. It will be a little while before the PPA is updated.

The extra_css option now applies to the plain view. There's an included dark.css and invert.css that you can customize, or you can write your own. To refresh the css requires either restarting Geany or using the "Reload Config" button in Edit/Plugin Preferences/Preview.

I recommend developing the css rules using one of the files that's refreshed often (like markdown.css). Then when you're done, copy the rules to the file you want to use for the extra_css option.

[ralf3u]

@xiota

Now extra_css=disable shows a dark background (the background-color of sleepy pastel) in the sidebar of a txt-document. Is this the intention of the value extra_css=disable?

The new css detects whether you are using a "dark" or "light" theme. You can look inside preview-headers.css to see the details.)

But if I look in preview.conf there is this text: "disable - don't use any extra css files". So, maybe it would be better to write something like: disable - detects automatically dark or light theme of the computer system (see result in preview-headers.css)

Before I continue testing, it would be good to change first the text, else I lose orientation.

question for a better understanding In preview-headers.css I can see the color of sleepy pastel (background: #2e3436). Did you code it, or did Geany Preview detected the dark system theme and then coded preview-headers.css automatically? What if Geany Preview can't detect the system theme?

in preview.conf there is this text: dark.css - extra css file (use with the extra_css option) Maybe it would be good to write something like this: dark.css - dark.css will be created automatically when extra_css=dark.css

in preview.conf there is this text: invert.css - extra css file Maybe it would be good to write something like this: invert.css - invert.css will be created automatically when extra_css=invert.css

questions What should be the background-color of txt-documents of dark.css? What should be the background-color of html-documents of dark.css? What should be the background-color of txt-documents of invert.css? What should be the background-color of html-documents of invert.css?

If I use extra_css=disable: Why the background-color of html-documents is white?

Thank you for an answer in advance.

[xiota]

disable* - detects automatically dark or light theme of the computer system

Disable does disable extra_css. The dark/light difference is in a separate css file (preview-headers.css).

In preview-headers.css I can see the color of sleepy pastel (background: #2e3436). Did you code it, or did Geany Preview detected the dark system theme and then coded preview-headers.css automatically?

I put the sleepy pastel colors in since that is what you're using and I don't have any other dark-theme preference.

What if Geany Preview can't detect the system theme?

The detection is from the line @media (prefers-color-scheme: dark). If it doesn't work, that means your desktop environment isn't letting the webview know that you're using a dark theme. The background would then be white, like normal.

Maybe it would be good to write something like ... will be created automatically ...

It's already stated that the default files are located at /usr/share/geany-plugins/preview/ and that files that don't exist can be created. I'll think about how to clarify it.

What should be the background-color of txt-documents of dark.css?

sleepy pastel

What should be the background-color of html-documents of dark.css?

sleepy pastel

What should be the background-color of txt-documents of invert.css?

Depends on the default colors. If default is white, invert will be black. If default is sleepy pastel, invert will be off-white.

What should be the background-color of html-documents of invert.css?

Depends on the default colors and whatever css the html file is using.

If I use extra_css=disable: Why the background-color of html-documents is white?

It should be the same color as the plain text/"Unable to process" message, unless the html is using another css with different colors.

You can also edit any of the css files to customize the appearance to be how you like.

[ralf3u]

@xiota I still have problems with the text in preview.conf:

Preview can use an extra css file

is wrong because Preview is using an extra css file, namely preview-headers.css.

disable* - don't use any extra css files

is wrong, because Preview is using preview-headers.css, so it is using an extra css.
So what about the following replacement?

Thank you for an answer in advance.

[xiota]

@ralf3u I've already updated the config file. Reset/remove the old config file to see the changes. If you still don't see the changes, I probably forgot to update the PPA. I'm updating with the latest version now.

[ralf3u]

@xiota Or what about the following content?

I think that with this kind of text all users are best informed. But that would mean to change the name of the css from preview-headers.css to default.css.

What you think about that?

[xiota]

I can change it to preview.css. It has nothing to do with the extra_css setting. It is always used, like the other css files. If you want to turn it off, you'd have to replace it with an empty file.

[ralf3u]

I can change it to preview.css.

Yes, I think that preview.css is better than preview-headers.css.

What you think about the rest? I think that it is very good explained.

[xiota]

I will add a comment noting that the dark.css and invert.css will be created when first used. The folder location is already noted earlier. This section is already very long.

[ralf3u]

This section is already very long.

And what about this short version?

[xiota]

This is what I changed it to preview.conf. The PPA build queue is backlogged, so it will be a while before it's updated. I think users willing to edit a config file to set options will be able to figure it out.

[ralf3u]

If I do in the preview-headers.css in prefers-color-scheme: dark, in html, background:green (instead of background: #2e3436), then the background of txt-documents is green, while the background of html-documents is white (very simple and short html-document, without any styles).

I already saw again sometimes a flash, but a green flash (during tab-browsing or by restarting Geany).

For me the flash is not a problem any more, because to avoid the flash, I just need to use the same background-color in the html (as style or as internal or external css) like the background-color in preview-headers.css. Then there is no flash any more. So for users who use always the same background-color in them html-document, this issue can be fixed easily by having the same background-color in preview-headers.css. The flash will only appear for those users, who are using different background-colors in different html-documents. For those users, I think that this problem can't be fixed.

If I use extra_css=disable: Why the background-color of html-documents is white?

It should be the same color as the plain text/"Unable to process" message, unless the html is using another css with different colors.

The answer is not right. I can not imagine that preview-headers.css can have an influence on a html-document. This is definitively not possible. There is only one exception: If preview-headers.css is mentioned within the html-code as external css.

[xiota]

The plain view and html should be the same if no other css files are being used. Since I use a light theme, the dark mode doesn't get tested very much.

I found another bug that was affecting css loading. It's fixed and pushed to the PPA. It will be available when it finishes building, but may be a while. The launchpad site has been glitchy/slow, possibly traffic from people updating to 21.10.

After updating, please reset/delete the old config and css files before testing. Geany will have to be restarted. Rebooting the entire computer should not be necessary. When switching from light to dark desktop theme or vice versa, logging out of the desktop may be necessary (may have been causing me issues before). (I'll add this info to the questions doc later).

[ralf3u]

Since I use a light theme, the dark mode doesn't get tested very much.

When I was young, I didn't like dark theme. Now I use dark theme. I recommand to everyone to use dark theme from the start in all programs to reduce stress for the eyes.

[ralf3u]

@xiota

You wrote in your last comment:

The plain view and html should be the same if no other css files are being used.

But I already wrote:

This is definitively not possible.

Personally I don't like the idea that a css of Preview could have an impact on the html-webpage that I program, even if it is not possible. I would like to see how the real webpage looks like. When I started to use Preview I wanted to use dark theme in Preview specially for the txt-documents. Later I had the idea of an auto-hide-sidebar. Then I used the css to avoid the flash. In case the flash is not there any more (at the moment I don't see a flash any more), then I don't need the dark theme any more, and no css, because I can add dark theme with style within the html-document. So, I added in the picture down below the line: disable - No use of a css.

So, in my case I would use "extra_css=disable", disable in the meaning not to use a css at all.

What you think about that?

For me it is not important to implement this idea, because I will delete the content of preview.css anyway to be sure that preview.css will have no influence on the webpage.

Thank you for an answer in advance.

[xiota]

format: markdown

The plain view and html should be the same if no other css files are being used.

But I already wrote:

This is definitively not possible.

The way it is programmed is for preview.css to apply to the webview generally. That is how it functions on my computer. I do not know why it is different on your computer. The HTML document I tested contains:

<html>
<head>
</head>
<body>
<p>Nothing here.</p>
</body>
</html>

I would like to see how the real webpage looks like.

The WebKit2GTK component displays pages differently from both Chromium and Firefox, even though the rendering engine is related to the one used by Chromium. So I recommend that you check your pages in a real browser.

No use of a css.

All modern browsers have a default style. It is just hidden from the user. That is why pages look different in different browsers.

I'll move the @media rules to a different file. The rest of the preview.css is written to not conflict with other styles. It is not an extra css file. It is used for email-style headers. That's why it was originally named preview-headers.css.

I will delete the content of preview.css anyway to be sure that preview.css will have no influence on the webpage.

Okay.

[ralf3u]

The HTML document I tested contains:

If you add <!DOCTYPE html> in the first line, then the background is white.

[xiota]

If you add <!DOCTYPE html> in the first line, then the background is white.

Okay. I'm not going to test it because it's troublesome to switch to a dark theme and I'm going to move the @media rules to a different file.

[ralf3u]

But then, how can the background-color be customized?

The @media rules will be in a file called extra-media.css, which will be the default setting for extra_css. The other files will be renamed extra-dark.css and extra-invert.css. Then extra_css=disable won't use any of the rules. This is basically what you requested earlier with different file names.

preview.css will contain only rules for headers which have class names intended to avoid clashing with other rules. (They will apply to only pre tags with class="geany_preview_headers".)

The change is already pushed to the PPA. It will be available when it finishes building.

[ralf3u]

The rest of the preview.css is written to not conflict with other styles.

preview.css will contain only rules for headers which have class names intended to avoid clashing with other rules.

Just for interest, do you have an example for "conflict with other styles" because I have no idea of how a conflict looks like?

[xiota]

do you have an example for "conflict with other styles"

The other style would need to use pre tags with classes that have the exact same name geany_preview_headers. That should be pretty unlikely unless someone is intentionally making a stylesheet for this plugin.

[ralf3u]

There is no flash any more, but there is still one small issue: If I reopen Geany where a html-document is in focus, for a part of second there is a gray background in the sidebar in the Preview-tab (it is not the background-color of sleepy pastel). It would be great if this background-color could also be customized, so that the gray background will not be visible any more.

[xiota]

for a part of second there is a gray background in the sidebar (it is not the background-color of sleepy pastel).

I see a similar appearance with the light theme. It is either the default state of the webview before any styles are applied or the background window before the webview appears.

It would be great if this background-color could also be customized, so that the gray background will not be visible any more.

If it is the default state of the webview, there is nothing that can be done because the way to change it is with the extra_css file, but it appears before the extra_css can be applied.

If it is the window background, then it is set by your desktop theme. It might be possible to change, but would probably cause new problems.

[ralf3u]

@xiota

for a part of second there is a gray background in the sidebar in the Preview-tab

For transparency and structure reasons I just opened a new issue, the issue number 7. If you want, you can copy your answer from above and paste it as answer there.

[ralf3u]

@xiota The documents dark.css and invert.css are not created any more.

[xiota]

You may need to reset the config file. Try extra-dark.css and extra-invert.css.

[ralf3u]

You may need to reset the config file. Try extra-dark.css and extra-invert.css.

I reseted the config file and I tried extra-dark.css and extra-invert.css. The documents extra-dark.css and extra-invert.css are not created.

[xiota]

The documents extra-dark.css and extra-invert.css are not created.

Thanks for letting me know. Just pushed an update to the PPA.

[ralf3u]

issue a In the comments there is this text: Included css files (dark.css, invert.css) will be created when first used. It should be like this: Included css files (extra_dark.css, extra_invert.css) will be created when first used.

issue b It seems to be that extra-media.css is now default. But then the media rules should be deleted in preview.css.

issue c If there is an html-document without <!DOCTYPE html>, then dark theme is respected with extra_css=extra-media.css and with extra_css=extra-dark.css. But both should also work when <!DOCTYPE html> is in the the first line of an html-document.

question If I understood it right, even if I select extra_css=disable, neverthelesss preview.css will be active. Now if I delete the whole content of preview.css what is the disadvantage for me?

[xiota]

In the comments there is this text... It should be like this... ...the media rules should be deleted in preview.css.

They are already updated. You need to delete the old css files and reset the config file.

If there is an html-document ... <!DOCTYPE html> ...

That is out of my control.

If I understood it right, even if I select extra_css=disable, neverthelesss preview.css will be active. Now if I delete the whole content of preview.css what is the disadvantage for me?

Files with email-style headers won't have the header styling.

[ralf3u]

It is used for email-style headers

I think it would be good to mention it in preview.css, at the top as comment, so users are informed, so something like: this document is used for the style of email headers

If there is an html-document ... <!DOCTYPE html> ...

That is out of my control.

I think it would be good to mention it in extra-media.css (a) and in extra-dark.css (b) as comment on top of the css, so users are informed, so something like: (a) media rules works in html-documents, when the first line starts with <html> instead of <!DOCTYPE html> (b) dark theme works in html-documents, when the first line starts with <html> instead of <!DOCTYPE html>

[xiota]

@ralf3u I found a workaround. Try this:

<!DOCTYPE html>
<html>
<head><style></style></head>
<body>
<p>This is a test.</p>
</body>
</html>

If the document has another stylesheet, even if it is empty, the webview will use the rules in extra-media.css. I've updated the plugin to insert an empty style if another one isn't already present. The PPA has been updated.

Reminder: Even when I don't modify styles or html, the webview and web browsers do not render documents the same. If exact formatting and behaviors (like scripting) matter, check your documents in real web browsers.

[ralf3u]

If the document has another stylesheet, even if it is empty, the webview will use the rules in extra-media.css.

That's cool! Now it works perfect for everyone's need.

But I still think that it would be good to mention in preview.css, at the top as comment, so users are informed, so something like: this document is used for the style of email headers.

[xiota]

I still think that it would be good to mention in preview.css, at the top as comment

It is mentioned in the config file, and the name of the rules say "header" in them. I will add more details to the questions document later.

[ralf3u]

It is mentioned in the config file

I see it now. I forgot to scroll upwards. But why there is in the comments an empty line before and after preview.css?

[xiota]

But why there is in the comments an empty line before and after preview.css?

There doesn't have to be.

I'm going to update xi/tweaks later. When I'm done, you can use css like the following in geany.css:

notebook header tabs > * {
    outline-width: 0;
}

#geany-xitweaks-sidebar-page-focus {
    border-width: 3px;
    border-style: solid;
    border-color: #393;
}

#geany-xitweaks-sidebar-page-unfocus {
    border-width: 3px;
    border-style: solid;
    border-color: transparent;
}

#geany-preview-sidebar-page {
    background: #2e3436;
}

Also, I think you don't have to copy the contents of /usr/share/geany/geany.css.

[ralf3u]

I just updated the system.

issue 1 There is still in preview.conf an empty line before and after preview.css, although I think it is not necessary.

issue 2 In geany.css the background of geany-preview-sidebar-page is not respected any more.

issue 3 In the code in comment https://github.com/xiota/geany-preview/issues/2#issuecomment-956280646 I think you forgot to mention geany-xitweaks-sidebar-tab-focus.

issue 4 Now there are no small white points around the tab-title Preview. But the problem is now: There is a colored border around the content of the tabs of the sidebar in different colors. So I deleted geany-xitweaks-sidebar-page-focus and geany-xitweaks-sidebar-page-unfocus. And now there is not a colored border any more around the content of the tabs of the sidebar in different colors.

[xiota]

There is still in preview.conf an empty line before and after preview.css, although I think it is not necessary.

Preview has not been updated. I'm going to wait for more substantial coding changes before updating it.

In geany.css the background of geany-preview-sidebar-page is not respected any more.

Try adding the background to the #geany-xitweaks-sidebar-page-unfocus. Styling the page when it has focus messes up other styling.

There is a colored border around the content of the tabs of the sidebar in different colors. So I deleted geany-xitweaks-sidebar-page-focus and geany-xitweaks-sidebar-page-unfocus. And now there is not a colored border any more around the content of the tabs of the sidebar in different colors.

You had previously stated: "The focus should not be on the tab-title but on the content of the tab."

[xiota]

You can read more about GTK CSS at CSS Overview and CSS Properties. Look in /usr/share/themes for example gtk.css files.

The following rule gets rid of the outline:

notebook header tabs > * {
    outline-width: 0;
}

You can add properties to customize the sidebar tabs and pages.

#geany-xitweaks-sidebar-tab-focus {
}
#geany-xitweaks-sidebar-tab-unfocus {
}
#geany-xitweaks-sidebar-page-focus {
}
#geany-xitweaks-sidebar-page-unfocus {
}

The following is for the preview page only, but it gets over-written when the focus feature is enabled.

#geany-preview-sidebar-page {
}

[ralf3u]

You had previously stated: "The focus should not be on the tab-title but on the content of the tab."

I think there is a misunderstanding. The citation is inserted out of the context. What I wrote was this:

possible solution The focus should not be on the tab-title but on the content of the tab.

The original intention was to avoid the white points. And for that a possible solution could be to put the focus on the content. So, I'm not interested in this goal: "The focus should not be on the tab-title but on the content of the tab." I'm interested in this goal: No white points around the tab-title of the sidebar.

The following is for the preview page only, but it gets over-written when the focus feature is enabled.

Does that mean that I can use either geany-xitweaks-sidebar-tab-focus or geany-preview-sidebar-page, but not both at the same time?

[xiota]

@ralf3u Whatever the issue, you should now be able to style the tabs and pages however you like. If you don't want to style the pages, just leave those rules out.

[xiota]

Does that mean that I can use either geany-xitweaks-sidebar-tab-focus or geany-preview-sidebar-page, but not both at the same time?

Doesn't the background of the preview page only need to be active when Geany is first started? Can you set the unfocused style to match the preview page style?

[ralf3u]

The following is for the preview page only, but it gets over-written when the focus feature is enabled.

Doesn't the background of the preview page only need to be active when Geany is first started? Can you set the unfocused style to match the preview page style?

Did I understand it right:

question 1 Can use either geany-xitweaks-sidebar-tab-focus or geany-preview-sidebar-page, but not both at the same time?

question 2 So, instead of using geany-xitweaks-sidebar-tab-focus and geany-preview-sidebar-page, because the last one gets over-written, it is better to use geany-xitweaks-sidebar-tab-focus and geany-xitweaks-sidebar-page-unfocus?

[xiota]

So, instead of using geany-xitweaks-sidebar-tab-focus and geany-preview-sidebar-page, because the last one gets over-written, it is better to use geany-xitweaks-sidebar-tab-focus and geany-xitweaks-sidebar-page-unfocus?

On my computer, it works fine. There may be a race condition on your computer. If it works on your computer with them both set, I'd rather leave it alone since this feature was very difficult to the point it is now.

[ralf3u]

I added in the original geany.css those three values:

#geany-xitweaks-sidebar-tab-focus {
    color: #46af41;
}

notebook header tabs > * {
    outline-width: 0;
}

#geany-xitweaks-sidebar-page-unfocus {
    background: #2e3436;
}

On this webpage https://github.com/xiota/geany-preview/blob/main/docs/CQA.md to the question "When Geany is first started, the tab is gray before the first Preview is generated. Is there any way to change the color?" the code should be changed from geany-preview-sidebar-page to geany-xitweaks-sidebar-page-unfocus.

Now, I can't find an issue any more. It's perfect. Thank you so much for this feature.

[xiota]

On this webpage... the code should be changed...

The page mentions the #geany-preview-sidebar-page rule because that is the one implemented in the preview plugin. The other one goes with a different plugin.

Now, I can't find an issue any more. It's perfect.

Glad it's finally working. Thank you for testing the plugin and providing feedback.

[ralf3u]

steps to reproduce: 1: open an html-document 2: editor is in focus 3: with the mouse: click in the content of the Preview-tab

result: "Preview" is not green expectation: "Preview" should be green

remark: same problem for all other tabs of the sidebar

my settings in geany.css:

#geany-xitweaks-sidebar-tab-focus {
    color: #46af41;
}

notebook header tabs > * {
    outline-width: 0;
}

#geany-xitweaks-sidebar-page-unfocus {
    background: #2e3436;
}

[xiota]

I've already looked through all the signals a few times searching for signals that will work for this feature. I don't know what else to try.

[ralf3u]

I've already looked through all the signals a few times searching for signals that will work for this feature. I don't know what else to try.

So, unfortunately it seems to be that issue number 5 ("when sidebar is in focus: visible effect of the tab") can't be fixed completely.

issue a In xittweaks.conf there is menubar_hide_on_start=true. But if in Geany I hide the menubar and I restart Geany, then the menubar is visible. These are my settings:

menubar_hide_on_start=true
menubar_restore_state=false
menubar_previous_state=true

issue b By pressing the shortcut, now the tab-title is in focus. Days before the white points appeared for the first time, I'm sure that the content was in focus. And then later I wrote here on this webpage that for me it does not matter if tab-title or the content is in focus. But now I realized that it is much better if the content is in focus when the shortcut toggle editor/sidebar is pressed. Could you please change it like before, so that when the shortcut toggle editor/sidebar is pressed that not the tab-title "Preview" is in focus but the content of the Preview-tab?

issue c I don't know what happened, but since yesterday if I press the shortcut toggle editor/sidebar, "Preview" is not green any more. Same when I click on the tabs of the sidebar: The tab-titles are not green any more, although in xittweaks.conf there is sidebar_focus_enabled=true. And also the white points are back in the tab-titles of the sidebar, although in geany.css there is the same code like https://github.com/xiota/geany-preview/issues/2#issuecomment-958176069. And with the same code I can see again the gray background when restarting Geany. And this can't be fixed by replacing the code with this code:

#geany-preview-sidebar-page {
    background: white;
}

Thank you for an answer in advance.

[xiota]

But if in Geany I hide the menubar and I restart Geany, then the menubar is visible.

I've updated the PPA. After installing, please reset the config file, and re-enter your preferences from scratch.

Also, when you're done editing the config, reload the settings from the menu. Otherwise, the plugin will overwrite your changes with the old settings when Geany shuts down. (I'll move the settings that need to be saved on shutdown to a different file in a future version.)

Could you please change it like before, so that when the shortcut toggle editor/sidebar is pressed that not the tab-title "Preview" is in focus but the content of the Preview-tab?

If I understand what you're asking, you can do it by clearing out the old rules in geany.css. Then try the following:

notebook header tabs > * {
    outline-width: 0;
}

#geany-xitweaks-sidebar-tab-focus {
    font-weight: bold;
    color: #46af41;
}
#geany-xitweaks-sidebar-tab-unfocus {
    /* Whatever you want */
}

#geany-xitweaks-sidebar-page-focus {
    border-width: 3px;
    border-style: solid;
    border-color: #46af41;
}

#geany-xitweaks-sidebar-page-unfocus {
    border-width: 3px;
    border-style: solid;
    border-color: transparent;
    background: #2e3436;
}

#geany-preview-sidebar-page {
    border-width: 3px;
    border-style: solid;
    border-color: transparent;
    background: #2e3436;
}