自定义主题

Since shuffleboard is a JavaFX application, it has support for custom themes via Cascading Stylesheets (CSS for short). These are commonly used on webpages for making HTML look nice, but JavaFX also has support, albeit for a different language subset (see here for documentation on how to use it).

Shuffleboard 默认带有三个主题：浅色，深色和午夜。这些是同一材料设计样式表上的颜色变化。另外，它们继承自base.css样式表，该样式表定义了自定义组件的样式，这些样式在沙狐球板或所使用的库中定义；基础材料设计样式表仅适用于JavaFX中内置的UI组件。

定义自定义主题有两种方法：将样式表放在“~/Shuffleboard/themes”中主题名称的目录中；例如，理论上的“黄色”主题可以放在

~/Shuffleboard/themes/Yellow/yellowtheme.css

目录中的所有样式表将被视为主题的一部分。

通过插件加载主题

自定义主题也可以由插件定义。这使它们更易于与自定义窗口小部件共享和捆绑，但定义起来却稍微困难一些。主题对象将需要对插件中定义的类的引用，以便插件加载器可以确定样式表的位置。如果传递的类在插件所在的JAR中不存在，则将无法使用该主题。

@Description(group = "com.example", name = "My Plugin", version = "1.2.3", summary = "")
class MyPlugin extends Plugin {

  private static final Theme myTheme = new Theme(MyPlugin.class, "My Theme Name", "/path/to/stylesheet", "/path/to/stylesheet", ...);

  @Override
  public List<Theme> getThemes() {
    return ImmutableList.of(myTheme);
  }

}

修改或扩展Shuffleboard的默认主题

Shuffleboard的Material Light和Material Dark主题分别为亮色和深色主题提供了很多框架，以及针对Shuffleboard，ControlsFX和Medusa UI组件的许多特定样式，以适应材料样式设计。

想要修改这些主题的主题需要为这些样式表添加“ import”语句：

@import "/edu/wpi/first/shuffleboard/api/material.css"; /* Material design CSS for JavaFX components */
@import "/edu/wpi/first/shuffleboard/api/base.css";  /* Material design CSS for shuffleboard components */
@import "/edu/wpi/first/shuffleboard/app/light.css"; /* CSS for the Material Light theme */
@import "/edu/wpi/first/shuffleboard/app/dark.css";  /* CSS for the Material Dark theme */
@import "/edu/wpi/first/shuffleboard/app/midnight.css";  /* CSS for the Midnight theme */

请注意，base.css内部会导入material.css和light.css，dark.css和midnight.css都将导入base。 css”，因此导入“ light.css”将隐式导入“ base.css”和“ material.css”。

CSS文件的源代码

材质设计颜色色板

材质设计CSS对几乎所有内容都使用颜色样本变量。可以从自定义CSS文件设置这些变量，从而减少所需的自定义代码量。

``-swatch- <100|200|300|400|500>’’变量定义相同原色的逐渐变深的阴影。浅色主题使用在material.css中设置的默认蓝色阴影，而深色主题用红色阴影覆盖它们。 ``-swatch- <|light|dark> -gray’’定义了三个灰度等级，用于各种背景或文本颜色。

覆盖色板颜色

用红色代替蓝色（浅色）

@import "/edu/wpi/first/shuffleboard/app/light.css"

.root {
    -swatch-100: hsb(0, 80%, 98%);
    -swatch-200: hsb(0, 80%, 88%);
    -swatch-300: hsb(0, 80%, 78%);
    -swatch-400: hsb(0, 80%, 68%);
    -swatch-500: hsb(0, 80%, 58%);
}

将红色替换为蓝色（深色）

@import "/edu/wpi/first/shuffleboard/app/dark.css"

.root {
    -swatch-100: #BBDEFB;
    -swatch-200: #90CAF9;
    -swatch-300: #64BEF6;
    -swatch-400: #42A5F5;
    -swatch-500: #2196F3;
}