jfxtras-styles icon indicating copy to clipboard operation
jfxtras-styles copied to clipboard

Style a WebView Web Page using JMetro Theme Style

Open DJViking opened this issue 2 years ago • 0 comments

I want to use the JMetro styling in a WebView, so that the Web Page gets the same Theme (LIGHT, DARK) as the application. Any way this can be achieved?

final WebView browser = new WebView();
browser.getStyleClass().add(JMetroStyleClass.BACKGROUND);
final WebEngine engine = browser.getEngine();
final String url = "https://localhost/page.html";
engine.load(url);

The only way I could affect the style of the web page was to call setUserStyleSheetLocation on the WebEngine:

final URL styleUrl = getClass().getResource("webstyle.css");
engine.setUserStyleSheetLocation(styleUrl.toString());

I tried using the JMetro CSS style for the Web Page, but since JavaFX CSS is not compatible with HTML CSS it did not work.

String style = Style.DARK.getStyleStylesheetURL();
engine.setUserStyleSheetLocation(style);

I could create an webstyle-dark.css and webstyle-light.css with the colors and fonts of JMetro, but if JMetro changes these in the future I would have to change mine.

DJViking avatar May 09 '22 06:05 DJViking