Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Amp: Support Dark themed CSS style #160

Closed
DJViking opened this issue Feb 3, 2019 · 3 comments
Closed

Amp: Support Dark themed CSS style #160

DJViking opened this issue Feb 3, 2019 · 3 comments

Comments

@DJViking
Copy link

DJViking commented Feb 3, 2019

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
Copy link
Owner

HanSolo commented Feb 6, 2019

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
Copy link
Owner

HanSolo commented Feb 6, 2019

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

@HanSolo HanSolo closed this as completed Feb 6, 2019
@DJViking
Copy link
Author

DJViking commented Feb 6, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants