├── LICENSE ├── README.md └── hiberbee ├── hiberbee.css └── hiberbee.png /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Matt Coley 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # FX Themes 2 | 3 | A collection of JavaFX themes I've made. Demo screenshots are from [FX Sampler](https://github.com/Col-E/FxSampler). 4 | 5 | | Name | Description | Screenshot | 6 | | --------------- | -------------------------------------------------------- | ----------------------------- | 7 | | Hiberbee (Dark) | A simple re-creation of the Hiberbee scheme from FlatLAF | ![img](hiberbee/hiberbee.png) | 8 | 9 | -------------------------------------------------------------------------------- /hiberbee/hiberbee.css: -------------------------------------------------------------------------------- 1 | /* JavaFX theme by Matt Coley 2 | * 3 | * Based on Hiberbee (Dark) from FlatLAF. 4 | * Some liberties were taken to changing a few things. 5 | */ 6 | 7 | /* root, used to define colors */ 8 | * { 9 | -fx-base: rgb(12, 12, 12); 10 | -fx-dark-text-color: rgb(191, 191, 191); 11 | -fx-mid-text-color: rgb(141, 141, 141); 12 | -fx-light-text-color: rgb(191, 191, 191); 13 | -fx-accent-base: rgb(250, 170, 31); 14 | -fx-accent-light: rgb(250, 189, 81); 15 | -fx-accent-lighter: rgb(250, 208, 131); 16 | -fx-accent: -fx-accent-base; 17 | -fx-focus-color: -fx-accent; 18 | -fx-border: rgb(90, 90, 90); 19 | -fx-border-focus: rgb(125, 125, 125); 20 | -fx-bg: rgb(50, 50, 50); 21 | -fx-bg-dark: rgb(40, 40, 40); 22 | -fx-bg-darker: rgb(25, 27, 30); 23 | -fx-bg-light: rgb(65, 65, 65); 24 | -fx-bg-lighter: rgb(77, 77, 77); 25 | } 26 | 27 | /* ========== Buttons ======================== */ 28 | .check-box > .box, 29 | .radio-button > .radio, 30 | .button { 31 | -fx-border-width: 1px; 32 | -fx-border-color: -fx-border; 33 | -fx-border-radius: 2px; 34 | -fx-background-radius: 2px; 35 | -fx-background-color: -fx-bg; 36 | } 37 | .check-box:hover > .box, 38 | .radio-button:hover > .radio, 39 | .button:hover { 40 | /* Button-like controls get accent border when hovered */ 41 | -fx-border-color: -fx-accent; 42 | -fx-background-color: -fx-bg-lighter; 43 | } 44 | .check-box > .box, 45 | .radio-button > .radio { 46 | /* The box/radio are brighter than base bg */ 47 | -fx-background-color: -fx-bg-light; 48 | } 49 | .radio-button > .radio { 50 | /* Radio buttons must be round */ 51 | -fx-background-radius: 20px; 52 | -fx-border-radius: 20px; 53 | } 54 | .button:pressed { 55 | /* Button gets dimmer when pressed compared to hover state */ 56 | -fx-background-color: -fx-bg-light; 57 | -fx-text-fill: -fx-mid-text-color; 58 | } 59 | 60 | /* ========== ComboBox ======================== */ 61 | .combo-box { 62 | -fx-border-width: 1px; 63 | -fx-border-color: -fx-border; 64 | -fx-border-radius: 2px; 65 | -fx-background-radius: 2px; 66 | -fx-background-color: -fx-bg-light; 67 | } 68 | .combo-box:focused { 69 | /* Brighter border on selection */ 70 | -fx-border-color: -fx-border-focus; 71 | } 72 | .combo-box:focused > .arrow-button { 73 | /* Brighter border on selection */ 74 | -fx-border-color: -fx-border-focus; 75 | } 76 | .combo-box > .arrow-button { 77 | -fx-background-color: -fx-bg; 78 | -fx-border-width: 0 0 0 1px; 79 | -fx-border-color: -fx-border; 80 | } 81 | .combo-box > .arrow-button > .arrow { 82 | -fx-background-color: -fx-accent; 83 | } 84 | .combo-box:showing > .arrow-button, 85 | .combo-box > .arrow-button:hover { 86 | /* Clearly indicate when button is hovered or menu open */ 87 | -fx-background-color: -fx-bg-light; 88 | } 89 | .combo-box-popup > .list-view * .list-cell:selected { 90 | -fx-background-color: -fx-bg-darker; 91 | -fx-text-fill: -fx-accent; 92 | } 93 | .combo-box-popup > .list-view * .list-cell:hover { 94 | -fx-background-color: -fx-bg-darker; 95 | -fx-text-fill: -fx-accent; 96 | } 97 | /* ========== TextField ======================== */ 98 | .text-field { 99 | -fx-border-width: 1px; 100 | -fx-border-color: -fx-border; 101 | -fx-border-radius: 2px; 102 | -fx-background-radius: 2px; 103 | -fx-background-color: -fx-bg-light; 104 | } 105 | .text-field:focused { 106 | /* Text selection is black text on bright accent background */ 107 | -fx-border-color: -fx-border-focus; 108 | -fx-highlight-fill: -fx-bg-darker; 109 | -fx-highlight-text-fill: -fx-accent; 110 | } 111 | 112 | /* ========== Slider ======================== */ 113 | .slider {} 114 | .slider > .track { 115 | -fx-background-color: -fx-bg-light; 116 | -fx-background-insets: 1; 117 | } 118 | .slider > .track { 119 | -fx-background-color: -fx-bg-light; 120 | -fx-background-insets: 1; 121 | } 122 | .slider > .axis {} 123 | .slider > .thumb { 124 | -fx-border-width: 0; 125 | -fx-background-color: -fx-accent; 126 | } 127 | .slider:pressed .thumb { 128 | /* Gives thumb a halo when slider is pressed */ 129 | -fx-border-radius: 200px; 130 | -fx-border-insets: -5px; 131 | -fx-border-width: 5px; 132 | -fx-border-color: rgba(255, 255, 255, 0.1); 133 | } 134 | 135 | /* ========== ProgressBar ======================== */ 136 | .progress-bar {} 137 | .progress-bar > .track { 138 | -fx-background-color: -fx-bg-light; 139 | -fx-background-insets: 1px; 140 | } 141 | .progress-bar > .track { 142 | -fx-background-color: -fx-bg-light; 143 | -fx-background-insets: 1px; 144 | } 145 | .progress-bar > .bar { 146 | -fx-border-width: 0; 147 | -fx-background-color: -fx-accent; 148 | } 149 | 150 | /* ========== Spinner ======================== */ 151 | .spinner { 152 | -fx-border-width: 1px; 153 | -fx-border-color: -fx-border; 154 | -fx-border-radius: 2px; 155 | -fx-background-radius: 2px; 156 | -fx-background-color: -fx-bg-light; 157 | } 158 | .spinner:focused, 159 | .spinner:contains-focus { 160 | /* Brighter border on selection */ 161 | -fx-border-color: -fx-border-focus; 162 | } 163 | .spinner > .text-field { 164 | /* Border on left, match parent color/shape */ 165 | -fx-background-color: transparent; 166 | -fx-background-radius: inherit; 167 | -fx-border-width: 0 1px 0 0; 168 | } 169 | .spinner > .increment-arrow-button, 170 | .spinner > .decrement-arrow-button { 171 | /* No border, just fill shape with bg color */ 172 | -fx-border-width: 0; 173 | -fx-background-color: -fx-bg; 174 | -fx-background-radius: inherit; 175 | } 176 | .spinner > .increment-arrow-button { 177 | /* Border on bottom to separate from decrement arrow below */ 178 | -fx-border-width: 0 0 1px 0; 179 | -fx-border-color: -fx-border; 180 | } 181 | .spinner:contains-focus > .increment-arrow-button { 182 | /* Briger border on selection */ 183 | -fx-border-color: -fx-border-focus; 184 | } 185 | .spinner > .increment-arrow-button:hover, 186 | .spinner > .decrement-arrow-button:hover { 187 | /* Clearly indicate which button is hovered */ 188 | -fx-background-color: -fx-bg-light; 189 | } 190 | .spinner > .increment-arrow-button > .increment-arrow, 191 | .spinner > .decrement-arrow-button > .decrement-arrow { 192 | /* Arrow graphics are accent color */ 193 | -fx-background-color: -fx-accent; 194 | } 195 | .spinner > .increment-arrow-button:hover > .increment-arrow, 196 | .spinner > .decrement-arrow-button:hover > .decrement-arrow { 197 | /* Arrow graphics when hovered are brighter accent color */ 198 | -fx-background-color: -fx-accent-light; 199 | } 200 | .spinner > .increment-arrow-button:pressed > .increment-arrow, 201 | .spinner > .decrement-arrow-button:pressed > .decrement-arrow { 202 | /* Arrow graphics when pressed are brighter accent color */ 203 | -fx-background-color: -fx-accent-lighter; 204 | } 205 | 206 | /* ========== Menu ======================== */ 207 | .menu-bar { 208 | -fx-border-width: 0 0 1px 0; 209 | -fx-border-color: -fx-border; 210 | -fx-background-radius: 2px; 211 | -fx-background-color: -fx-bg-dark; 212 | } 213 | .menu-item, 214 | .menu { 215 | -fx-padding: 10px 20px 10px 20px; 216 | } 217 | .menu-item:focused > .label, 218 | .menu-item:hover > .label, 219 | .menu:hover > .label, 220 | .menu:showing > .label { 221 | -fx-background-color: -fx-accent; 222 | -fx-text-fill: -fx-bg-darker; 223 | } 224 | /* Menu's spawn context menu's as children */ 225 | .context-menu { 226 | -fx-padding: 0; 227 | -fx-background-color: -fx-bg-dark; 228 | -fx-border-color: -fx-border; 229 | -fx-border-width: 1px; 230 | } 231 | /* Misc menu elements */ 232 | .separator, 233 | .separator > .line { 234 | -fx-background-color: -fx-border; 235 | } 236 | .separator:horizontal > .line { 237 | /* Having 1px on the bottom and 0px elsewhere prevents an 238 | awkward empty space between the separator and the item above it */ 239 | -fx-border-width: 0 0 1px 0; 240 | -fx-border-insets: 0; 241 | } 242 | 243 | /* ========== Lists, Tables, and Trees ======================== */ 244 | .table-view, 245 | .list-view, 246 | .tree-view { 247 | -fx-border-width: 1px; 248 | -fx-border-color: -fx-border; 249 | -fx-border-radius: 0px; 250 | -fx-background-radius: 0px; 251 | -fx-background-color: -fx-bg-dark; 252 | } 253 | .table-cell, 254 | .table-row-cell, 255 | .tree-table-row-cell, 256 | .tree-cell, 257 | .list-cell { 258 | -fx-background-color: transparent; 259 | } 260 | .table-cell:focused, 261 | .table-row-cell:focused, 262 | .tree-table-row-cell:focused, 263 | .tree-cell:focused, 264 | .list-view * .list-cell:focused { 265 | -fx-background-color: -fx-accent; 266 | -fx-text-fill: -fx-bg-darker; 267 | /* NOTE: We are explicit with the list-view being the parent of the list-cell 268 | since multiple components re-use the list-cell, like combo-box. 269 | We do not want to override those control's existing designs. */ 270 | } 271 | .tree-cell:focused > .tree-disclosure-node > .arrow, 272 | .tree-table-row-cell:focused > .tree-disclosure-node > .arrow { 273 | -fx-background-color: -fx-bg-darker; 274 | } 275 | /* Most table elements we want to just be transparent, using the parent view color */ 276 | .table-column, 277 | .filler, 278 | .nested-column-header, 279 | .column-header-background { 280 | -fx-border-width: 0; 281 | -fx-background-color: transparent; 282 | } 283 | /* Handle normal vs selected table row color differences */ 284 | .table-row-cell:focused .text { 285 | -fx-fill: -fx-bg-darker; 286 | } 287 | .table-row-cell .text { 288 | /* The text color for table rows needs to be reset for some reason */ 289 | -fx-fill: -fx-light-text-color; 290 | } 291 | 292 | /* ========== Tabs ======================== */ 293 | .tab-pane { 294 | -fx-tab-min-width: 100px; 295 | -fx-border-width: 0; 296 | } 297 | .tab-header-area { 298 | -fx-padding: 0; 299 | } 300 | .tab-header-background { 301 | -fx-background-color: -fx-bg; 302 | -fx-border-width: 0; 303 | } 304 | .tab { 305 | -fx-padding: 4px; 306 | -fx-background-color: -fx-bg; 307 | -fx-background-radius: 0; 308 | } 309 | /* Border formatting for top-aligned tabs --> border below tab */ 310 | .tab-pane:top > .tab-header-area > .headers-region > .tab { 311 | -fx-border-width: 0 0 2px 0; 312 | -fx-border-color: -fx-bg; 313 | } 314 | /* Border formatting for bottom-aligned tabs --> border on top of tab */ 315 | .tab-pane:bottom > .tab-header-area > .headers-region > .tab { 316 | -fx-border-width: 2px 0 0 0; 317 | -fx-border-color: -fx-bg; 318 | } 319 | /* Border formatting for left-aligned tabs --> border on right of tab */ 320 | .tab-pane:left > .tab-header-area > .headers-region > .tab { 321 | -fx-border-width: 0 2px 0 0; 322 | -fx-border-color: -fx-bg; 323 | } 324 | /* Border formatting for right-aligned tabs --> border on left of tab */ 325 | .tab-pane:right > .tab-header-area > .headers-region > .tab { 326 | -fx-border-width: 0 0 0 2px; 327 | -fx-border-color: -fx-bg; 328 | } 329 | /* Color for selected tab is same regardless of alignment */ 330 | .tab:selected { 331 | /* Because this rule is not as specific, we need IMPORTANT flag */ 332 | -fx-border-color: -fx-accent !IMPORTANT; 333 | } 334 | /* We don't want a focus indicator, we're using the border, and that's it */ 335 | .tab:selected .focus-indicator { 336 | -fx-border-color: transparent; 337 | } 338 | 339 | /* ========== Scrollbar ======================== */ 340 | .scroll-bar { 341 | -fx-background-color: transparent; 342 | } 343 | .scroll-bar .thumb { 344 | -fx-background-color: -fx-bg-light; 345 | -fx-background-radius: 0; 346 | } 347 | .scroll-bar .thumb:hover, 348 | .scroll-bar .thumb:pressed { 349 | -fx-background-color: -fx-bg-lighter; 350 | } 351 | .scroll-bar .increment-button, 352 | .scroll-bar .decrement-button { 353 | -fx-background-color: transparent; 354 | -fx-border-width: 0; 355 | } 356 | .scroll-bar .increment-button:hover, 357 | .scroll-bar .decrement-button:hover { 358 | -fx-background-color: transparent; 359 | -fx-border-width: 0; 360 | } 361 | .scroll-bar .increment-button .increment-arrow, 362 | .scroll-bar .decrement-button .decrement-arrow { 363 | -fx-background-color: -fx-border; 364 | } 365 | .scroll-bar .increment-button:hover .increment-arrow, 366 | .scroll-bar .decrement-button:hover .decrement-arrow { 367 | -fx-background-color: -fx-border-focus; 368 | } 369 | 370 | /* ========== Variants ======================== */ 371 | .square { 372 | /* Override roundness */ 373 | -fx-border-radius: 0px; 374 | -fx-background-radius: 0px; 375 | } 376 | .round { 377 | /* This is enough to make anything round */ 378 | -fx-border-radius: 200px; 379 | -fx-background-radius: 200px; 380 | } 381 | /* Need to address some edge cases */ 382 | .round > .arrow-button { 383 | /* Single button, make the right side round */ 384 | -fx-background-radius: 0 200px 200px 0; 385 | } 386 | .round > .increment-arrow-button { 387 | /* Top button, make the top right corner round */ 388 | -fx-background-radius: 0 13px 0 0; 389 | } 390 | .round > .decrement-arrow-button { 391 | /* Bottom button, make the bottom right corner round */ 392 | -fx-background-radius: 0 0 13px 0; 393 | } -------------------------------------------------------------------------------- /hiberbee/hiberbee.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Col-E/FxThemes/a5281e38b21031d9518279b18e5b902ca4d49c67/hiberbee/hiberbee.png --------------------------------------------------------------------------------