All Downloads are FREE. Search and download functionalities are using the official Maven repository.

theme.dark.dark_theme.css Maven / Gradle / Ivy

The newest version!
/*
 * Copyright (c) 2011-2019 JFXtras
 *  All rights reserved.
 *
 *  Redistribution and use in source and binary forms, with or without
 *  modification, are permitted provided that the following conditions are met:
 *      * Redistributions of source code must retain the above copyright
 *        notice, this list of conditions and the following disclaimer.
 *      * Redistributions in binary form must reproduce the above copyright
 *        notice, this list of conditions and the following disclaimer in the
 *        documentation and/or other materials provided with the distribution.
 *      * Neither the name of the organization nor the
 *        names of its contributors may be used to endorse or promote products
 *        derived from this software without specific prior written permission.
 *
 *  THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 *  ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 *  WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 *  DISCLAIMED. IN NO EVENT SHALL  BE LIABLE FOR ANY
 *  DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 *  (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 *  LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
 *  ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 *  (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 *  SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */

@import "base.css";

.root {
  background_color: #252525;
  scroll_pane_background_color: background_color;
  dialog_background_color: background_color;

  tab_pane_background_color: #2e2e2e;
}

/* To be used in "background" Panes */
.background {
  -fx-background-color: #252525;
}

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

.item-title {
  -fx-text-fill: white;
  -fx-opacity: 0.6;
}

/*******************************************************************************
 *                                                                             *
 * Common Styles                                                               *
 *                                                                             *
 * These are styles that give a standard look to a whole range of controls     *
 *                                                                             *
 ******************************************************************************/

/* ====   CONTROLS WITH ARROW BUTTONS ======================================= */

.menu-button,
.choice-box,
.combo-box-base,
.split-menu-button {
  arrow_color: white;
}

/* ====   CONTROLS WITH CELLS   ============================================= */

.list-view,
.table-view,
.tree-view,
.tree-table-view,
.combo-box-popup {
  cell_hover_color: #515151;
  cell_pressed_color: #3e3e3e;

  cell_selected_unfocused_color: cell_hover_color;

  cell_selected_color: derive(accent_color, -35%);
  cell_selected_hover_color: derive(accent_color, -20%);
  cell_selected_pressed_color: derive(accent_color, 60%);
}

/*******************************************************************************
 *                                                                             *
 * Text Nodes                                                                  *
 *                                                                             *
 ******************************************************************************/

.label {
  text_color: white;
}

Text {
  text_color: white;
}

/*******************************************************************************
 *                                                                             *
 * Button and ToggleButton                                                     *
 *                                                                             *
 ******************************************************************************/

.button, .toggle-button {
  button_background_color: #333333;
  background_pressed_color: #666666;

  border_hover_color: #858585;

  text_color: white;
  default_button_text_color: white;

  focus_ring_border_color: white;
}

.button {
  border_hover_default_color: derive(accent_color, 70%);
}

.toggle-button {
  border_hover_selected_color: derive(accent_color, 70%);
}

/*******************************************************************************
 *                                                                             *
 * Check Box                                                                   *
 *                                                                             *
 ******************************************************************************/
.check-box {
  text_color: white;

  box_background_color: #111;
  box_border_color: #cccccc;
  box_border_hover_color: white;

  indeterminate_mark_color: #cccccc;
  indeterminate_box_pressed_color: #111;

  focus_ring_color: white;
}

/* -- indeterminate - hover */
.check-box:indeterminate:hover > .box > .mark {
  -fx-background-color: white;
}

/* -- focused - hover */
.check-box:focused:hover > .box {
  -fx-border-color: focus_ring_color, box_border_hover_color;
}

/*******************************************************************************
 *                                                                             *
 * Hyperlink                                                                  *
 *                                                                             *
 ******************************************************************************/

.hyperlink {
  hyperlink_hover_color: derive(accent_color, 25%);
  hyperlink_pressed_color: derive(accent_color, -15%);

  hyperlink_disabled_color: #999999;
}

.hyperlink:disabled {
  -fx-opacity: 0.5;
}

/*******************************************************************************
 *                                                                             *
 * Radio Button                                                                *
 *                                                                             *
 ******************************************************************************/

.radio-button {
  text_color: white;

  radio_background_color: #111;
  background_pressed_color: #111;

  border_color: #cccccc;
  border_hover_color: white;

  dot_color: #111;
  dot_selected_color: #cccccc;
  dot_selected_hover_color: white;

  focus_ring_color: white;
}

/*******************************************************************************
 *                                                                             *
 * Tooltip                                                                     *
 *                                                                             *
 ******************************************************************************/

.tooltip {
  tooltip_background_color: #2b2b2b;
  border_color: #767676;
  text_color: white;
}

/*******************************************************************************
 *                                                                             *
 * ToolBar                                                                     *
 *                                                                             *
 ******************************************************************************/

/* Toolbar and light buttons, togglebuttons, menubuttons, splitmenubuttons style */
.tool-bar, .light {
  button_hover_color: #444;
  button_pressed_color: #333333;
}

/*******************************************************************************
 *                                                                             *
 * Scroll Bar and Scroll Pane                                                  *
 *                                                                             *
 ******************************************************************************/

.scroll-bar {
  thumb_color: #52565a;
  thumb_hover_color: #7d8183;
  thumb_pressed_color: #a9abad;

  track_color: #29292a;

  inc_dec_button_color: #2a2d30;
  inc_dec_button_hover_color: #3c4145;
  inc_dec_button_pressed_color: #a8abac;

  arrow_color: white;
  arrow_pressed_color: #111;
}

.scroll-pane {
  corner_background_color: #29292a;
}

.list-view > .virtual-flow > .corner,
.tree-view > .virtual-flow > .corner,
.table-view > .virtual-flow > .corner,
.tree-table-view > .virtual-flow > .corner {
  corner_background_color: #29292a;
}

/*******************************************************************************
 *                                                                             *
 * Combo Box                                                                   *
 *                                                                             *
 ******************************************************************************/

.combo-box-base {
  text_color: white;

  /* border */
  border_color: #666666;
  border_hover_color: #999999;
  border_focused_color: white;
  border_pressed_color: #666666;

  /* background */
  combo_box_background_color: #111;
  background_pressed_color: #333333;

  /* editable */
  combo_box_editable_button_hover_color: #444;
  combo_box_editable_focused_button_hover_color: #e6e6e6;
  combo_box_editable_focused_background_color: white;
  combo_box_editable_focused_arrow_color: #111;
}

.combo-box-popup {
  list_cell_color: #2b2b2b;
  list_cell_hover_color: #545454;

  list_cell_border_color: #767676;
}

/*******************************************************************************
 *                                                                             *
 * Rating (ControlsFX)                                                         *
 *                                                                             *
 ******************************************************************************/

.rating {
  star_color: #6d6d6d;
}

.rating:disabled {
  -fx-opacity: .8;
}

/*******************************************************************************
 *                                                                             *
 * Text Common (TextField, PasswordField, TextArea)                            *
 *                                                                             *
 ******************************************************************************/

.text-input {
  border_color: #666;
  border_hover_color: #999;
  border_disabled_color: #333;

  text_input_background_color: #111;
  background_focused_color: #fff;
  background_hover_color: #111;
  background_disabled_color: #111;

  text_color: white;
  text_focused_color: #111;
  text_disabled_color: #333;
  prompt_text_color: #777;

  highlight_color: accent_color;
  highlighted_text_color: white;

  graphic_color: #747474;
}

/*******************************************************************************
 *                                                                             *
 * Menu Button                                                                 *
 *                                                                             *
 ******************************************************************************/

.menu-button {
  menu_button_background_color: #333;
  menu_button_text_color: white;
  menu_border_hover_color: #858585;
  menu_button_pressed_color: #666;
}

/*******************************************************************************
 *                                                                             *
 * Progress Bar                                                                *
 *                                                                             *
 ******************************************************************************/

.progress-bar {
  progress_background_color: #333;
}

/*******************************************************************************
 *                                                                             *
 * Slider                                                                      *
 *                                                                             *
 ******************************************************************************/

.slider {
  track_hover_color: #999999;
  thumb_hover_color: #f2f2f2;

  thumb_pressed_color: #767676;
}

/*******************************************************************************
 *                                                                             *
 * Toggle Switch (ControlsFX)                                                  *
 *                                                                             *
 ******************************************************************************/

.toggle-switch {
  text_color: white;

  /* Unselected */
  unselected_color: #111;
  unselected_border_color: #cccccc;
  thumb_unselected_color: #cccccc;
  /* --    hover */
  unselected_hover_color: #111;
  unselected_border_hover_color: white;
  thumb_unselected_hover_color: white;

  /* Selected */
  selected_color: accent_color;
  selected_border_color: accent_color;
  thumb_selected_color: white;
  /* --    hover */
  selected_hover_color: derive(accent_color, -20%);

  /* Pressed */
  pressed_color: #999999;
  pressed_border_color: pressed_color;
  thumb_pressed_color: white;
}

/*******************************************************************************
 *                                                                             *
 * Spinner                                                                     *
 *                                                                             *
 ******************************************************************************/

.spinner {
  spinner_background_color: #111;
  spinner_border_color: #444;

  arrow_button_hover_color: #333;
  arrow_button_pressed_color: #222;

  arrow_color: #999;
  arrow_pressed_color: #999;
}

.spinner > .text-field {
  text_color: white;
}

/*******************************************************************************
 *                                                                             *
 * Date Picker                                                                 *
 *                                                                             *
 ******************************************************************************/

.date-picker {
  graphic_color: white;
  graphic_focused_color: #111;
  graphic_disabled_color: #333;

  text_color: white;
  text_focused_color: #111;

  text_selected_color: white;
  text_hover_color: white;

  text_days_from_other_months_color: #7c7c7c;

  date_picker_background_color: #111;
  background_focused_color: #fff;
  background_hover_color: date_picker_background_color;

  border_color: #616161;
  border_hover_color: #999999;

  popup_border_color: #111;

  spinner_button_hover_color: #999;

  cell_background_color: #111;

  day_cell_background_color: #1f1f1f;
  day_cell_border_hover_color: #999;

  day_cell_background_days_from_other_months_color: #2b2b2b;

  today_border_color: derive(accent_color, -60%);

  text_field_disabled_background_color: #111;
}

/*******************************************************************************
 *                                                                             *
 * Choice Box                                                                  *
 *                                                                             *
 ******************************************************************************/

.choice-box {
  text_color: white;

  border_color: #666666;
  border_hover_color: #999999;
  border_focused_color: white;
  border_pressed_color: #666666;

  choice_box_background_color: #111;
  background_pressed_color: #333333;
}

/*******************************************************************************
 *                                                                             *
 * List View                                                                   *
 *                                                                             *
 ******************************************************************************/

.list-view {
  text_color: white;

  alternate_row_color: #3c3c3c;

  list_view_background_color: #333;
  border_color: #171717;
}

/*******************************************************************************
 *                                                                             *
 * Table View                                                                  *
 *                                                                             *
 ******************************************************************************/

.table-view {
  table_background_color: #333;
  table_view_border_color: #171717;

  alternate_row_color: #3c3c3c;

  text_color: white;
  hover_text_color: white;
  selected_text_color: white;
  selected_unfocused_text_color: white;

  sort_arrow_color: white;
  show_hide_image_color: sort_arrow_color;
}

/* Check Box Table Cell */
.check-box-table-cell {
  table_check_box_cell_box_background_color: transparent;
  table_check_box_cell_box_border_color: white;
  table_check_box_cell_mark_color: white;
}

/*******************************************************************************
 *                                                                             *
 * Tree View                                                                   *
 *                                                                             *
 ******************************************************************************/

.tree-view {
  tree_view_background_color: #333;

  alternate_row_color: #3c3c3c;

  text_color: white;
  text_selected_color: white;
  text_hover_color: text_color;

  arrow_color: white;
  arrow__hover_color: text_hover_color;
  arrow_selected_hover_color: text_selected_color;
}

/*******************************************************************************
 *                                                                             *
 * Tree Table View                                                             *
 *                                                                             *
 ******************************************************************************/

.tree-table-view {
  table_border_color: #171717;
  table_background_color: #333;

  alternate_row_color: #3c3c3c;

  table_text_color: #fff;
  table_text_selected_color: #fff;

  collapse_expand_arrow_color: table_text_color;
  sort_arrow_color: table_text_color;

  table_column_vline_color: #3e3e3e;

  /* Color of button that filters columns */
  show_hide_image_color: white;
}

/*******************************************************************************
 *                                                                             *
 * Tab Pane and Tabs                                                           *
 *                                                                             *
 ******************************************************************************/

.tab-pane {
  tab_pane_bottom_border_color: tab_pane_background_color;

  tab_text_color: white;
  tab_text_hover_color: derive(accent_color, 50%);
  tab_text_selected_hover_color: derive(accent_color, 30%);

  tab_selected_background_color: #1e1e1e;
  tab_selected_border_color: #1e1e1e;

  more_button_hover_color: #444;
  more_button_pressed_color: #333333;
  more_button_icon_color: white;
}

/*******************************************************************************
 *                                                                             *
 * Context Menu, Menus, MenuBar and MenuItem                                   *
 *                                                                             *
 ******************************************************************************/

/****************************** Context Menu **********************************/

.context-menu {
  menu_background_color: #2b2b2b;
  context_menu_border_color: #777677;

  separator_color: #555555;
}

/********************************* Menu Bar ************************************/

.menu-bar {
  text_color: white;

  menu_button_hover_color: #404040;
}

.menu-item {
  text_color: white;

  menu_background_color: #2b2b2b;

  graphic_color: #aaaaaa;

  hover_color: #404040;
  pressed_color: #555555;
}

/*******************************************************************************
 *                                                                             *
 * Titled Pane                                                                 *
 *                                                                             *
 ******************************************************************************/

.titled-pane {
  text_color: white;

  title_background_color: #1f1f1f;
  title_background_hover_color: #4a4a4a;

  border_color: #494949;

  arrow_color: white;

  content_background_color: #111;
}

/*******************************************************************************
 *                                                                             *
 * Progress Indicator                                                          *
 *                                                                             *
 ******************************************************************************/

.progress-indicator {
  text_color: white;
}

/*******************************************************************************
 *                                                                             *
 * Separator                                                                   *
 *                                                                             *
 ******************************************************************************/

.separator {
  border_color: #777;
}

/*******************************************************************************
 *                                                                             *
 * SplitMenuButton                                                             *
 *                                                                             *
 ******************************************************************************/

.split-menu-button {
  button_background_color: #333333;
  background_pressed_color: #666666;

  border_hover_color: #858585;

  light_button_hover_color: #505050;

  text_color: white;

  focus_ring_border_color: white;
}

/*******************************************************************************
 *                                                                             *
 * SplitPane                                                                   *
 *                                                                             *
 ******************************************************************************/

.split-pane {
  border_color: #353535;
}

/*******************************************************************************
 *                                                                             *
 * Dialogs                                                                     *
 *                                                                             *
 ******************************************************************************/

.dialog-pane {
  -fx-padding: 0.75em 0.5em 0.5em 0.5em;
}

/*******************************************************************************
 *                                                                             *
 * Status Bar (ControlsFX)                                                     *
 *                                                                             *
 ******************************************************************************/

.status-bar {
  background_color: #252525;
}

/*******************************************************************************
 *                                                                             *
 * TabPane With Underline                                                      *
 *                                                                             *
 ******************************************************************************/

.tab-pane.underlined {
  text_color: white;
  tab_not_selected_text_color: #999;
  tab_hover_text_color: #ddd;
}

/*******************************************************************************
 *                                                                             *
 * Range Slider (ControlsFX)                                                   *
 *                                                                             *
 ******************************************************************************/

/* NEED TO DO A PR ON CONTROLSFX FIRST, TO FIX THE RANGE SLIDER SKIN (LIKE I
   FIXED IN THE MASTER (JAVA 8) BRANCH
.range-slider {
    track_hover_color: #999999;
    thumb_hover_color: #f2f2f2;

    thumb_pressed_color: #767676;
}*/

/*******************************************************************************
  *                                                                             *
  * Segoe MDL2 Icon Font                                                        *
  *                                                                             *
  ******************************************************************************/

.mdl2-assets {
  text_color: white;
}

/*******************************************************************************
 *                                                                             *
 * Dialog                                                                      *
 *                                                                             *
 ******************************************************************************/

.dialog-pane {
  text_color: white;
}

/*******************************************************************************
 *                                                                             *
 * ColorPicker                                                                 *
 *                                                                             *
 ******************************************************************************/

.color-palette {
  popup_background_color: #2b2b2b;
  popup_border_color: #767676;
}

.custom-color-dialog {
  controls_background_color: #2b2b2b;
  controls_border_color: #767676;
}

.color-picker.button {
  button_background_color: #333333;
  background_pressed_color: #666666;

  border_hover_color: #858585;

  text_color: white;

  focus_ring_border_color: white;
}




© 2015 - 2024 Weber Informatics LLC | Privacy Policy