kibana-123/src/ui/public/styles/dark-theme.less

Kibana is an open source (Apache Licensed), browser based analytics and search dashboard for Elasticsearch. Kibana is a snap to setup and start using. Kibana strives to be easy to get started with, while also being flexible and powerful, just like Elastic

@import "~ui/styles/dark-variables.less";
@import "~ui/styles/bootstrap/mixins.less";

.tab-dashboard.theme-dark {
  color: @text-color;
  background-color: @dashboard-bg;

// /src/ui/public/styles/bootstrap/scaffolding.less
  a {
    color: @link-color;

    &:hover,
    &:focus {
      color: @link-hover-color;
    }
  }


// /src/ui/public/styles/bootstrap/forms.less
  .form-control {
    color: @input-color;
    background-color: @input-bg;
    border-color: @input-border;
    &[disabled],
    &[readonly],
    fieldset[disabled] & {
      background-color: @input-bg-disabled;
    }
  }


// /src/ui/public/styles/bootstrap/panels.less
  .panel {
    background-color: @panel-bg;
  }


// /src/ui/public/styles/bootstrap/tables.less
  .table {
    // Cells
    > thead,
    > tbody,
    > tfoot {
      > tr {
        > th,
        > td {
          border-top-color: @table-border-color;
        }
      }
    }
    // Bottom align for column headings
    > thead > tr > th {
      border-bottom-color: @table-border-color;
    }
    // Account for multiple tbody instances
    > tbody + tbody {
      border-top-color: @table-border-color;
    }

    // Nesting
    .table {
      background-color: @table-nested-bg;
    }
  }

  table {
    th {
      i.fa-sort {
        color: @table-sort-color;
      }

      i.fa-sort-asc,
      i.fa-sort-down {
        color: @table-sort-asc-color;
      }

      i.fa-sort-desc,
      i.fa-sort-up {
        color: @table-sort-desc-color;
      }
    }
  }


// /src/ui/public/styles/bootstrap/buttons.less
  .btn {
    background-color: @dark-button-bg;
    color: @dark-button-font;

    &:hover,
    &:focus,
    &.focus {
      color: @btn-default-color;
    }

    .findme {
      font-weight: bold;
    }
  }

  .btn-default {
    .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
  }
  .btn-primary {
    .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
  }


// /src/ui/public/styles/bootstrap/list-group.less
  .list-group-item {
    background-color: @list-group-bg;
    border: 0 none transparent;
    &:nth-child(even) {
      background-color: @gray4;
    }
  }

  a.list-group-item,
  button.list-group-item {
    color: @list-group-link-color;

    .list-group-item-heading {
      color: @list-group-link-heading-color;
    }

    // Hover state
    &:hover,
    &:focus {
      color: @list-group-link-hover-color;
      background-color: @list-group-hover-bg;
    }
  }
  .panel {
    > .panel-body + .table,
    > .panel-body + .table-responsive,
    > .table + .panel-body,
    > .table-responsive + .panel-body {
      border-top-color:@table-border-color;
    }
  }

  .panel-group {
    .panel-heading {
      + .panel-collapse > .panel-body,
      + .panel-collapse > .list-group {
        border-top-color: @panel-inner-border;
      }
    }

    .panel-footer {
      border-top: 0;
      + .panel-collapse .panel-body {
        border-bottom-color: @panel-inner-border;
      }
    }
  }

  .panel-default {
    border-color: @panel-default-border;

    & > .panel-heading {
      color: @panel-default-text;
      background-color: @panel-default-heading-bg;
      border-color: @panel-default-border;

      + .panel-collapse > .panel-body {
        border-top-color: @panel-default-border;
      }
      .badge {
        color: @panel-default-heading-bg;
        background-color: @panel-default-text;
      }
    }
    & > .panel-footer {
      + .panel-collapse > .panel-body {
        border-bottom-color: @panel-default-border;
      }
    }
  }


// /src/ui/public/styles/bootstrap/navs.less
  .nav {
    > li {
      > a {
        &:hover,
        &:focus {
          background-color: @nav-link-hover-bg;
        }
      }
    }
  }


// /src/ui/public/styles/bootstrap/navs.less
  .nav-tabs {
    border-bottom: 1px solid @gray4;
    > li {
      margin-bottom: -2px;
      > a {
        &:hover {
          border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
        }
      }

      &.active > a {
        &,
        &:hover,
        &:focus {
          color: @white;
          background-color: @gray4;
          border: 0 none transparent;
        }
      }
    }
  }


// /src/ui/public/styles/navbar.less
  navbar {
    color: @navbar-default-color;
    background-color: @navbar-default-bg;
    border-color: @navbar-default-border;
    button {
      color: @white;
      background-color: transparent;
    }
  }


// /src/ui/public/styles/base.less
  saved-object-finder {
    .list-group-item {
      a {
        i {
          color: @saved-object-finder-icon-color !important;
        }

        color: @saved-object-finder-link-color !important;
      }
    }

    .finder-options {
      > li {
        &.active {
          background-color: @component-active-bg;
          color: @component-active-color;
          a {
            color: @component-active-color;
          }
        }
      }
    }
  }

  .cell-hover {
    background-color: @table-cell-hover-bg;
  }
  .cell-hover:hover {
    background-color: @table-cell-hover-hover-bg;
  }


// /src/ui/public/styles/spinner.less
  .spinner > div {
    background-color: @spinner-bg;
  }


// /src/ui/public/agg_table/agg_table.less
  .agg-table-paginated {
    tr:hover td {
      background-color: @table-row-hover-bg;
    }

    .cell-hover:hover {
      background-color: @table-cell-hover-hover-bg;
    }
  }


// /src/ui/public/visualize/visualize.less
  .visualize-show-spy {
    border-top-color: @visualize-show-spy-border;
  }

  .visualize-spy-container {
    pre {
      border-color: @visualize-show-spy-border;
      color: @visualize-spy-container-pre-color;
      opacity: 1;
      background-color: @visualize-spy-container-pre-bg;
    }
  }


// /src/ui/public/vislib/styles/_svg.less
  .axis {
    line, path {
      stroke: @svg-axis-color;
    }
  }

  .tick text {
    fill: @svg-tick-text-color;
  }

  .brush .extent {
    stroke: @svg-brush-color;
  }

  .endzone {
    fill: @svg-endzone-bg;
    //opacity: 1;
  }


// /src/ui/public/vislib/styles/_legend.less
  .legend {
    background-color: @dashboard-panel-bg;
  }

  .legend-col-wrapper {

    .legend-ul {
      border-left-color: @sidebar-bg;
      color: @legend-item-color;
    }

  }

  .legend-value-title {
    padding: 3px;

    &:hover {
      background-color: @sidebar-hover-bg;
    }
  }

  .legend-value-full {
    background-color: @gray3;
  }

  .legend-value-details {
    border-bottom: 1px solid @sidebar-bg;

    .filter-button {
      background-color: @sidebar-bg;

      &:hover {
        background-color: @sidebar-hover-bg;
      }
    }
  }



// /src/ui/public/vislib/styles/_layout.less
  .y-axis-title text, .x-axis-title text {
    fill: @vis-axis-title-color;
  }

  .chart-title text {
    fill: @vis-chart-title-color;
  }


// /src/ui/public/vislib/styles/_tilemap.less
  .tilemap {
    border-color: @tilemap-border;
  }

  .tilemap-legend {
    background: @tilemap-legend-base-bg;
    background: @tilemap-legend-bg;
    color: @tilemap-color;
  }

  .tilemap-legend i {
    border-color: @tilemap-legend-i-border;
    background: @tilemap-legend-i-bg;
  }

  .tilemap-info {
    background: @tilemap-info-base-bg;
    background: fade(@tilemap-info-bg, 92%);
  }

  .tilemap-info h2 {
    color: @tilemap-info-header-color;
  }

  .leaflet-control-fit {
    background: @tilemap-leaflet-control-bg;
    outline: 1px @tilemap-leaflet-control-outline;
  }

  .leaflet-container {
    background: @tilemap-leaflet-container-bg !important;
  }

  .leaflet-popup-content-wrapper {
    background: @tooltip-bg !important;
    color: @tooltip-color !important;
  }

  .leaflet-popup-content {
    table {
      thead tr {
        border-bottom-color: @tilemap-leaflet-popup-border;
      }

      tbody tr {
        border-top-color: @tilemap-leaflet-popup-border;
      }
    }
  }

  img.leaflet-tile {
    filter: @tilemap-filter;
  }

  .leaflet-control-attribution {
    background-color: @tilemap-leaflet-footer-bg !important;
    color: @tilemap-leaflet-footer-color !important;
  }

  .leaflet-left {
    .leaflet-control,
    .leaflet-draw-actions {
      a,
      a:hover {
        color: @dark-button-font;
        background-color: @dark-button-bg;
      }
    }
  }


// /src/ui/public/filter_bar/filter_bar.less
  .filter-bar-confirm {
    background: @filter-bar-confirm-bg;
    border-bottom-color: @filter-bar-confirm-border;

    .filter {
      background-color: @filter-bar-confirm-filter-bg;
      color: @filter-bar-confirm-filter-color;
    }
  }

  .filter-bar {
    background: @filter-bar-bar-bg;
    border-bottom-color: @filter-bar-bar-border;

    .filter {
      background-color: @filter-bar-bar-filter-bg;
      color: @filter-bar-bar-filter-color;

      &.negate {
        background-color: @filter-bar-bar-filter-negate-bg;
      }

      a {
        color: @filter-bar-bar-filter-color;
      }
    }
  }

    .filter-bar-condensed {
      background: @filter-bar-bar-condensed-bg;
    }


// /src/ui/public/styles/config.less
  .config {
    border-bottom: 0 none transparent;

    .config-close {
      background-color: @config-close-bg;
    }

    .container-fluid {
      background-color: @config-bg;
    }
  }


// /src/ui/public/styles/list-group-menu.less
  .list-group-menu {
    &.select-mode a{
       color: @list-group-menu-item-select-color;
    }

    .list-group-menu-item {
      color: @list-group-menu-item-color;

      &.active {
        background-color: @list-group-menu-item-active-bg;
      }
      &:hover {
        background-color: @gray2;
      }
      li {
        color: @list-group-menu-item-color;
      }
    }
  }


// /src/ui/public/styles/input.less
  select {
    color: @input-color;
    background-color: @input-bg;
  }


// /src/ui/public/styles/pagination.less
  paginate {
    paginate-controls {
      .pagination-other-pages-list {
        > li {
          a {
            background-color: @dark-button-bg;
            color: @white;
          }
          &.active a {
            color: @paginate-page-link-active-color;
          }
        }
      }
    }
  }


// /src/core_plugins/kibana/public/dashboard/styles/main.less
  .start-screen {
    background-color: @dashboard-bg;
  }

  .gridster {
    background-color: @dashboard-bg;
  }

  dashboard-panel {
    background: @dashboard-panel-bg;
    color: @dashboard-panel-color;

    .panel {
      .panel-heading {
        a {
          color: @dashboard-panel-heading-link-color;
          &:hover {
            color: @dashboard-panel-heading-link-hover-color;
          }
        }
        span.panel-title {
          color: @dashboard-panel-heading-link-color;
        }
        i {
          color: @dashboard-panel-heading-link-color;
          opacity: 1;
        }
      }

      .load-error {
        .fa-exclamation-triangle {
          color: @dashboard-panel-load-error-color;
        }
      }
    }
  }

  saved-object-finder .form-group span {
    background-color: @input-bg;
    color: @dark-button-font;
  }
  saved-object-finder .paginate-heading {
    color: @text-color;
  }
  .kibana-nav-actions .active {
    background-color: @config-bg;
    color: @dark-button-font;
  }
}