1

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

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

谢谢

4

2 回答 2

2

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

例如,字体颜色实际上是通过从三种固定字体颜色中自动选择一种来管理的,具体取决于背景的强度(例如,您最终不会在白色背景上看到白色文本):

/* 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 ;");
于 2016-03-08T12:55:24.287 回答
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 样式。.root 部分提供 *
 * 其余部分使用的整体默认颜色。*
 * *
 ****************************************************** ******************************/

。根 {
    /************************************************* ******************************
     * *
     * 其他颜色派生的主调色板。*
     * *
     ****************************************************** ************************/

    /* 作为对象的基色的浅灰色。而不是使用
     * -fx-base 直接,此文件中的部分通常使用 -fx-color。
     */
    -fx-base: #ececec;

    /* 用于窗口背景的非常浅的灰色。也可以看看
     * -fx-text-background-color,应该用作 -fx-text-fill
     * 在使用 -fx-background 着色的背景上绘制的文本的值。
     */
    -fx-背景:派生(-fx-base,26.4%);

    /* 用于文本框、密码框、列表、树和
     * 表。另请参阅 -fx-text-inner-color,它应该用作
     * -fx-text-fill 值用于绘制在彩色背景上的文本
     * 带有 -fx-control-inner-background。
     */
    -fx-control-inner-background:派生(-fx-base,80%);
    /* 替代行的 -fx-control-inner-background 版本 */
    -fx-control-inner-background-alt:派生(-fx-control-inner-background,-2%);

    /* 这些颜色中的一种将根据阶梯计算选择
     * 使用背景颜色的亮度。而不是使用这些
     * 颜色直接作为 -fx-text-fill 值,此文件中的部分应
     * 使用派生颜色来匹配使用中的背景。也可以看看:
     *
     * -fx-text-base-color 用于 -fx-base、-fx-color 和 -fx-body-color 之上的文本
     * -fx-text-background-color 用于 -fx-background 之上的文本
     * -fx-text-inner-color 用于 -fx-control-inner-color 顶部的文本
     * -fx-selection-bar-text 用于 -fx-selection-bar 顶部的文本
     */
    -fx-dark-text-color:黑色;
    -fx-mid-text-color:#333;
    -fx-light-text-color:白色;

    /* 用于突出/强调对象的亮蓝色。例如:选中
     * 文本; 菜单、列表、树和表格中的选定项目;进度条 */
    -fx 口音:#0096C9;

    /* 默认按钮颜色,这类似于重音但更微妙 */
    -fx-默认按钮:#ABD8ED;

    /* 对象焦点指示器的亮蓝色。通常用作
     * “聚焦”伪类的 -fx-background-color 中的第一种颜色。还
     * 通常与 -1.4 的插图一起使用以提供发光效果。
     */
    -fx 焦点颜色:#039ED3;
    -fx-模糊焦点颜色:#039ED322;

    /* 样式控件中使用的颜色。默认值基于
     * 在 -fx-base 上,但由伪类更改以更改基色。
     * 例如,“hover”伪类通常会将 -fx-color 设置为
     * -fx-hover-base(见下文)和“武装”伪类通常会
     * 将 -fx-color 设置为 -fx-pressed-base。
     */
    -fx-颜色:-fx-base;

    /* 图表调色板 */
    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;
    /* 图表调色板半透明
     * 这些用于需要上述颜色的半透明版本的图表,例如 BubbleChart。他们
     * 与上面的颜色完全相同,只是带有 alpha
     *
     * 20% 不透明度
     */
    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% 不透明度 */
    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;

    /************************************************* ******************************
     * *
     * 从主调色板派生的颜色。*
     * *
     ****************************************************** ************************/

    /* 比 -fx-base 轻一点,用作 -fx-color 的
     *“悬停”伪类状态。
     */
    -fx-hover-base:梯子(
        -FX基础,
        派生(-fx-base,20%) 20%,
        派生(-fx-base,30%) 35%,
        派生(-fx-base,40%) 50%
     );

    /* 比 -fx-base 暗一点,用作 -fx-color 的
     *“武装”伪类状态。
     *
     * TODO:是否应该将其重命名为 -fx-armed-base?
     */
    -fx-pressed-base:派生(-fx-base,-6%);

    /* 当文本被绘制在上面时用于 -fx-text-fill 的颜色
     * 用 -fx-background 颜色填充的背景。
     */
    -fx-文本背景色:梯子(
        -fx-背景,
        -fx-light-text-color 45%,
        -fx-dark-text-color 46%,
        -fx-dark-text-color 59%,
        -fx-mid-text-color 60%
    );

    /* 比 -fx-color 稍暗,用于在对象周围绘制框,例如
     * 作为进度条、滚动条、滚动窗格、树、表格和列表。
     */
    -fx-box-border:梯子(
        -fx 颜色,
        黑色 20%,
        派生(-fx-color,-15%) 30%
    );

    /* 比 -fx-background 更暗,用于在文本框周围绘制框和
     *密码框。
     */
    -fx-文本框边框:梯子(
        -fx-背景,
        黑色 10%,
        派生(-fx-背景,-15%)30%
    );

    /* 比 -fx-background 更轻,用于提供小亮点
     * 需要在 -fx-background 之上。这在摩德纳从来不是阴影,而是
     * 保留 -fx-shadow-highlight-color 名称以与 Caspian 兼容。
     */
    -fx-shadow-highlight-color: 梯子(
        -fx-背景,
        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%
      );

    /* 从顶部比 -fx-color 稍暗的渐变到
     * 甚至比底部的 -fx-color 更暗。通常是第二个
     * -fx-background-color 列表中的颜色作为周围的细小边框
     * 一个控件。它通常与控件的大小相同(即,插图
     * 为 0)。
     */
    -fx-outer-border:派生(-fx-color,-23%);

    /* 从顶部比 -fx-color 浅一点的渐变到
     * 底部稍暗。通常是第三种颜色
     * -fx-background-color 列表作为外边框内的细高光。
     * 插图通常为 1。
     */
    -fx-inner-border:线性渐变(到底部,
                梯子(
                    -fx 颜色,
                    派生(-fx-color,30%) 0%,
                    派生(-fx-color,20%) 40%,
                    派生(-fx-color,25%) 60%,
                    派生(-fx-color,55%) 80%,
                    派生(-fx-color,55%) 90%,
                    派生(-fx-color,75%)100%
                ),
                梯子(
                    -fx 颜色,
                    派生(-fx-color,20%) 0%,
                    派生(-fx-color,10%) 20%,
                    派生(-fx-color,5%) 40%,
                    派生(-fx-color,-2%) 60%,
                    派生(-fx-color,-5%) 100%
                ));
    -fx-inner-border-horizo​​​​ntal:线性渐变(向右,派生(-fx-color,55%),派生(-fx-color,-5%));
    -fx-inner-border-bottomup:线性渐变(到顶部,派生(-fx-color,55%),派生(-fx-color,-5%));

    /* 从顶部比 -fx-color 稍浅的渐变到
     * 底部比 -fx-color 稍暗,用于填充
     * 许多控件的主体,例如按钮。
     */
    -fx-body-color: 线性渐变(到底部,
            梯子(
                -fx 颜色,
                派生(-fx-color,8%) 75%,
                派生(-fx-color,10%) 80%
            ),
            派生(-fx-color,-8%));
    -fx-body-color-bottomup:线性渐变(到顶部,派生(-fx-color,10%),派生(-fx-color,-6%));
    -fx-body-color-to-right:线性渐变(向右,派生(-fx-color,10%),派生(-fx-color,-6%));

    /* 在顶部绘制文本时用作 -fx-text-fill 的颜色
     * 用 -fx-base、-fx-color 和 -fx-body-color 填充的背景。
     */
    -fx-text-base-color:梯子(
        -fx 颜色,
        -fx-light-text-color 45%,
        -fx-dark-text-color 46%,
        -fx-dark-text-color 59%,
        -fx-mid-text-color 60%
    );

    /* 在顶部绘制文本时用作 -fx-text-fill 的颜色
     * 用 -fx-control-inner-background 填充的背景。
     */
    -fx-text-inner-color:梯子(
        -fx-控制-内部-背景,
        -fx-light-text-color 45%,
        -fx-dark-text-color 46%,
        -fx-dark-text-color 59%,
        -fx-mid-text-color 60%
    );

    /* 用于小标记对象的颜色,例如检查检查
     * 框,单选按钮中的圆圈,滚动条上的箭头等。
     */
    -fx-mark-color:梯子(
        -fx 颜色,
        白色 30%,
        派生(-fx-color,-63%) 31%
    );

    /* 标记状物体的小细光“阴影”。通常用于
     * 与 -fx-mark-color 结合,插入 1 0 -1 0。*/
    -fx-mark-highlight-color: 梯子(
        -fx 颜色,
        派生(-fx-color,80%) 60%,
        白色 70%
    );

    /* 列表中项目的背景,例如菜单、列表、树、
     * 和表格。*/
    -fx-选择栏:-fx-accent;

    /* 用于选择列表单元格等的背景颜色。这是当
     * 控件没有焦点或先前选定项的行。*/
    -fx-selection-bar-non-focused:浅灰色;

    /* 在顶部绘制文本时用作 -fx-text-fill 的颜色
     * 充满 -fx-selection-bar 的背景。
     *
     * TODO:可以删除
     */
    -fx-selection-bar-text:-fx-text-background-color;

    /* 这些是弹出窗口所需要的 */
    -fx-background-color:继承;
    -fx-background-radius:继承;
    -fx-background-insets:继承;
    -fx-padding:继承;

    /* 在 ListView/TreeView/TableView 中用于指示悬停的颜色。*/
    -fx-cell-hover-color: #cce3f4;

    /** 用于在基于单元格的控件上遍历键盘焦点的焦点线 */
    -fx-cell-focus-inner-border: 派生(-fx-selection-bar,30%);

    /* 在分页中使用的颜色 */
    -fx-page-bullet-border:#acacac;
    -fx-page-indicator-hover-border: #accee5;

    -fx-focused-text-base-color:梯子(
        -fx-选择栏,
        -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 ;

    /************************************************* ******************************
     * *
     * 设置场景的默认背景颜色 *
     * *
     ****************************************************** ************************/

    -fx-背景颜色:-fx-背景;
}
于 2016-05-19T18:22:46.337 回答