javafx - 覆盖root css属性

时间:2016-03-08 08:21:00

标签: java css javafx root styleable

我知道可以使用StyleableObjectProperty覆盖为节点定义的动态css属性。我现在问如何更改" .root"中声明的root属性? css样式表中的类,所以所有节点都将继承此更改。

我想举例来说,更改用于我的应用程序中所有文本的字体颜色属性。此颜色可以在应用程序中动态更改,并应适用于使用它的所有节点。

由于

2 个答案:

答案 0 :(得分:2)

一般来说,找出CSS设置的最佳选择是查看默认样式表的source code

例如,字体颜色实际上是通过自动选择三种固定字体颜色之一来管理的,具体取决于背景的强度(例如,您不会在白色背景上以白色文字结束) :

/* One of these colors will be chosen based upon a ladder calculation
 * that uses the brightness of a background color.  Instead of using these
 * colors directly as -fx-text-fill values, the sections in this file should
 * use a derived color to match the background in use.  See also:
 *
 * -fx-text-base-color for text on top of -fx-base, -fx-color, and -fx-body-color
 * -fx-text-background-color for text on top of -fx-background
 * -fx-text-inner-color for text on top of -fx-control-inner-color
 * -fx-selection-bar-text for text on top of -fx-selection-bar
 */
-fx-dark-text-color: black;
-fx-mid-text-color: #333;
-fx-light-text-color: white;

所以你可以用

之类的东西来覆盖它们
.root {
    -fx-dark-text-color: navy;
    -fx-mid-text-color: blue;
    -fx-light-text-color: lightskyblue;
}

在外部样式表中,它将更改整个应用程序的字体颜色。 (如果您确定您的背景永远不会成为问题,您可以将它们制作成相同的颜色,但我不建议这样做。)

此处设置的属性实际上是"查找颜色"。由于查找颜色的值是从父节点继承的,因此这些值将应用于整个场景图。

如果您想从代码中执行此操作,则可以使用

实现相同目的
root.setStyle(
    "-fx-dark-text-color:  navy ;"+
    "-fx-mid-text-color:   blue ;"+
    "-fx-light-text-color: lightskyblue ;");

答案 1 :(得分:1)

这是来自 modena.css @jfxrt.jar (com / sun / javafx / scene / control / skin /) - 在JavaFX运行时JAR文件中找到。虽然,caspian.css可能是默认的样式表 -fx-base: #ececec;会对您的应用产生巨大的影响。

//add css example
scene.getStylesheets().add(getClass()
                 .getResource("/theshow/jimmylandstudios/gui/THESHOW5.css")
                 .toExternalForm());
/*******************************************************************************
 *                                                                             *
 * CSS Styles for core infrastructure bits.  The .root section provides the    *
 * overall default colors used by the rest of the sections.                    *
 *                                                                             *
 ******************************************************************************/

.root {
    /***************************************************************************
     *                                                                         *
     * The main color palette from which the rest of the colors are derived.   *
     *                                                                         *
     **************************************************************************/

    /* A light grey that is the base color for objects.  Instead of using
     * -fx-base directly, the sections in this file will typically use -fx-color.
     */
    -fx-base: #ececec;

    /* A very light grey used for the background of windows.  See also
     * -fx-text-background-color, which should be used as the -fx-text-fill
     * value for text painted on top of backgrounds colored with -fx-background.
     */
    -fx-background: derive(-fx-base,26.4%);

    /* Used for the inside of text boxes, password boxes, lists, trees, and
     * tables.  See also -fx-text-inner-color, which should be used as the
     * -fx-text-fill value for text painted on top of backgrounds colored
     * with -fx-control-inner-background.
     */
    -fx-control-inner-background: derive(-fx-base,80%);
    /* Version of -fx-control-inner-background for alternative rows */
    -fx-control-inner-background-alt: derive(-fx-control-inner-background,-2%);

    /* One of these colors will be chosen based upon a ladder calculation
     * that uses the brightness of a background color.  Instead of using these
     * colors directly as -fx-text-fill values, the sections in this file should
     * use a derived color to match the background in use.  See also:
     *
     * -fx-text-base-color for text on top of -fx-base, -fx-color, and -fx-body-color
     * -fx-text-background-color for text on top of -fx-background
     * -fx-text-inner-color for text on top of -fx-control-inner-color
     * -fx-selection-bar-text for text on top of -fx-selection-bar
     */
    -fx-dark-text-color: black;
    -fx-mid-text-color: #333;
    -fx-light-text-color: white;

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

    /* Default buttons color, this is similar to accent but more subtle */
    -fx-default-button: #ABD8ED;

    /* A bright blue for the focus indicator of objects. Typically used as the
     * first color in -fx-background-color for the "focused" pseudo-class. Also
     * typically used with insets of -1.4 to provide a glowing effect.
     */
    -fx-focus-color: #039ED3;
    -fx-faint-focus-color: #039ED322;

    /* The color that is used in styling controls. The default value is based
     * on -fx-base, but is changed by pseudoclasses to change the base color.
     * For example, the "hover" pseudoclass will typically set -fx-color to
     * -fx-hover-base (see below) and the "armed" pseudoclass will typically
     * set -fx-color to -fx-pressed-base.
     */
    -fx-color: -fx-base;

    /* Chart Color Palette */
    CHART_COLOR_1: #f3622d;
    CHART_COLOR_2: #fba71b;
    CHART_COLOR_3: #57b757;
    CHART_COLOR_4: #41a9c9;
    CHART_COLOR_5: #4258c9;
    CHART_COLOR_6: #9a42c8;
    CHART_COLOR_7: #c84164;
    CHART_COLOR_8: #888888;
    /* Chart Color Palette Semi-Transparent
     * These are used by charts that need semi transparent versions of the above colors, such as BubbleChart. They
     * are exactly the same colors as above just with alpha
     *
     * 20% opacity
     */
    CHART_COLOR_1_TRANS_20: #f3622d33;
    CHART_COLOR_2_TRANS_20: #fba71b33;
    CHART_COLOR_3_TRANS_20: #57b75733;
    CHART_COLOR_4_TRANS_20: #41a9c933;
    CHART_COLOR_5_TRANS_20: #4258c933;
    CHART_COLOR_6_TRANS_20: #9a42c833;
    CHART_COLOR_7_TRANS_20: #c8416433;
    CHART_COLOR_8_TRANS_20: #88888833;
    /* 70% opacity */
    CHART_COLOR_1_TRANS_70: #f3622db3;
    CHART_COLOR_2_TRANS_70: #fba71bb3;
    CHART_COLOR_3_TRANS_70: #57b757b3;
    CHART_COLOR_4_TRANS_70: #41a9c9b3;
    CHART_COLOR_5_TRANS_70: #4258c9b3;
    CHART_COLOR_6_TRANS_70: #9a42c8b3;
    CHART_COLOR_7_TRANS_70: #c84164b3;
    CHART_COLOR_8_TRANS_70: #888888b3;

    /***************************************************************************
     *                                                                         *
     * Colors that are derived from the main color palette.                    *
     *                                                                         *
     **************************************************************************/

    /* A little lighter than -fx-base and used as the -fx-color for the
     * "hovered" pseudoclass state.
     */
    -fx-hover-base: ladder(
        -fx-base,
        derive(-fx-base,20%) 20%,
        derive(-fx-base,30%) 35%,
        derive(-fx-base,40%) 50%
     );

    /* A little darker than -fx-base and used as the -fx-color for the
     * "armed" pseudoclass state.
     *
     * TODO: should this be renamed to -fx-armed-base?
     */
    -fx-pressed-base: derive(-fx-base,-6%);

    /* The color to use for -fx-text-fill when text is to be painted on top of
     * a background filled with the -fx-background color.
     */
    -fx-text-background-color: ladder(
        -fx-background,
        -fx-light-text-color 45%,
        -fx-dark-text-color  46%,
        -fx-dark-text-color  59%,
        -fx-mid-text-color   60%
    );

    /* A little darker than -fx-color and used to draw boxes around objects such
     * as progress bars, scroll bars, scroll panes, trees, tables, and lists.
     */
    -fx-box-border: ladder(
        -fx-color,
        black 20%,
        derive(-fx-color,-15%) 30%
    );

    /* Darker than -fx-background and used to draw boxes around text boxes and
     * password boxes.
     */
    -fx-text-box-border: ladder(
        -fx-background,
        black 10%,
        derive(-fx-background, -15%) 30%
    );

    /* 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(255,255,255,0.07) 0%,
        rgba(255,255,255,0.07) 20%,
        rgba(255,255,255,0.07) 70%,
        rgba(255,255,255,0.7) 90%,
        rgba(255,255,255,0.75) 100%
      );

    /* A gradient that goes from a little darker than -fx-color on the top to
     * even more darker than -fx-color on the bottom.  Typically is the second
     * color in the -fx-background-color list as the small thin border around
     * a control. It is typically the same size as the control (i.e., insets
     * are 0).
     */
    -fx-outer-border: derive(-fx-color,-23%);

    /* 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%
                ));
    -fx-inner-border-horizontal: linear-gradient(to right, derive(-fx-color,55%), derive(-fx-color,-5%));
    -fx-inner-border-bottomup: linear-gradient(to top, derive(-fx-color,55%), derive(-fx-color,-5%));

    /* A gradient that goes from a little lighter than -fx-color at the top to
     * a little darker than -fx-color at the bottom and is used to fill the
     * body of many controls such as buttons.
     */
    -fx-body-color: linear-gradient(to bottom,
            ladder(
                -fx-color,
                derive(-fx-color,8%) 75%,
                derive(-fx-color,10%) 80%
            ),
            derive(-fx-color,-8%));
    -fx-body-color-bottomup: linear-gradient(to top, derive(-fx-color,10%) ,derive(-fx-color,-6%));
    -fx-body-color-to-right: linear-gradient(to right, derive(-fx-color,10%) ,derive(-fx-color,-6%));

    /* The color to use as -fx-text-fill when painting text on top of
     * backgrounds filled with -fx-base, -fx-color, and -fx-body-color.
     */
    -fx-text-base-color: ladder(
        -fx-color,
        -fx-light-text-color 45%,
        -fx-dark-text-color  46%,
        -fx-dark-text-color  59%,
        -fx-mid-text-color   60%
    );

    /* The color to use as -fx-text-fill when painting text on top of
     * backgrounds filled with -fx-control-inner-background.
     */
    -fx-text-inner-color: ladder(
        -fx-control-inner-background,
        -fx-light-text-color 45%,
        -fx-dark-text-color  46%,
        -fx-dark-text-color  59%,
        -fx-mid-text-color   60%
    );

    /* The color to use for small mark-like objects such as checks on check
     * boxes, filled in circles in radio buttons, arrows on scroll bars, etc.
     */
    -fx-mark-color: ladder(
        -fx-color,
        white 30%,
        derive(-fx-color,-63%) 31%
    );

    /* The small thin light "shadow" for mark-like objects. Typically used in
     * conjunction with -fx-mark-color with an insets of 1 0 -1 0. */
    -fx-mark-highlight-color: ladder(
        -fx-color,
        derive(-fx-color,80%) 60%,
        white 70%
    );

    /* Background for items in list like things such as menus, lists, trees,
     * and tables. */
    -fx-selection-bar: -fx-accent;

    /* Background color to use for selection of list cells etc. This is when
     * the control doesn't have focus or the row of a previously selected item. */
    -fx-selection-bar-non-focused: lightgrey;

    /* The color to use as -fx-text-fill when painting text on top of
     * backgrounds filled with -fx-selection-bar.
     *
     * TODO: this can be removed
     */
    -fx-selection-bar-text: -fx-text-background-color;

    /* These are needed for Popup */
    -fx-background-color: inherit;
    -fx-background-radius: inherit;
    -fx-background-insets: inherit;
    -fx-padding: inherit;

    /* The color to use in ListView/TreeView/TableView to indicate hover. */
    -fx-cell-hover-color: #cce3f4;

    /** Focus line for keyboard focus traversal on cell based controls */
    -fx-cell-focus-inner-border: derive(-fx-selection-bar,30%);

    /* The colors to use in Pagination */
    -fx-page-bullet-border: #acacac;
    -fx-page-indicator-hover-border: #accee5;

    -fx-focused-text-base-color : ladder(
        -fx-selection-bar,
        -fx-light-text-color 45%,
        -fx-dark-text-color 46%,
        -fx-dark-text-color 59%,
        -fx-mid-text-color 60%
    );
    -fx-focused-mark-color : -fx-focused-text-base-color ;

    /***************************************************************************
     *                                                                         *
     * Set the default background color for the scene                          *
     *                                                                         *
     **************************************************************************/

    -fx-background-color: -fx-background;
}