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 1: Custom theme: "Light", by jackjt8. Sorry

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 2: Custom theme: "Nice Blue", by EmeraldSnorlax. MIA

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