Thèmes personnalisés

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 est livré avec trois thèmes par défaut: Material Light, Material Dark et Midnight. Ce sont des variations de couleur sur la même feuille de style de conception matérielle. De plus, ils héritent d’une feuille de style base.css qui définit les styles des composants personnalisés, définis dans Shuffleboard ou les librairies qu’il utilise; la feuille de style de conception du matériau de base s’applique uniquement aux composants d’interface utilisateur intégrés à JavaFX.

Il existe deux façons de définir un thème personnalisé: placer les feuilles de style dans un répertoire avec le nom du thème dans ~/Shuffleboard/themes; par exemple, un thème théorique « Yellow » pourrait être placé dans

~/Shuffleboard/themes/Yellow/yellowtheme.css

Toutes les feuilles de style du répertoire seront traitées comme faisant partie du thème.

Chargement de thèmes via des plugins

Les thèmes personnalisés peuvent également être définis par des plugins. Cela les rend plus faciles à partager et à regrouper avec des widgets personnalisés, mais est légèrement plus difficile à définir. L’objet de thème aura besoin d’une référence à une classe définie dans le plugin afin que le chargeur de plugin puisse déterminer où se trouvent les feuilles de style. Si une classe est transmise qui n’est pas présente dans le JAR dans lequel se trouve le plugin, le thème ne pourra pas être utilisé.

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

}

Modifier ou étendre les thèmes par défaut du Shuffleboard

Les thèmes Material Light et Material Dark de Shuffleboard fournissent une grande partie du cadre pour les thèmes clairs et sombres, respectivement, ainsi que de nombreux styles spécifiques aux composants de shuffleboard, ControlsFX et Medusa UI pour s’adapter à la conception selon le style du matériau.

Les thèmes qui souhaitent modifier ceci doivent ajouter des instructions import pour ces feuilles de style:

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

Notez que base.css importe en interne material.css, et light.css, dark.css, et midnight.css importent tous base.css, donc l’importation de light.css importera implicitement à la fois base.css and material.css.

Code source pour les fichiers CSS

Échantillons de couleur de conception matérielle

Le CSS de conception matérielle utilise des variables d’échantillons de couleurs pour presque tout. Ces variables peuvent être définies à partir de fichiers CSS personnalisés, ce qui réduit la quantité de code personnalisé nécessaire.

Les variables -swatch- <100 | 200 | 300 | 400 | 500> définissent des nuances progressivement plus foncées de la même couleur primaire. Le thème clair utilise les nuances de bleu par défaut définies dans material.css, mais le thème sombre les remplace par des nuances de rouge. -swatch-<|light|dark>-gray définit trois niveaux de gris à utiliser pour diverses couleurs d’arrière-plan ou de texte.

Remplacer les couleurs de l’échantillon

Remplacement du bleu par du rouge (clair)

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

Remplacement du rouge par du bleu (foncé)

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

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