RFR: 8354795: DialogPane show details button wipes out base style class "hyperlink"

[John Hendrikx]

On Thu, 24 Apr 2025 14:50:22 GMT, Andy Goryachev <angorya at openjdk.org> wrote:

> > Then we can close this, as that's what the original code does already.
> 
> Exactly (but I like the changes you made to add/remove "more"/"less" styles, since they won't erase any styles that the application might add during construction).

The details button is private and not documented, so it is hard to reach, and even if you could it would be unsupported. 

> Let me ask about the original problem, which I read is difficulty to implement the dark theme. Should we make any changes to `modena.css` in this PR instead (with or without the style manipulation)?

The only change needed is to not wipe out the hyperlink style, then it will correctly follow the Modena specified colors which can be set to support a dark theme, see here how I do that:


.root {
    -fx-accent: #165693;
    -fx-focus-color: -fx-accent;
    -fx-base: #16181c;
    -fx-background: #22252b;
    -fx-control-inner-background: derive(-fx-base, 20%);
    -fx-control-inner-background-alt: -fx-control-inner-background;

    -fx-outer-border: derive(-fx-color, 23%);
    -fx-selection-bar-non-focused: -fx-base;

    /* Lighter than -fx-background and used to provide a small highlight when
     * needed on top of -fx-background. This is never a shadow in Modena but
     * keep -fx-shadow-highlight-color name to be compatible with Caspian.
     */
    -fx-shadow-highlight-color: ladder(
        -fx-background,
        rgba(0,0,0,0.07) 0%,
        rgba(0,0,0,0.07) 20%,
        rgba(0,0,0,0.07) 70%,
        rgba(0,0,0,0.7) 90%,
        rgba(0,0,0,0.75) 100%
      );

    /* A gradient that goes from a bit lighter than -fx-color on the top to
     * a little darker at the bottom.  Typically is the third color in the
     * -fx-background-color list as a thin highlight inside the outer border.
     * Insets are typically 1.
     */
    -fx-inner-border: linear-gradient(to bottom,
                ladder(
                    -fx-color,
                    derive(-fx-color,-30%) 0%,
                    derive(-fx-color,-20%) 40%,
                    derive(-fx-color,-25%) 60%,
                    derive(-fx-color,-55%) 80%,
                    derive(-fx-color,-55%) 90%,
                    derive(-fx-color,-75%) 100%
                ),
                ladder(
                    -fx-color,
                    derive(-fx-color,-20%) 0%,
                    derive(-fx-color,-10%) 20%,
                    derive(-fx-color,-5%) 40%,
                    derive(-fx-color,2%) 60%,
                    derive(-fx-color,5%) 100%
                ));
}


This can be combined with a native API call (on Windows) to give your Window a dark title bar as well (if you want that code, let me know).

Because the style is wiped out however, I have to work-around it and copy the hyperlink styles specifically for details-button, like so:


/* copied from .hyperlink styles for each pseudo state */
.dialog-pane > .button-bar > .container > .details-button {
    -fx-text-fill: -fx-accent;
}
.dialog-pane > .button-bar > .container > .details-button:armed,
.dialog-pane > .button-bar > .container > .details-button:visited,
.dialog-pane > .button-bar > .container > .details-button:hover:armed {
    -fx-text-fill: -fx-text-background-color;
}

-------------

PR Comment: https://git.openjdk.org/jfx/pull/1779#issuecomment-2828995890