JavaFX的 - 覆盖根CSS属性

问题描述:

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

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

感谢

一般来说,搞清楚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 ;"); 
+0

我想从代码做到这一点,而不是从一个CSS文件。这就是我谈论StyleableProperty的原因。我正在寻找一种方法来改变在根节点定义的高级别属性动态如此,例如,用户将能够从一个偏好菜单改变整个应用程序的颜色。 –

+0

只是做'root.setStyle( “ - FX-深色文本颜色:海军; ...”);' –

这是modena.css @ jfxrt.jar(COM /阳光/ JavaFX的/场景/控制/皮肤/) - 在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; 
}