HanSolo / medusa

A JavaFX library for Gauges
Apache License 2.0
688 stars 129 forks source link

Amp: Support Dark themed CSS style #160

Closed DJViking closed 5 years ago

DJViking commented 5 years ago

I have defined a root CSS style for LIGHT and DARK. When using the DARK style the Amp/PlainAMP would look much better if it could utilise the colors defined in the CSS.

screenshot_20190203_130823 screenshot_20190203_130831

When using my dark css style the value text is white. That would not be a problem if the background colors was using the background color from the root css style. The value text being very small is related to #159 I filed earlier.

My Dark CSS root style: It is derived from the Dark Modena I found on GitHub.

.root {
    -fx-base: rgb(50, 50, 50);
    -fx-background: rgb(50, 50, 50);

    /* make controls (buttons, thumb, etc.) slightly lighter */
    -fx-color: derive(-fx-base, 10%);

    /* text fields and table rows background */
    -fx-control-inner-background: rgb(20, 20, 20);
    /* version of -fx-control-inner-background for alternative rows */
    -fx-control-inner-background-alt: derive(-fx-control-inner-background, 2.5%);

    /* text colors depending on background's brightness */
    -fx-light-text-color: rgb(220, 220, 220);
    -fx-mid-text-color: rgb(100, 100, 100);
    -fx-dark-text-color: rgb(20, 20, 20);

    /* A bright blue for highlighting/accenting objects.  For example: selected
     * text; selected items in menus, lists, trees, and tables; progress bars
     */
    -fx-accent: rgb(0, 80, 100);

    -fx-font-size: 1em;

    /* color of non-focused yet selected elements */
    -fx-selection-bar-non-focused: rgb(50, 50, 50);
}
HanSolo commented 5 years ago

Well with Medusa and TilesFX I do not support CSS styling because of some limitations and also because of performance reasons. If you do need CSS support you should either be able to create your own skin based on an existing one where you use CSS instead of code (I will blog about how to do that) or you could add a helper class that uses StyleableProperties for the values you would like to change and when these properties will be triggered by your CSS code you can change the colors via code. Not very convenient but also not too hard to do :)

HanSolo commented 5 years ago

Please find more info in the medusademo project or on my blog at: https://harmoniccode.blogspot.com/2019/02/style-it-baby.html

DJViking commented 5 years ago

Please find more info in the medusademo project or on my blog at: https://harmoniccode.blogspot.com/2019/02/style-it-baby.html

Thanks, I will have a look at it.