Material Theme Stylesheets

[TurekBot]

In the Material Design Guidelines, a "light theme" and a "dark theme" are described. Many components remain unchanged regardless of theme (maybe they use the apps primary or secondary color instead), but many others are very dependent on a theme.

Here's a list of components that the MDG explicitly gives light and dark theming information on. Click each link to see the theming information I've found.

• [ ] Raised Buttons
• [ ] Flat Buttons
• [ ] Check Boxes
• [ ] Dialogs
• [ ] Dividers
• [ ] Date Pickers
• [ ] Time Pickers
• [ ] Radio Buttons
• [ ] Toggle Switches
• [ ] Sliders
• [ ] Text Fields
• [ ] Text Areas

It's clear that the components in JFoenix are intentionally left largely unstyled to allow the developer to style them according to their wishes. But I think there should be a baseline—one that can be overridden, but a baseline nonetheless. I suggest this be done by defaultly styling JFoenix with a light-theme stylesheet.

Reasons for a stylesheet

• Having an accessible stylesheet will allow many users to learn which rules style which parts of the controls. As things stand today, the details about styling is hidden away in the source code. Sadly many users are unaware of this or don't have the expertise to explore it.
• Easy to change the whole theme of an application without writing a lot of CSS.
• Allows for consistency and flexibility.
• Less "How do you change this thing's color" questions in the issues.
• A dark theme would be :metal:freaking sweet:metal:.

Thoughts?

[TurekBot]

Here's an issue:

Multiple of the JFoenix components have a relatively random default color.

Examples:

• Green CheckBox
  • 
• Green Radio Button
  • 
• Blue TextField/TextArea
  • 
• Teal DatePicker
  • 
• Teal TimePicker
  • 
• Purple TreeTableView
  • 
• Transparent (yet Raised) Button
  • 
• Random Blue (rgb(0,200,255)) Rippler
  • 
• Blue and Yellow Tab Pane
  • 

Here's an idea:

Have a -jfx-primary-color rule be the default color for each control, like in modena.css, JavaFX's default stylesheet.

Modena.css

/* A bright blue for highlighting/accenting objects.  For example: selected
 * text; selected items in menus, lists, trees, and tables; progress bars */
-fx-accent: #0096C9;

...

.hyperlink,
.hyperlink:hover,
.hyperlink:hover:visited {
    -fx-text-fill: -fx-accent;
}

This would allow the controls to be easily customized, yet it would provide continuity across all controls with "the flick of a switch".

[jfoenixadmin]

Hello, Definitely it's better to have a default style sheet with a defined theme properties.

[TurekBot]

I've edited my comment above and added a few more examples that I've happened upon, including the rippler and the tab pane.

[TurekBot]

In keeping with Material Palette, I suggest we start off with the following looked-up colors:

• Primary Color: -jfx-primary-color
  • Light Primary Color: -jfx-light-primary-color
  • Dark Primary Color: -jfx-dark-primary-color
• Secondary Color: -jfx-secondary-color
  • Light Secondary Color: -jfx-light-secondary-color
  • Dark Secondary Color: -jfx-dark-secondary-color

---

This should allow application developers to easily pick just a primary color,

or both a primary and secondary color, as described in the guidelines.

That just leaves us with one question:

What are the primary and secondary colors of the light theme?

[DJViking]

How goes this?

Currently JFoenix DatePicker does not work well with our dark theme style.

We have adapted a light and dark theme style based on the Dark Modena found here.

.root {
    -fx-base: rgb(33, 48, 54);
    -fx-background: rgb(33, 48, 54);
    -fx-border-color: rgb(44, 62, 69);

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

    /* text fields and table rows background */
    -fx-control-inner-background: rgb(41, 56, 62);
    /* 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);

    /* color of non-focused yet selected elements */
    -fx-selection-bar-non-focused: rgb(50, 50, 50);

    -fx-font-family: "Roboto";
    -fx-font-size: 1em;
}

On this dark theme the date text in the DatePicker are not not affected.

[jfoenixadmin]

Hello @DJViking Well to be honest, we still didn't test themes with JFoenix. so there might be some issues when applying themes. is it just the date picker that breaks the theme? or there are some other controls?

[DJViking]

For now we are only looking into using the DatePicker and TimePicker of JFoenix. They are a lot better than anything else such controls out there for selecting datetime. I haven't checked with the other controls.

[DJViking]

The JavaFX DatePicker works fine with our dark CSS theme, but does not look as fancy as the JFXDatePicker.

After having looked into the JFXDatePicker source code to find style classes I can meddle with

Style classes

JFXDatePicker extends DatePicker
date-picker <DatePicker>

JFXDatePickerContent
date-picker-popup

Substructure:
date-picker-list-view <ListView>
    data-picker-list-cell <ListCell>
calendar-grid <GridPane>
day-name-cell <DateCell> 
week-number-cell <DateCell>

date-cell <DateCell>
  cell <Cell>

I tried mixing these style classes and got the text color to use the colors in my theme

.data-picker-list-cell {
    -fx-text-fill: rgb(20, 20, 20);
    -fx-font-weight: bold;
}

.day-name-cell.date-cell, .week-number-cell.date-cell {
    -fx-text-fill: rgb(100, 100, 100);
}

.date-cell {
    -fx-text-fill: rgb(220, 220, 220);
}

.date-cell:selected, .date-cell:focused, .date-cell:hover {
    -fx-text-fill: rgb(20, 20, 20);
    -fx-font-weight: bold;
}

.spinner-label {
    -fx-text-fill: rgb(100, 100, 100);
}

However I have been unable to change the fill color of leftButton and rightButton

.date-picker-popup > .left-button.jfx-svg-glyph, .date-picker-popup > .right-button.jfx-svg-glyph {
    -fx-fill: rgb(20, 20, 20);
}

[RyanSusana]

Having the exact same problem as @DJViking

[jfoenixadmin]

you can use the following css

.date-picker-popup > * > * > * > .left-button .jfx-svg-glyph,
.date-picker-popup > * > * > * > .right-button .jfx-svg-glyph {
    -fx-background-color: rgb(20, 20, 20);
}

or

.date-picker-popup .left-button .jfx-svg-glyph,
.date-picker-popup .right-button .jfx-svg-glyph {
    -fx-background-color: rgb(20, 20, 20);
}

Regards,

[RaphaelFourdrilis]

Hi!

What's the status of this? I'm encountering pretty much all caveats mentioned here:

• Teal tabpane in a dark-orange theme -> not great
• Purple table views -> not great

and so on...

I'm not a big fan of CSS in general, I tend to find it tedious; but typesafe-CSS in Kotlin is probably just good enough so I can be bothered writing some. And then I discover the only great thing about CSS (the cascading part, allowing themes and such) doesn't necessarily work in TornadoFX/JFoenix combo, one of the greatest combos ever for JVM GUI Client development (dare I say non-web GUI development as a whole? Maybe I do.) :p

Is there any somewhat easy way to circumvent those problems?

[RaphaelFourdrilis]

I've managed to get something somewhat decent with this root style. I'm using kotlin with tornadofx and jfoenix 9 (and kfoenix but I don't think it changes anything here)

class RootStylesheet : JFXStylesheet() {
    companion object {
        val darkPrimary = c("#455A64")
        val defaultPrimary = c("#607D8B")
        val lightPrimary = c("#CFD8DC")

        val textColor: Color = Color.WHITE
        val textPrimary = c("#212121")
        val textSecondary = c("#757575")

        val accent = c("#FF5722")

        val dividerColor = c("#BDBDBD")

        val jfxTabPane by cssclass("jfx-tab-pane")
        val tabSelectedLine by cssclass("tab-selected-line")
    }

    init {
        val themeMixin = mixin {
            baseColor = defaultPrimary
            accentColor = accent
            backgroundColor += darkPrimary
            progressColor = accent

            text {
                fill = textColor
            }
        }

        val accentuatedElement = mixin {
            backgroundColor += accent
            text {
                fill = textColor
            }
        }

        val lightElement = mixin {
            backgroundColor += lightPrimary

            text {
                fill = textPrimary
            }
        }

        root {
            +themeMixin
        }

        jfxTabPane {
            tabHeaderArea {
                tabHeaderBackground {
                    +themeMixin
                }
            }
        }

        tabSelectedLine {
            +accentuatedElement
        }

        tabContentArea {
            +lightElement

            jfxButton {
                +accentuatedElement
            }
        }
    }
}

Notice how the right hand-side drawer is colored with secondary colors without specifically saying it

So this seems to work, kinda. Some elements still have to be styled 'by hand', like the buttons, the tab pane, and such. Adding one more element is easy enough.

Hope that helps for now

[jhourlad]

So does this means JFoenix out-of-the-box has no colors at all? Can anybody clarify on this?