wekan/client/components/boards/boardColors.styl

// We define a set of six board colors that we took from the FlatUI palette.
// http://flatuicolors.com
//
// XXX Centralizing all these properties in a single file just because their
// value is derived from the same color, doesn't make any sense. We should
// create a mixin/macro that would generate 6 versions of a given property and
// dispatch this list in the other stylus files.
setBoardColor(color)
  &#header,
  &.sk-spinner div,
  .board-backgrounds-list &.background-box,
  .board-list & a
    background-color: color

  .is-selected .minicard
    border-left: 3px solid color

  button[type=submit].primary, input[type=submit].primary
    background-color: darken(color, 20%)

  &.pop-over .pop-over-list li a:not(.disabled):hover,
  .sidebar .sidebar-content .sidebar-btn:hover,
  .sidebar-list li a:hover
    background-color: lighten(color, 10%)

  &#header ul li.current, &#header-quick-access ul li.current
    border-bottom: 2px solid lighten(color, 10%)

  &#header-quick-access
    background: darken(color, 10%)
    color: white

  &#header #header-main-bar .board-header-btn.emphasis
    background: complement(color)

    &:hover,
    .board-header-btn-close
      background: darken(complement(color), 10%)

    &:hover .board-header-btn-close
      background: darken(complement(color), 20%)

  .materialCheckBox.is-checked
    border-bottom: 2px solid color
    border-right: 2px solid color

  .is-multiselection-active .multi-selection-checkbox
    &.is-checked + .minicard
      background: lighten(color, 90%)

    &:not(.is-checked) + .minicard:hover:not(.minicard-composer)
      background: lighten(color, 97%)

  .toggle-label

    &:after
      background-color: darken(color, 20%)

  .toggle-switch:checked ~ .toggle-label
    background-color: lighten(color, 20%)

    &:after
      background-color: darken(color, 20%)

  @media screen and (max-width: 800px)
    &.pop-over .header
      background: color
      color: white

   &#header ul li.current, &#header-quick-access ul li.current
      border-bottom: 4px solid lighten(color, 20%)

.board-color-nephritis
  setBoardColor(#27AE60)

.board-color-pomegranate
  setBoardColor(#C0392B)

.board-color-belize
  setBoardColor(#2980B9)

.board-color-wisteria
  setBoardColor(#8E44AD)

.board-color-midnight
  setBoardColor(#2C3E50)

.board-color-pumpkin
  setBoardColor(#E67E22)

.board-color-moderatepink
  setBoardColor(#CD5A91)

.board-color-strongcyan
  setBoardColor(#00AECC)

.board-color-limegreen
  setBoardColor(#4BBF6B)

.board-color-dark
  setBoardColor(#2C3E51)

  /* Not hidden in dark mode.
    card fields: received, start, due, end, members, requested, assigned
  .card-details-item.card-details-item-received,
  .card-details-item.card-details-item-start,
  .card-details-item.card-details-item-due,
  .card-details-item.card-details-item-end,
  .card-details-item.card-details-item-members,
  .card-details-item.card-details-item-name { display:none; }
  .card-details-items:empty { display:none; }
  */

  // DARK MODE, when dark background mode selected.
  // Modified version from https://github.com/wekan/wekan/wiki/Custom-CSS-themes#dark-theme
  // In progress, please send pull requests to fix remaining visibility issues.
  .ui-sortable,
  .swimlane,
  .swimlane >.swimlane-header-wrap,
  .swimlane >.list.js-list,
  .swimlane >.list-composer.js-list-composer,
  .list-body,
  .list,
  .list-composer,
  .sidebar-content,
  .card-details
    background-color:#2C3E50

  .card-details h3,
  .card-details-items,
  .card-checklist-items .ui-sortable,
  .card-subtasks-items,
  .activities,
  .material-toggle-switch
    color:#bbbbbb

  .list-header
    background-color: #888888

  .board-widget,
  .board-widget-labels,
  .board-widget-members
    color: #aaaaaa

  /* popup menu titles (boards, swimlanes, lists, cards, labels) */
  .pop-over >.header
    display:none;

  /* HIDE UNTIL HOVER -------------------------------------------------- */

  /* header "+" button */
  #header-quick-access .fa-plus
    display:none
  #header-quick-access:hover .fa-plus
    display:inherit

  /* "add card" links (use visibility rather than display so items don't jump) */
  .open-minicard-composer
    visibility:hidden

  .list.js-list:hover .open-minicard-composer
    visibility:visible

  .list-header-menu
    visibility:hidden

  .list.js-list:hover .list-header-menu
    visibility:visible

  /* "add list/swimlane" links (use visibility rather than display so items don't jump) */
  .list.js-list-composer       >.list-header
    visibility:hidden

  .list.js-list-composer:hover >.list-header
    visibility:visible

  /* headers */
  #header-quick-access, #header
    background-color:rgba(0,0,0,.75) !important

  #header .board-header-btn:hover
    background-color:rgba(255,255,255,0.3) !important

  /* foregrounds: swimlanes, lists */
  .list >.list-header, .swimlane-header
    color:rgba(255,255,255,.7)

  /* minicards */
  .minicard
    background-color:rgba(255,255,255,.4)

  .minicard-wrapper.is-selected .minicard,
  .minicard:hover,
  .minicard-composer.js-composer,
  .open-minicard-composer:hover
    background-color:rgba(255,255,255,.8) !important
    color:#000

  .minicard, .minicard .badge
    color:#fff

  .minicard:hover .badge, .minicard-wrapper.is-selected .badge
    color:#000

  /* cards */
  .card-details .card-details-header
    background-color:#ccc

  /* sidebar */
  .sidebar-tongue, .sidebar-shadow
    background-color:#666 !important

  .sidebar-content h3, .sidebar-content h2, .sidebar-content
    color:rgba(255,255,255,.7) !important

.board-color-relax
  setBoardColor(#27AE61)

  // RELAX MODE: light green background, with green background color,
  // to help this theme users to relax.
  // Colors and emphasis are specific to this Wekan theme contributor's company.
  .ui-sortable
    background-color:#a7e366

  .list-header
    background-color:#a7e366
    border-bottom: 6px solid #a7e366

  .list-body
    background-color:#a7e366

  .list
    border-left: 1px dotted #000000

  // Card details text emphasis: black border and white background
  // to make it details text field easier to find for RELAX MODE users,
  // and focus attention.
  .card-details .card-details-items
    & ~ .js-open-inlined-form
        .viewer
            background-color #ffffff !important
            padding 15px !important
            border 1px solid #000000 !important
            word-wrap: break-word

  // When card has comment, emphasis on minicard:
  // bigger red comment icon and number of comments,
  // to make it easier notice card comments and focus attention.
  .minicard .badges .badge
    .badge-icon,
    .badge-text
      &.badge-comment
        display: block
        border-radius: 4px
        padding: 1px 3px
        margin-bottom: 0.3rem
        color: #ff0000
        background-color: #ffffff
        font-weight: bold
        font-size: 11pt

.board-color-corteza
  setBoardColor(#568BA2)

  /*
    Wekan for Corteza https://cortezaproject.org

    Theme to match Corteza colors from:
    https://github.com/cortezaproject/corteza-webapp-messaging/blob/master/src/assets/sass/variables.scss

    // Paths
    $fonts_dir : './assets/fonts/';
    $icomoon-font-path: $fonts_dir + 'icomoon' !default;
    $icomoon-font-family: "icomoon" !default;

    // Typography
    $regular: 'nunito_sansregular';
    $bold: 'nunito_sansbold';
    $semibold: 'nunito_sanssemibold';

    // Color system
    $white:         #fff !default;
    $black:         #000 !default;
    $primary:       #568ba2;
    $secondary:     #90A3B1;
    $success:       #719430;
    $warning:       #F5D380;
    $danger:        #E85568;
    $light:         #F3F3F5;
    $dark:          #1e2224;
    $currentmymessagebgcolor : #a7d0e3;
  */

  //.header-quick-access
  //  backgroud-color: #568ba2