javafx - переопределить корневые атрибуты css

Question

Я знаю, что можно динамически переопределять атрибуты CSS, определенные для узла, используя StyleableObjectProperty. Теперь я спрашиваю, как я могу изменить корневые свойства, объявленные в классе ".root" в таблице стилей CSS, чтобы все узлы наследовали это изменение.

Я хотел бы, например, изменить атрибут цвета шрифта, используемый для всего текста в моем приложении. Этот цвет может быть динамически изменен в приложении и должен применяться ко всем узлам, использующим его.

Спасибо

Answer 1

В общем, лучше всего выяснить настройки 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 ;");

Answer 2

Это из modena.css @ jfxrt.jar (com / sun / javafx / scene / control / skin /) - находится в файле JAR времени выполнения JavaFX. Хотя, caspian.css может быть таблицей стилей по умолчанию.
-fx-base: #ececec; имеет огромное общее влияние на ваше приложение.

//add css example
scene.getStylesheets().add(getClass()
                 .getResource("/theshow/jimmylandstudios/gui/THESHOW5.css")
                 .toExternalForm());

/ ************************************************* ******************************
 * *
 * CSS-стили для основных элементов инфраструктуры. Раздел.root содержит *
 * общие цвета по умолчанию, используемые остальными разделами.                    *
 * *
 ************************************************** **************************** /
.root {
    / ************************************************* **************************
     * *
     * Основная цветовая палитра, из которой получены остальные цвета.                    *
     * *
     ************************************************** ************************ /

    / * Светло-серый, который является основным цветом для объектов. Вместо того, чтобы использовать
     * -fx-base напрямую, разделы в этом файле обычно используют -fx-color.
     * /
    -fx-base: #ececec;

    / * Очень светло-серый цвет используется для фона окон. Смотрите также
     * -fx-text-background-color, который следует использовать как -fx-text-fill
     * значение для текста, нарисованного поверх фонов, окрашенных в -fx-background.
     */
    -fx-background: производное (-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 values, разделы в этом файле должны
     * использовать производный цвет, чтобы соответствовать используемому фону. Смотрите также:
     *
     * -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-accent: # 0096C9;

    / * Цвет кнопок по умолчанию, похож на акцент, но более тонкий * /
    -fx-default-button: # ABD8ED;

    / * Ярко-синий для индикатора фокуса объектов. Обычно используется как
     * первый цвет в -fx-background-color для "сфокусированного" псевдокласса. Также
     * обычно используется со вставками -1,4 для обеспечения светящегося эффекта.
     * /
    -fx-focus-color: # 039ED3;
    -fx-faint-focus-color: # 039ED322;

    / * Цвет, используемый в элементах управления стилями. Значение по умолчанию основано
     * on -fx-base, но изменяется псевдоклассами для изменения основного цвета.
     * Например, псевдокласс "hover" обычно устанавливает -fx-color в
     * -fx-hover-base (см. ниже) и "вооруженный" псевдокласс
     * установите -fx-color в -fx-press-base.
     * /
    -fx-color: -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. O ни
     * точно такие же цвета, как указано выше, только с альфа
     *
     * 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-arms-base?
     */
    -fx-press-base: производное (-fx-base, -6%);

    / * Цвет, используемый для -fx-text-fill, когда текст должен быть нарисован поверх
     * фон, заполненный цветом -fx-background.
     */
    -fx-text-background-color: ladder(
        -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: ladder(
        -fx цвета,
        черный 20%,
        получить (-fx-цвет, -15%) 30%);

    / * Темнее, чем -fx-background и используется для рисования рамок вокруг текстовых полей и
     * ящики для паролей.
     */
    -fx-text-box-border: ladder(
        -fx-фон,
        черный 10%,
        получить (-fx-background, -15%) 30%);

    / * Светлее, чем -fx-background и используется для небольшого выделения, когда
     * необходимо поверх -fx-background. Это никогда не тень в Модене, но
     * оставьте имя -fx-shadow-highlight-color совместимым с Caspian.
     */
    -fx-shadow-highlight-color: лестница (-fx-фон,
        rgba(255 255 255,07) 0%,
        rgba(255 255 255,07) 20%,
        rgba(255 255 255,07) 70%,
        rgba(255 255 255,7) 90%,
        rgba(255 255 255,75) 100%);

    / * Градиент, который идет от немного темнее, чем -fx-color наверху к
     * еще более темный, чем -fx-color внизу. Обычно это второй
     * цвет в списке -fx-background-color как маленькая тонкая рамка вокруг
     * контроль. Это обычно тот же размер, что и контроль (т.е. вставки
     * являются 0).
     */
    -fx-external-border: получить (-fx-цвет, -23%);

    / * Градиент, который идет от немного светлее, чем -fx-color наверху к
     * немного темнее внизу. Обычно это третий цвет в
     * -fx-background-color list в качестве тонкого выделения внутри внешней границы.
     * Вставки обычно равны 1.
     */
    -fx-inner-border: линейный градиент (внизу,
                лестница (-fx цвета,
                    получить (-fx-цвет,30%) 0%,
                    получить (-fx-цвет,20%) 40%,
                    получить (-fx-цвет,25%) 60%,
                    получить (-fx-цвет,55%) 80%,
                    получить (-fx-цвет,55%) 90%,
                    получить (-fx-цвет,75%) 100%),
                лестница (-fx цвета,
                    получить (-fx-цвет,20%) 0%,
                    получить (-fx-цвет,10%) 20%,
                    получить (-fx-цвет,5%) 40%,
                    получить (-fx-цвет,-2%) 60%,
                    получить (-fx-цвет,-5%) 100%));
    -fx-inner-border-горизонтальный: линейный градиент (направо, выводить (-fx-цвет,55%), выводить (-fx-цвет,-5%));
    -fx-inner-border-bottomup: линейный градиент (вверху, получить (-fx-color,55%), получить (-fx-color, -5%));

    / * Градиент, который идет от немного более светлого, чем -fx-color вверху к
     * немного темнее -fx-цвета внизу и используется для заполнения
     * тело многих элементов управления, таких как кнопки.
     */
    -fx-body-color: линейный градиент (внизу,
            лестница (-fx цвета,
                получить (-fx-цвет,8%) 75%,
                получить (-fx-цвет,10%) 80%),
            вывести (-fx цвета,-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-цвет, -63%) 31%);

    / * Небольшая тонкая легкая "тень" для объектов, похожих на пометки. Обычно используется в
     * в сочетании с -fx-mark-color с вставками 1 0 -1 0. */
    -fx-mark-highlight-color: лестница (-fx цвета,
        получить (-fx-цвет,80%) 60%,
        белый 70%);

    / * Фон для элементов в списке, таких как меню, списки, деревья,
     * и таблицы.                    * /
    -fx-selection-bar: -fx-accent;

    / * Цвет фона, используемый для выбора ячеек списка и т. Д.
     * элемент управления не имеет фокуса или строки ранее выбранного элемента.                    * /
    -fx-selection-bar-non-focus: lightgrey;

    / * Цвет для использования в качестве -fx-text-fill при рисовании текста поверх
     * фоны, заполненные -fx-selection-bar.
     *
     * TODO: это можно удалить
     * /
    -fx-selection-bar-text: -fx-text-background-color;

    / * Это необходимо для Popup */
    -fx-background-color: наследовать;
    -fx-background-radius: наследовать;
    -fx-background-вставки: наследовать;
    -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-focus-text-base-color: ladder(
        -fx выбора-бар,
        -fx-light-text-color 45%,
        -fx-dark-text-color 46%,
        -fx-dark-text-color 59%,
        -fx-mid-text-color 60%);
    -fx-focus-mark-color: -fx-focus-text-base-color;

    / ************************************************* **************************
     * *
     * Установите цвет фона по умолчанию для сцены *
     * *
     ************************************************** ************************ /

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