Skip to content

Latest commit

 

History

History
100 lines (73 loc) · 3.7 KB

skins.md

File metadata and controls

100 lines (73 loc) · 3.7 KB
Raw

Skins

The application provides bundled skins and the ability to add custom skins. This document describes the interplay between bundled skins and building your own look and feel.

A skin is a set of styles, similar to cascading style sheet classes, that configures the user interface colours, fonts, spacing, highlights, drop-shadows, gradients, and more.

For more information on CSS, see the W3C CSS tutorial.

Order

The order that stylesheets are applied matters so that stylesheets can override styles defined previously. The application's user interface is made up of the following stylesheets, applied in the order listed:

  • scene.css --- Defines toolbar styling.
  • markdown.css --- Defines text editor styling.
  • skins/skin_name.css --- Bundled skin selected in preferences.
  • custom.css --- User-defined file set in preferences.

Customization

Create a custom skin as follows:

  1. Start the application.
  2. Click File → New to create a new file.
  3. Click File → Save As to rename the file.
  4. Save the file as custom.css.
  5. Change the content to the following:
.root {
  -fx-base: rgb( 30, 30, 30 );
  -fx-background: -fx-base;
}

Next, apply the skin as follows:

  1. Click Edit → Preferences to open the preferences dialog.
  2. Click Skins to view the available options.
  3. Click Browse to select a custom file.
  4. Browse to and select custom.css, created previously.
  5. Click Open.
  6. Click Apply.

The user interface immediately changes to a dark mode. Continue:

  1. Click OK to close the dialog.
  2. Change the rgb numbers in custom.css from 30 to 60.
  3. Click File → Save to save the CSS file.

The user interface immediately changes colour.

Classes

When creating your own skin, there many classes that can be styled. The previous section showed how to set up a rudimentary skin. Instead, start with a template that already has a number of classes defined so that you can tweak them to your taste. Accomplish this as follows:

  1. Visit the skin repository directory
  2. Click one of the files (e.g., haunted_grey.css).
  3. Click Raw.
  4. Copy the entire text.
  5. Return to custom.css.
  6. Delete the contents.
  7. Paste the copied text.
  8. Save the file.

To see how the CSS styles are applied to the text editor, open markdown.css, which is also in the repository.

Modena

The basic look used by the application is Modena Light. Typically we only need to override a few classes to completely change the application's look and feel. For a full listing of available styles see the OpenJDK's Modena CSS file.

JavaFX CSS

The Java CSS Reference Guide is exhaustive. In addition to showing many differences between JavaFX CSS and W3C CSS, the guide introduces numerous helpful functions for manipulating colours and gradients using existing colour definitions.

RichTextFX

The application uses RichTextFX to render the text editor. Styling various text editor classes can require using the prefix -rtfx instead of the regular JavaFX -fx.

Submit

If you have a look that you'd like to contribute to the project, do pass it along. Either open a new issue in the issue tracker that contains the CSS file or submit a pull request.