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