v7.1.0

Theme Dark

Table of Contents

Detail

ダークテーマで扱う色変数。Theme Common と Color の変数を使用しています。オーバーライドすることでダークテーマのみの色調整ができます。

Variables

Name
Default Value
Compiled Value
  • Name
    $theme-dark-id
    Default Value
    dark
    Compiled Value
    dark
  • Name
    $theme-dark-primary
    Default Value
    darken($theme-primary, 12%)
    Compiled Value
    #29848e
  • Name
    $theme-dark-primary-strong
    Default Value
    $theme-primary
    Compiled Value
    #37b0be
  • Name
    $theme-dark-primary-darken
    Default Value
    darken($theme-primary, 17%)
    Compiled Value
    #24727b
  • Name
    $theme-dark-info
    Default Value
    darken($theme-info, 12%)
    Compiled Value
    #297dbc
  • Name
    $theme-dark-info-strong
    Default Value
    $theme-info
    Compiled Value
    #4b9bd8
  • Name
    $theme-dark-info-darken
    Default Value
    darken($theme-info, 17%)
    Compiled Value
    #256fa7
  • Name
    $theme-dark-success
    Default Value
    darken($theme-success, 12%)
    Compiled Value
    #1f751f
  • Name
    $theme-dark-success-strong
    Default Value
    lighten($theme-success, 3%)
    Compiled Value
    #2fb12f
  • Name
    $theme-dark-success-darken
    Default Value
    darken($theme-success, 17%)
    Compiled Value
    #1a611a
  • Name
    $theme-dark-warning
    Default Value
    darken($theme-warning, 12%)
    Compiled Value
    #b3640f
  • Name
    $theme-dark-warning-strong
    Default Value
    darken($theme-warning, 3%)
    Compiled Value
    #de7b12
  • Name
    $theme-dark-warning-darken
    Default Value
    darken($theme-warning, 17%)
    Compiled Value
    #9c570d
  • Name
    $theme-dark-danger
    Default Value
    darken($theme-danger, 12%)
    Compiled Value
    #ca2b2b
  • Name
    $theme-dark-danger-strong
    Default Value
    lighten($theme-danger, 3%)
    Compiled Value
    #de6363
  • Name
    $theme-dark-danger-darken
    Default Value
    darken($theme-danger, 17%)
    Compiled Value
    #b52626
  • Name
    $theme-dark-dark
    Default Value
    $white
    Compiled Value
    white
  • Name
    $theme-dark-dark-1
    Default Value
    rgba($theme-dark-dark, 0.87)
    Compiled Value
    rgba(255, 255, 255, 0.87)
  • Name
    $theme-dark-dark-2
    Default Value
    rgba($theme-dark-dark, 0.7)
    Compiled Value
    rgba(255, 255, 255, 0.7)
  • Name
    $theme-dark-dark-3
    Default Value
    rgba($theme-dark-dark, 0.6)
    Compiled Value
    rgba(255, 255, 255, 0.6)
  • Name
    $theme-dark-dark-4
    Default Value
    rgba($theme-dark-dark, 0.5)
    Compiled Value
    rgba(255, 255, 255, 0.5)
  • Name
    $theme-dark-dark-5
    Default Value
    rgba($theme-dark-dark, 0.4)
    Compiled Value
    rgba(255, 255, 255, 0.4)
  • Name
    $theme-dark-dark-6
    Default Value
    rgba($theme-dark-dark, 0.26)
    Compiled Value
    rgba(255, 255, 255, 0.26)
  • Name
    $theme-dark-dark-7
    Default Value
    rgba($theme-dark-dark, 0.15)
    Compiled Value
    rgba(255, 255, 255, 0.15)
  • Name
    $theme-dark-dark-8
    Default Value
    rgba($theme-dark-dark, 0.12)
    Compiled Value
    rgba(255, 255, 255, 0.12)
  • Name
    $theme-dark-dark-9
    Default Value
    rgba($theme-dark-dark, 0.05)
    Compiled Value
    rgba(255, 255, 255, 0.05)
  • Name
    $theme-dark-light
    Default Value
    $white
    Compiled Value
    white
  • Name
    $theme-dark-light-1
    Default Value
    rgba($theme-dark-light, 0.87)
    Compiled Value
    rgba(255, 255, 255, 0.87)
  • Name
    $theme-dark-light-2
    Default Value
    rgba($theme-dark-light, 0.7)
    Compiled Value
    rgba(255, 255, 255, 0.7)
  • Name
    $theme-dark-light-3
    Default Value
    rgba($theme-dark-light, 0.6)
    Compiled Value
    rgba(255, 255, 255, 0.6)
  • Name
    $theme-dark-light-4
    Default Value
    rgba($theme-dark-light, 0.5)
    Compiled Value
    rgba(255, 255, 255, 0.5)
  • Name
    $theme-dark-light-5
    Default Value
    rgba($theme-dark-light, 0.4)
    Compiled Value
    rgba(255, 255, 255, 0.4)
  • Name
    $theme-dark-light-6
    Default Value
    rgba($theme-dark-light, 0.26)
    Compiled Value
    rgba(255, 255, 255, 0.26)
  • Name
    $theme-dark-light-7
    Default Value
    rgba($theme-dark-light, 0.15)
    Compiled Value
    rgba(255, 255, 255, 0.15)
  • Name
    $theme-dark-light-8
    Default Value
    rgba($theme-dark-light, 0.12)
    Compiled Value
    rgba(255, 255, 255, 0.12)
  • Name
    $theme-dark-light-9
    Default Value
    rgba($theme-dark-light, 0.05)
    Compiled Value
    rgba(255, 255, 255, 0.05)
  • Name
    $theme-dark-background
    Default Value
    $grey-900
    Compiled Value
    #212121
  • Name
    $theme-dark-background-1
    Default Value
    lighten($grey-900, 5%)
    Compiled Value
    #2e2e2e
  • Name
    $theme-dark-background-2
    Default Value
    lighten($grey-900, 5%)
    Compiled Value
    #2e2e2e
  • Name
    $theme-dark-background-3
    Default Value
    $grey-800
    Compiled Value
    #424242
  • Name
    $theme-dark-background-4
    Default Value
    $grey-800
    Compiled Value
    #424242
  • Name
    $theme-dark-background-alpha
    Default Value
    $light-9
    Compiled Value
    rgba(255, 255, 255, 0.05)
  • Name
    $theme-dark-border
    Default Value
    $grey-700
    Compiled Value
    #616161
  • Name
    $theme-dark-border-1
    Default Value
    $light-6
    Compiled Value
    rgba(255, 255, 255, 0.26)
  • Name
    $theme-dark-shadow
    Default Value
    $black
    Compiled Value
    black
  • Name
    $theme-dark-shadow-alpha
    Default Value
    rgba($theme-dark-shadow, 0.4)
    Compiled Value
    rgba(0, 0, 0, 0.4)
  • Name
    $theme-dark-shadow-alpha-thin
    Default Value
    rgba($theme-dark-shadow, 0.075)
    Compiled Value
    rgba(0, 0, 0, 0.075)
  • Name
    $theme-dark-shadow-primary-alpha
    Default Value
    rgba($theme-dark-shadow, 0.4)
    Compiled Value
    rgba(0, 0, 0, 0.4)
  • Name
    $theme-dark-shadow-info-alpha
    Default Value
    rgba($theme-dark-shadow, 0.4)
    Compiled Value
    rgba(0, 0, 0, 0.4)
  • Name
    $theme-dark-shadow-success-alpha
    Default Value
    rgba($theme-dark-shadow, 0.4)
    Compiled Value
    rgba(0, 0, 0, 0.4)
  • Name
    $theme-dark-shadow-warning-alpha
    Default Value
    rgba($theme-dark-shadow, 0.4)
    Compiled Value
    rgba(0, 0, 0, 0.4)
  • Name
    $theme-dark-shadow-danger-alpha
    Default Value
    rgba($theme-dark-shadow, 0.4)
    Compiled Value
    rgba(0, 0, 0, 0.4)
  • Name
    $theme-dark-focus
    Default Value
    $theme-focus
    Compiled Value
    #2497f0
  • Name
    $theme-dark-focus-darken
    Default Value
    darken($theme-focus, 10%)
    Compiled Value
    #0f7dd2
  • Name
    $theme-dark-focus-alpha
    Default Value
    rgba($theme-focus, 0.5)
    Compiled Value
    rgba(36, 151, 240, 0.5)
  • Name
    $theme-dark-focus-alpha-thin
    Default Value
    rgba($theme-focus, 0.36)
    Compiled Value
    rgba(36, 151, 240, 0.36)
  • Name
    $theme-dark-disabled-background-color
    Default Value
    $grey-800
    Compiled Value
    #424242
  • Name
    $theme-dark-disabled-border-color
    Default Value
    $grey-600
    Compiled Value
    #757575
  • Name
    $theme-dark-disabled-color
    Default Value
    $light-6
    Compiled Value
    rgba(255, 255, 255, 0.26)
  • Name
    $theme-dark-body-background-color
    Default Value
    $grey-900
    Compiled Value
    #212121
  • Name
    $theme-dark-body-color
    Default Value
    $light-2
    Compiled Value
    rgba(255, 255, 255, 0.7)
  • Name
    $theme-dark-code-color
    Default Value
    $blue-300
    Compiled Value
    #82b9e3
  • Name
    $theme-dark-button-paint-color
    Default Value
    $theme-dark-body-color
    Compiled Value
    rgba(255, 255, 255, 0.7)
  • Name
    $theme-dark-table-paint-background-color
    Default Value
    rgba(darken($theme-primary, 14%), 0.2)
    Compiled Value
    rgba(39, 125, 134, 0.2)
  • Name
    $theme-dark-table-paint-color
    Default Value
    $theme-dark-body-color
    Compiled Value
    rgba(255, 255, 255, 0.7)
  • Name
    $theme-dark-table-spot-background-color
    Default Value
    rgba($yellow-700, 0.2)
    Compiled Value
    rgba(236, 189, 19, 0.2)
  • Name
    $theme-dark-table-danger-background-color
    Default Value
    rgba($theme-dark-danger, 0.25)
    Compiled Value
    rgba(202, 43, 43, 0.25)
  • Name
    $theme-dark-table-stripe-background-color
    Default Value
    rgba($blue-grey-400, 0.1)
    Compiled Value
    rgba(122, 143, 153, 0.1)
  • Name
    $theme-dark-table-wrap-shadow-start
    Default Value
    rgba($white, 0.15)
    Compiled Value
    rgba(255, 255, 255, 0.15)
  • Name
    $theme-dark-table-wrap-shadow-end
    Default Value
    rgba($black, 0)
    Compiled Value
    rgba(0, 0, 0, 0)
  • Name
    $theme-dark-input-placeholder-color
    Default Value
    $light-6
    Compiled Value
    rgba(255, 255, 255, 0.26)
  • Name
    $theme-dark-input-success-background-color
    Default Value
    rgba($theme-dark-success, 0.25)
    Compiled Value
    rgba(31, 117, 31, 0.25)
  • Name
    $theme-dark-input-success-border-color
    Default Value
    $theme-dark-success
    Compiled Value
    #1f751f
  • Name
    $theme-dark-input-danger-background-color
    Default Value
    rgba($theme-dark-danger, 0.25)
    Compiled Value
    rgba(202, 43, 43, 0.25)
  • Name
    $theme-dark-input-danger-border-color
    Default Value
    $theme-dark-danger
    Compiled Value
    #ca2b2b
  • Name
    $theme-dark-checkbox-before-border-color
    Default Value
    $light-1
    Compiled Value
    rgba(255, 255, 255, 0.87)
  • Name
    $theme-dark-alert-primary-background-color
    Default Value
    desaturate(darken($theme-dark-primary, 22%), 30%)
    Compiled Value
    #1b2b2d
  • Name
    $theme-dark-alert-primary-border-color
    Default Value
    darken($theme-dark-primary, 3%)
    Compiled Value
    #267982
  • Name
    $theme-dark-alert-info-background-color
    Default Value
    desaturate(darken($theme-dark-info, 30%), 32%)
    Compiled Value
    #1a2832
  • Name
    $theme-dark-alert-info-border-color
    Default Value
    darken($theme-dark-info, 7%)
    Compiled Value
    #23699f
  • Name
    $theme-dark-alert-success-background-color
    Default Value
    desaturate(darken($theme-dark-success, 16%), 30%)
    Compiled Value
    #182a18
  • Name
    $theme-dark-alert-success-border-color
    Default Value
    $theme-dark-success
    Compiled Value
    #1f751f
  • Name
    $theme-dark-alert-warning-background-color
    Default Value
    desaturate(darken($theme-dark-warning, 26%), 15%)
    Compiled Value
    #341f09
  • Name
    $theme-dark-alert-warning-border-color
    Default Value
    darken($theme-dark-warning, 8%)
    Compiled Value
    #8e4f0b
  • Name
    $theme-dark-alert-danger-background-color
    Default Value
    desaturate(darken($theme-dark-danger, 32%), 36%)
    Compiled Value
    #351d1d
  • Name
    $theme-dark-alert-danger-border-color
    Default Value
    darken($theme-dark-danger, 12%)
    Compiled Value
    #972020

Sources