Kişisel Temalar

Shuffleboard bir JavaFX uygulaması olduğundan, uygulama Cascading Stylesheets (kısaca CSS) desteğine sahiptir. CSS genellikle web sayfalarında HTML’in daha güzel görünmesini sağlamak için kullanılmaktadır, ancak JavaFX, farklı bir dil alt kümesi (bu dili nasıl kullanacağınıza dair belglere buradan ulaşabilirsiniz) için olsa da, CSS desteğine sahiptir.

Shuffleboard varsayılan olarak üç temayla içermektedir: Material Light, Material Dark ve Midnight. Bunlar, aynı malzeme tasarım stylesheet - stil sayfasındaki renk çeşitleridir. Ayrıca, shuffleboard veya kullandıkları kitaplıklarda tanımlanan özel bileşenler için stilleri tanımlayan bir base.css stylesheet’in mirasçılarıdır; temel malzeme tasarım stylesheet yalnızca JavaFX’te gömülü olan arayüz bileşenleri için geçerlidir.

Kişisel bir tema belirlemenin iki yolu vardır: stylesheet’lerin ~/Shuffleboard/themes içerisinde temanın ismine sahip bir dizine aktarılması; örneğin, teorik bir “Sarı” tema aşağıdaki dizine aktarılabilir:

~/Shuffleboard/themes/Yellow/yellowtheme.css

Dizindeki tüm stylesheet’ler temanın bir parçası olarak ele alınacaktır.

Eklentiler Aracılığıyla Temaların Yüklenmesi

Kişisel temalar, eklentiler tarafından da tanımlanabilmektedir. Bu, temaların kişisel araçlarla gönderimi ve paketlemeyi kolaylaştırmakta, ancak tanımlanmayı biraz zorlaştırmaktadır. Eklenti yükleyicinin stylesheet’lerin nerede bulunduğunu belirleyebilmesi için tema nesnesinin, eklentide tanımlanan bir sınıfa referans olması gerekmektedir. Eklentinin içinde bulunduğu JAR’da bulunmayan bir sınıf iletilirse, tema kullanılamayacaktır.

@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’un Varsayılan Temalarının Değiştirilmesi veya Genişletilmesi

Shuffleboard’un Material Light ve Material Dark temaları, sırasıyla açık ve koyu temalar için çok sayıda çerçeve ve malzeme tarzı tasarıma uyacak şekilde disk iteleme panosu, ControlsFX ve Medusa UI bileşenlerine özgü birçok stil sağlamaktadır.

Bu temaları değiştirmek isteyen temaların, aşağıdaki stil sayfaları için import - içe aktarma ifadelerini eklemesi gerekmektedir:

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

Note that base.css internally imports material.css, and light.css, dark.css, and midnight.css all import base.css, so importing light.css will implicitly import both base.css and material.css as well.

Source Code for the CSS Files

Material Design Color Swatches

The material design CSS uses color swatch variables for almost everything. These variables can be set from custom CSS files, reducing the amount of custom code needed.

The -swatch-<100|200|300|400|500> variables define progressively darker shades of the same primary color. The light theme uses the default shades of blue set in material.css, but the dark theme overrides these with shades of red. -swatch-<|light|dark>-gray defines three levels of gray to use for various background or text colors.

Overriding the Swatch Colors

Replacing blue with red (light)

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

Replacing red with blue (dark)

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

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