Temas Personalizados

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).

La shuffleboard viene con tres temas por defecto: Material Light, Material Dark y Midnight. Estas son variaciones de color en la misma hoja de estilo de diseño de material. Además, heredan de una hoja de estilo``base.css`` que define estilos para los componentes personalizados, definidos en shuffleboard o bibliotecas que utiliza; la hoja de estilo de diseño de material base solo se aplica a los componentes de la interfaz de usuario integrados en JavaFX.

Hay dos maneras de definir un tema personalizado: colocar las hojas de estilo en un directorio con el nombre del tema en ~/Shuffleboard/themes; por ejemplo, un tema teórico «Amarillo» podría colocarse ahí

~/Shuffleboard/themes/Yellow/yellowtheme.css

Todas las hojas de estilo del directorio se tratarán como parte del tema.

Cargar Temas a través de Complementos

Los temas personalizados también se pueden definir mediante complementos/plugins. Esto hace que sea más fácil compartirlos y agruparlos con widgets personalizados, pero son un poco más difíciles de definir. El objeto de tema necesitará una referencia a una clase definida en el complemento para que el cargador del complemento pueda determinar dónde se encuentran las hojas de estilo. Si se pasa una clase que no está presente en el JAR en el que se encuentra el complemento, el tema no podrá utilizarse.

@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);
  }

}

Modificar o Ampliar los Temas Predeterminados de la Shuffleboard

Los temas Material Light y Material Dark de la Shuffleboard proporcionan una gran parte del marco para los temas claros y oscuros, respectivamente, así como muchos estilos específicos de los componentes de la interfaz de usuario de la Shuffleboard, ControlsFX y Medusa para adaptarse al diseño de estilo material.

Los temas que quieran modificar estos temas deben agregar declaraciones de import para estas hojas de estilo:

@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 */

Tenga en cuenta que base.css importa internamente material.css, y light.css, dark.css y midnight.css todos importan base.css, por lo que la importación light.css también importará implícitamente tanto base.css como material.css.

Código Fuente para los Archivos CSS

Muestras de Color del Diseño del Material

El diseño CSS del material utiliza variables de muestra de color para casi todo. Estas variables se pueden configurar desde los archivos CSS personalizados, lo que reduce la cantidad de código personalizado necesario.

Las variables -swatch- <100|200|300|400|500> definen tonos progresivamente más oscuros del mismo color primario. El tema claro usa los tonos de azul predeterminados establecidos en material.css, pero el tema oscuro los reemplaza con tonos de rojo. -swatch-<|light|dark>-gray define tres niveles de gris para usar con varios colores de fondo o texto.

Anulación de los Colores de Muestra

Reemplazo de azul con rojo (claro)

@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%);
}

Reemplazo de rojo con azul (oscuro)

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

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