Eclipse Community Forums: Eclipse 4 » Specify theme-specific preferences via CSS

Home » Eclipse Projects » Eclipse 4 » Specify theme-specific preferences via CSS(How to update UI preferences when the user switches to dark theme)

Show: Today's Messages :: Show Polls :: Message Navigator

Specify theme-specific preferences via CSS [message #1818562]

Thu, 19 December 2019 16:44

Emmanuel Chebbi

Messages: 123
Registered: February 2018

Senior Member

I am trying to automatically change the colors of my Xtext editor when the user switches to dark mode [1] but did not succeed so far. According to this newsletter [2] it is possible to ask the CSS Engine to automatically updates preferences according to Eclipse IDE's theme but I can't make it work, even on simple use cases.

Here is what I tried:

Contribute to the org.eclipse.e4.ui.css.swt.theme extension point

<extension
         point="org.eclipse.e4.ui.css.swt.theme">
    <stylesheet
          uri="css/dark-theme.css">
       <themeid
             refid="org.eclipse.e4.ui.css.theme.e4_dark">
       </themeid>
    </stylesheet>
</extension>

Link the following CSS file

IEclipsePreferences#my-custom-preference-node {
	
	preferences:
		'myPref=someValue'

}

Open an Eclipse IDE runtime

Call the following code:

System.out.println(InstanceScope.INSTANCE.getNode("my.custom.preference.node").get("myPref", "nothing"));

Switch to dark theme
Call the code again

Sadly, "nothing" is shown both time, indicating that the preference specified in the CSS file is not used. I tracked down some relevant bugs on Bugzilla [3, 4, 5] but still can't figure out why my experiment doesn't work. So, before I fill a new bug, may some of you know if I am facing a bug, if I made a mistake or if I am expecting a behavior that is actually not handled by the extension point?

Note: I tested on both Eclipse Photon and 2019-12.

[1] https://www.eclipse.org/forums/index.php/t/1101735/
[2] https://www.eclipse.org/community/eclipse_newsletter/2018/june/darktheme.php#guide-for-plug-in-developers-to-contribute-to-the-default-dark-theme
[3] https://bugs.eclipse.org/bugs/show_bug.cgi?id=433475
[4] https://bugs.eclipse.org/bugs/show_bug.cgi?id=436183
[5] https://bugs.eclipse.org/bugs/show_bug.cgi?id=544714

Report message to a moderator

Re: Specify theme-specific preferences via CSS [message #1818585 is a reply to message #1818562]

Fri, 20 December 2019 08:01

Lars Vogel

Messages: 1098
Registered: July 2009

Senior Member

Have a look at the org.eclipse.ui.themes bundle in eclipse.platform.ui repo for a working setup. You still need a preference listener to react to changes in the preference.

Report message to a moderator

Re: Specify theme-specific preferences via CSS [message #1818600 is a reply to message #1818585]

Fri, 20 December 2019 11:32

Emmanuel Chebbi

Messages: 123
Registered: February 2018

Senior Member

Thanks for the answer, Lars. I took a look at the org.eclipse.ui.themes bundle (and especially at the e4-dark_preferencestyle.css file) but still couldn't spot the issue. I ended up copying/pasting the content of the whole file into my own dark-theme.css and added my preference into the org.eclipse.ui.editors node as follows:

IEclipsePreferences#org-eclipse-ui-editors:org-eclipse-ui-themes { /* pseudo attribute added to allow contributions without replacing this node, see Bug 466075 */
	preferences:
		'myPref=someValue'
}

and... it worked! I was able to print "someValue" by querying the org.eclipse.ui.editors node.

I then tried again with a custom node:

IEclipsePreferences#not-org-eclipse-ui-editors:org-eclipse-ui-themes { /* pseudo attribute added to allow contributions without replacing this node, see Bug 466075 */
	preferences:
		'myPref=someValue'
}

But this time the not.org.eclipse.ui.editors node did not have any value.

Is this behavior expected? Does the CSS Engine handle only specific nodes, or am I missing something about the way preferences are managed?

Quote:

You still need a preference listener to react to changes in the preference.

Of course, but my issue here is that changes do not even occur.

Report message to a moderator

Re: Specify theme-specific preferences via CSS [message #1818608 is a reply to message #1818600]

Fri, 20 December 2019 13:23

Lars Vogel

Messages: 1098
Registered: July 2009

Senior Member

It should work, we have multiple implementations out there, which style different preferences. For example, JDT and EGit uses this also. /org.eclipse.e4.ui.css.swt/src/org/eclipse/e4/ui/css/swt/properties/preference/EclipsePreferencesHandler.java handles this. Maybe you put a breakpoint in it and can debug it. It may be that we still have a bug but its works for others.

Here is for example the EGit css file.

/* ############################## EGIT preferences ############################## */

/* See bug 466075 about the pseudo-selector ":org-eclipse-egit-ui" */
IEclipsePreferences#org-eclipse-ui-workbench:org-eclipse-egit-ui {
preferences:
'org.eclipse.egit.ui.DiffAddBackgroundColor=11,121,90'
'org.eclipse.egit.ui.DiffAddForegroundColor=216,254,245'
'org.eclipse.egit.ui.DiffHeadlineBackgroundColor=71,71,71'
'org.eclipse.egit.ui.DiffHeadlineForegroundColor=242,242,242'
'org.eclipse.egit.ui.DiffHunkBackgroundColor=53,97,113'
'org.eclipse.egit.ui.DiffHunkForegroundColor=233,242,254'
'org.eclipse.egit.ui.DiffRemoveBackgroundColor=117,2,36'
'org.eclipse.egit.ui.DiffRemoveForegroundColor=255,232,237'
'org.eclipse.egit.ui.IgnoredResourceBackgroundColor=42,42,42'
'org.eclipse.egit.ui.IgnoredResourceForegroundColor=120,120,120'
'org.eclipse.egit.ui.UncommittedChangeBackgroundColor=42,42,42'
'org.eclipse.egit.ui.UncommittedChangeForegroundColor=114,157,186'
}

#org-eclipse-egit-ui-StagingView StyledText,
Form Section LayoutComposite StyledText
{
background-color: #313538;
color: #dddddd;
}

PushResultTable-SpellcheckableMessageAreaExtension StyledText {
background-color: #313538;
color: #dddddd;
}

Report message to a moderator

Re: Specify theme-specific preferences via CSS [message #1821997 is a reply to message #1818608]

Tue, 25 February 2020 14:15

Emmanuel Chebbi

Messages: 123
Registered: February 2018

Senior Member

OK, so I've finally figured it out. Eclipse was actually ignoring my Dark-specific preferences because of "naming" issues. I detail everything below, please feel free to provide further info or correct my mistakes.

On Eclipse Photon:

Cause: The CSS Engine only overrides the preferences nodes which are named after a bundle's symbolic name.

Bug location: PartRenderingEngine.java#L1489.

Details: this is an issue because Xtext's preferences nodes are named after the language, leading to something like com.my.Dsl. Since the corresponding bundle is usually named com.my.dsl (without the uppercase) the CSS Engine ignores the com.my.Dsl preferences node.

Solutions: create a bundle named after your Xtext language (obviously not the best solution, but likely the simpler)

On Eclipse 2019-12:

Cause: The CSS Engine expects the contributions to org.eclipse.e4.ui.css.swt.theme to have a "namespace identifier" and discards the extensions that don't have one.

Bug location: PartRenderingEngine.java#L1482.

Details: AFAIK extensions don't have a namespace identifier by default, so we must add one that matches the preferences node.

Solution: the namespace identifier of an extension corresponds to its id attribute; its value should be the name of the preferences node suffixed by ".theme". Actually it can be anything, just a dot followed by something else, the reason is that Eclipse removes the last segment when computing the namespace identifier (I guess the last segment is used as some kind of ID but I didn't have the courage to look further).

In conclusion, to provide a dark theme for an Xtext editor:

Given a language com.my.Dsl and the will to support both recent and older Eclipse releases:

Create a plug-in com.my.dsl.theme and contribute to the org.eclipse.e4.ui.css.swt.theme extension point as shown a few posts above

Set the id of the extension to com.my.Dsl.theme

<plugin>
    <extension
           id="com.my.Dsl.theme"
           point="org.eclipse.e4.ui.css.swt.theme">
        <stylesheet
              uri="css/dark-theme.css">
           <themeid
                 refid="org.eclipse.e4.ui.css.theme.e4_dark">
           </themeid>
        </stylesheet>
    </extension>
</plugin>

Create a plug-in com.my.Dsl or change the symbolic name of one of your plug-ins to com.my.Dsl

Report message to a moderator

Previous Topic:	Open file from command line (Pure E4 RCP)
Next Topic:	Where Can I find the complete document of CSS properties of certain Widget.

Goto Forum:

-=] Back to Top [=-

[ Syndicate this forum (XML) ] [

]

Current Time: Thu Apr 25 07:29:15 GMT 2024

.:: Contact :: Home ::.

Breadcrumbs

Sign up to our Newsletter