Skip to content

Styling Chunky

Chunky uses CSS to style the GUI, and can be restyled by adding a custom style.css to the Chunky settings directory.

Template

Below is the template style.css which can be used as a basis for new themes. It is the style.css that is used by Chunky by default, and it is located in the Chunky GitHub repository.

.root {
    -fx-base: rgb(30,30,30);
    -fx-background: rgb(20,20,20);
    -fx-control-inner-background: rgb(40, 40, 40);
    -fx-accent: orange;
    -fx-focus-color: orange;
}

ProgressBar {
    -fx-control-inner-background: rgb(30, 30, 30);
    -fx-progress-color: orange;
}

ToggleButton:selected {
    -fx-background-color: rgb(80,80,80);
}

Button {
    -fx-text-fill: #faebd7;
}

ToggleButton {
    -fx-text-fill: #faebd7;
}

CheckBox {
    -fx-text-fill: #faebd7;
}

Label {
    -fx-text-fill: #faebd7;
}

Text {
    -fx-fill: #faebd7;
}

SVGPath {
    -fx-fill: #faebd7;
}

Hyperlink {
    -fx-text-fill: orange;
    -fx-underline: false;
}

Hyperlink:visited {
    -fx-text-fill: orange;
}

Hyperlink:hover {
    -fx-text-fill: #faebd7;
    -fx-underline: true;
}

.numeric-text-field.invalid {
    -fx-text-fill: #FF434A;
    -fx-text-box-border: #FF434A;
    -fx-focus-color: #FF434A;
}

.text-field-label-wrapper > .label {
    -fx-text-fill: gray;
}

.text-field-label-wrapper > .text-field {
    -fx-alignment: baseline-right;
}

.menu-item:disabled:focused {
    -fx-background: unset;
    -fx-background-color: transparent;
}

.menu-item:disabled:focused > .label {
    -fx-text-fill: white;
}

.lock-toggle {
    -fx-label-padding: 0em;
}

.lock-toggle > .box {
    -fx-alignment: center;
    -fx-content-display: graphic-only;

    -fx-padding: 0.5em 0.1em;

    -fx-background-color: none;
    -fx-border-color: transparent;
    -fx-border-style: solid;
    -fx-border-radius: 0.25em;
}

.lock-toggle:hover > .box {
    -fx-background-color: #282828;
    -fx-border-color: black;
}

.lock-toggle:focused > .box {
    -fx-border-style: dotted;
    -fx-border-color: white;
}

.lock-toggle > .box > .mark {
    -fx-position-shape: true;
    -fx-scale-x: 0.45;

    -fx-scale-y: 1.50;
    -fx-background-color: #999;
}

.lock-toggle:selected > .box > .mark {
    -fx-scale-y: 1.27;
    -fx-background-color: white;
}

Customization is not limited to the contents of the template. One example is the fx-background-image, which can be used to add images or GIF files to the GUI. Visit the JavaFX CSS Reference Guide for the full documentation.

Example Themes

Below are some example themes.

Light

Figure 3.3.3.1: Custom theme: "Light", by jackjt8. Sorry

Light theme

This theme uses the style.css below.

.root {
    -fx-base: rgb(225,225,225);
    -fx-background: rgb(235,235,235);
    -fx-control-inner-background: rgb(215, 215, 215);
    -fx-accent: orange;
    -fx-focus-color: orange;
}

ProgressBar {
    -fx-control-inner-background: rgb(225, 225, 225);
    -fx-progress-color: orange;
}

ToggleButton:selected {
    -fx-background-color: rgb(175,175,175);
}

Button {
    -fx-text-fill: #080501;
}

ToggleButton {
    -fx-text-fill: #080501;
}

CheckBox {
    -fx-text-fill: #080501;
}

Label {
    -fx-text-fill: #080501;
}

Text {
    -fx-fill: #080501;
}

SVGPath {
    -fx-fill: #080501;
}

Hyperlink {
    -fx-text-fill: orange;
    -fx-underline: false;
}

Hyperlink:visited {
    -fx-text-fill: orange;
}

Hyperlink:hover {
    -fx-text-fill: #080501;
    -fx-underline: true;
}

.tooltip {
    -fx-text-fill: white;
}

.numeric-text-field.invalid {
    -fx-text-fill: #FF434A;
    -fx-text-box-border: #FF434A;
    -fx-focus-color: #FF434A;
}

.text-field-label-wrapper > .label {
    -fx-text-fill: gray;
}

.text-field-label-wrapper > .text-field {
    -fx-alignment: baseline-right;
}

.menu-item:disabled:focused {
    -fx-background: unset;
    -fx-background-color: transparent;
}

.menu-item:disabled:focused > .label {
    -fx-text-fill: black;
}

.lock-toggle {
    -fx-label-padding: 0em;
}

.lock-toggle > .box {
    -fx-alignment: center;
    -fx-content-display: graphic-only;

    -fx-padding: 0.5em 0.1em;

    -fx-background-color: none;
    -fx-border-color: transparent;
    -fx-border-style: solid;
    -fx-border-radius: 0.25em;
}

.lock-toggle:hover > .box {
    -fx-background-color: #d7d7d7;
    -fx-border-color: white;
}

.lock-toggle:focused > .box {
    -fx-border-style: dotted;
    -fx-border-color: black;
}

.lock-toggle > .box > .mark {
    -fx-position-shape: true;
    -fx-scale-x: 0.45;

    -fx-scale-y: 1.50;
    -fx-background-color: #666666;
}

.lock-toggle:selected > .box > .mark {
    -fx-scale-y: 1.27;
    -fx-background-color: black;
}

Nice Blue

Figure 3.3.3.2: Custom theme: "Nice Blue", by EmeraldSnorlax. MIA

Nice blue theme

This theme uses the style.css below.

.root {
    -fx-base: rgb(2, 5, 5);
    -fx-background: rgb(2, 5, 5);
    -fx-control-inner-background: #222B2E;
    -fx-accent: rgb(17,122,101);
    -fx-focus-color: rgb(17,122,101);
}

ProgressBar {
    -fx-control-inner-background: rgb(21,67,96);
    -fx-progress-color: rgb(17,122,101);
}

ToggleButton:selected {
    -fx-background-color: #29A189;
}

Button {
    -fx-text-fill: #faebd7;
}

ToggleButton {
    -fx-text-fill: #faebd7;
}

CheckBox {
    -fx-text-fill: #faebd7;
}

Label {
    -fx-text-fill: #faebd7;
}

Text {
    -fx-fill: #faebd7;
}

SVGPath {
    -fx-fill: #faebd7;
}

Hyperlink {
    -fx-text-fill: rgb(17,122,101);
    -fx-underline: false;
}

Hyperlink:visited {
    -fx-text-fill: rgb(17,122,101);
}

Hyperlink:hover {
    -fx-text-fill: rgb(21,67,96);
    -fx-underline: true;
}

.numeric-text-field.invalid {
    -fx-text-fill: #FF434A;
    -fx-text-box-border: #FF434A;
    -fx-focus-color: #FF434A;
}

.text-field-label-wrapper > .label {
    -fx-text-fill: gray;
}

.text-field-label-wrapper > .text-field {
    -fx-alignment: baseline-right;
}

.menu-item:disabled:focused {
    -fx-background: unset;
    -fx-background-color: transparent;
}

.menu-item:disabled:focused > .label {
    -fx-text-fill: white;
}

.lock-toggle {
    -fx-label-padding: 0em;
}

.lock-toggle > .box {
    -fx-alignment: center;
    -fx-content-display: graphic-only;

    -fx-padding: 0.5em 0.1em;

    -fx-background-color: none;
    -fx-border-color: transparent;
    -fx-border-style: solid;
    -fx-border-radius: 0.25em;
}

.lock-toggle:hover > .box {
    -fx-background-color: #222B2E;
    -fx-border-color: black;
}

.lock-toggle:focused > .box {
    -fx-border-style: dotted;
    -fx-border-color: white;
}

.lock-toggle > .box > .mark {
    -fx-position-shape: true;
    -fx-scale-x: 0.45;

    -fx-scale-y: 1.50;
    -fx-background-color: #999;
}

.lock-toggle:selected > .box > .mark {
    -fx-scale-y: 1.27;
    -fx-background-color: white;
}