v7.1.0

Theme Light

Table of Contents

Detail

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

Variables

Name
Default Value
Compiled Value
  • Name
    $theme-light-id
    Default Value
    light
    Compiled Value
    light
  • Name
    $theme-light-primary
    Default Value
    $theme-primary
    Compiled Value
    #37b0be
  • Name
    $theme-light-primary-strong
    Default Value
    $theme-primary
    Compiled Value
    #37b0be
  • Name
    $theme-light-primary-darken
    Default Value
    darken($theme-primary, 5%)
    Compiled Value
    #319eaa
  • Name
    $theme-light-info
    Default Value
    $theme-info
    Compiled Value
    #4b9bd8
  • Name
    $theme-light-info-strong
    Default Value
    $theme-info
    Compiled Value
    #4b9bd8
  • Name
    $theme-light-info-darken
    Default Value
    darken($theme-info, 5%)
    Compiled Value
    #368fd3
  • Name
    $theme-light-success
    Default Value
    $theme-success
    Compiled Value
    #2ca52c
  • Name
    $theme-light-success-strong
    Default Value
    $theme-success
    Compiled Value
    #2ca52c
  • Name
    $theme-light-success-darken
    Default Value
    darken($theme-success, 5%)
    Compiled Value
    #279127
  • Name
    $theme-light-warning
    Default Value
    $theme-warning
    Compiled Value
    #ec8313
  • Name
    $theme-light-warning-strong
    Default Value
    $theme-warning
    Compiled Value
    #ec8313
  • Name
    $theme-light-warning-darken
    Default Value
    darken($theme-warning, 5%)
    Compiled Value
    #d47611
  • Name
    $theme-light-danger
    Default Value
    $theme-danger
    Compiled Value
    #db5757
  • Name
    $theme-light-danger-strong
    Default Value
    $theme-danger
    Compiled Value
    #db5757
  • Name
    $theme-light-danger-darken
    Default Value
    darken($theme-danger, 5%)
    Compiled Value
    #d74242
  • Name
    $theme-light-dark
    Default Value
    $black
    Compiled Value
    black
  • Name
    $theme-light-dark-1
    Default Value
    rgba($theme-light-dark, 0.87)
    Compiled Value
    rgba(0, 0, 0, 0.87)
  • Name
    $theme-light-dark-2
    Default Value
    rgba($theme-light-dark, 0.7)
    Compiled Value
    rgba(0, 0, 0, 0.7)
  • Name
    $theme-light-dark-3
    Default Value
    rgba($theme-light-dark, 0.6)
    Compiled Value
    rgba(0, 0, 0, 0.6)
  • Name
    $theme-light-dark-4
    Default Value
    rgba($theme-light-dark, 0.5)
    Compiled Value
    rgba(0, 0, 0, 0.5)
  • Name
    $theme-light-dark-5
    Default Value
    rgba($theme-light-dark, 0.4)
    Compiled Value
    rgba(0, 0, 0, 0.4)
  • Name
    $theme-light-dark-6
    Default Value
    rgba($theme-light-dark, 0.26)
    Compiled Value
    rgba(0, 0, 0, 0.26)
  • Name
    $theme-light-dark-7
    Default Value
    rgba($theme-light-dark, 0.15)
    Compiled Value
    rgba(0, 0, 0, 0.15)
  • Name
    $theme-light-dark-8
    Default Value
    rgba($theme-light-dark, 0.12)
    Compiled Value
    rgba(0, 0, 0, 0.12)
  • Name
    $theme-light-dark-9
    Default Value
    rgba($theme-light-dark, 0.05)
    Compiled Value
    rgba(0, 0, 0, 0.05)
  • Name
    $theme-light-light
    Default Value
    $white
    Compiled Value
    white
  • Name
    $theme-light-light-1
    Default Value
    rgba($theme-light-light, 0.87)
    Compiled Value
    rgba(255, 255, 255, 0.87)
  • Name
    $theme-light-light-2
    Default Value
    rgba($theme-light-light, 0.7)
    Compiled Value
    rgba(255, 255, 255, 0.7)
  • Name
    $theme-light-light-3
    Default Value
    rgba($theme-light-light, 0.6)
    Compiled Value
    rgba(255, 255, 255, 0.6)
  • Name
    $theme-light-light-4
    Default Value
    rgba($theme-light-light, 0.5)
    Compiled Value
    rgba(255, 255, 255, 0.5)
  • Name
    $theme-light-light-5
    Default Value
    rgba($theme-light-light, 0.4)
    Compiled Value
    rgba(255, 255, 255, 0.4)
  • Name
    $theme-light-light-6
    Default Value
    rgba($theme-light-light, 0.26)
    Compiled Value
    rgba(255, 255, 255, 0.26)
  • Name
    $theme-light-light-7
    Default Value
    rgba($theme-light-light, 0.15)
    Compiled Value
    rgba(255, 255, 255, 0.15)
  • Name
    $theme-light-light-8
    Default Value
    rgba($theme-light-light, 0.12)
    Compiled Value
    rgba(255, 255, 255, 0.12)
  • Name
    $theme-light-light-9
    Default Value
    rgba($theme-light-light, 0.05)
    Compiled Value
    rgba(255, 255, 255, 0.05)
  • Name
    $theme-light-background
    Default Value
    $light
    Compiled Value
    white
  • Name
    $theme-light-background-1
    Default Value
    $light
    Compiled Value
    white
  • Name
    $theme-light-background-2
    Default Value
    $grey-100
    Compiled Value
    whitesmoke
  • Name
    $theme-light-background-3
    Default Value
    $grey-100
    Compiled Value
    whitesmoke
  • Name
    $theme-light-background-4
    Default Value
    $grey-200
    Compiled Value
    #ededed
  • Name
    $theme-light-background-alpha
    Default Value
    $dark-9
    Compiled Value
    rgba(0, 0, 0, 0.05)
  • Name
    $theme-light-border
    Default Value
    $blue-grey-100
    Compiled Value
    #d1d8dc
  • Name
    $theme-light-border-1
    Default Value
    $dark-6
    Compiled Value
    rgba(0, 0, 0, 0.26)
  • Name
    $theme-light-shadow
    Default Value
    $black
    Compiled Value
    black
  • Name
    $theme-light-shadow-alpha
    Default Value
    rgba($theme-light-shadow, 0.15)
    Compiled Value
    rgba(0, 0, 0, 0.15)
  • Name
    $theme-light-shadow-alpha-thin
    Default Value
    rgba($theme-light-shadow, 0.075)
    Compiled Value
    rgba(0, 0, 0, 0.075)
  • Name
    $theme-light-shadow-primary-alpha
    Default Value
    rgba($theme-light-primary, 0.6)
    Compiled Value
    rgba(55, 176, 190, 0.6)
  • Name
    $theme-light-shadow-info-alpha
    Default Value
    rgba($theme-light-info, 0.6)
    Compiled Value
    rgba(75, 155, 216, 0.6)
  • Name
    $theme-light-shadow-success-alpha
    Default Value
    rgba($theme-light-success, 0.6)
    Compiled Value
    rgba(44, 165, 44, 0.6)
  • Name
    $theme-light-shadow-warning-alpha
    Default Value
    rgba($theme-light-warning, 0.6)
    Compiled Value
    rgba(236, 131, 19, 0.6)
  • Name
    $theme-light-shadow-danger-alpha
    Default Value
    rgba($theme-light-danger, 0.6)
    Compiled Value
    rgba(219, 87, 87, 0.6)
  • Name
    $theme-light-focus
    Default Value
    $theme-focus
    Compiled Value
    #2497f0
  • Name
    $theme-light-focus-darken
    Default Value
    darken($theme-focus, 10%)
    Compiled Value
    #0f7dd2
  • Name
    $theme-light-focus-alpha
    Default Value
    rgba($theme-focus, 0.5)
    Compiled Value
    rgba(36, 151, 240, 0.5)
  • Name
    $theme-light-focus-alpha-thin
    Default Value
    rgba($theme-focus, 0.36)
    Compiled Value
    rgba(36, 151, 240, 0.36)
  • Name
    $theme-light-disabled-background-color
    Default Value
    $grey-400
    Compiled Value
    #bdbdbd
  • Name
    $theme-light-disabled-border-color
    Default Value
    $blue-grey-50
    Compiled Value
    #eef0f2
  • Name
    $theme-light-disabled-color
    Default Value
    $dark-6
    Compiled Value
    rgba(0, 0, 0, 0.26)
  • Name
    $theme-light-body-background-color
    Default Value
    $light
    Compiled Value
    white
  • Name
    $theme-light-body-color
    Default Value
    $dark-2
    Compiled Value
    rgba(0, 0, 0, 0.7)
  • Name
    $theme-light-code-color
    Default Value
    $indigo-500
    Compiled Value
    #5d69a8
  • Name
    $theme-light-button-paint-color
    Default Value
    $light
    Compiled Value
    white
  • Name
    $theme-light-table-paint-background-color
    Default Value
    rgba(darken($theme-primary, 15%), 0.7)
    Compiled Value
    rgba(38, 121, 130, 0.7)
  • Name
    $theme-light-table-paint-color
    Default Value
    $light
    Compiled Value
    white
  • Name
    $theme-light-table-spot-background-color
    Default Value
    rgba($yellow-500, 0.45)
    Compiled Value
    rgba(240, 225, 66, 0.45)
  • Name
    $theme-light-table-danger-background-color
    Default Value
    rgba($theme-light-danger, 0.2)
    Compiled Value
    rgba(219, 87, 87, 0.2)
  • Name
    $theme-light-table-stripe-background-color
    Default Value
    rgba($blue-grey-900, 0.05)
    Compiled Value
    rgba(40, 48, 52, 0.05)
  • Name
    $theme-light-table-wrap-shadow-start
    Default Value
    rgba($blue-grey-500, 0.15)
    Compiled Value
    rgba(102, 122, 133, 0.15)
  • Name
    $theme-light-table-wrap-shadow-end
    Default Value
    rgba($white, 0)
    Compiled Value
    rgba(255, 255, 255, 0)
  • Name
    $theme-light-input-placeholder-color
    Default Value
    $dark-6
    Compiled Value
    rgba(0, 0, 0, 0.26)
  • Name
    $theme-light-input-success-background-color
    Default Value
    lighten($theme-light-success, 50%)
    Compiled Value
    #dbf5db
  • Name
    $theme-light-input-success-border-color
    Default Value
    lighten($theme-light-success, 27%)
    Compiled Value
    #7edd7e
  • Name
    $theme-light-input-danger-background-color
    Default Value
    lighten($theme-light-danger, 35%)
    Compiled Value
    #fbeaea
  • Name
    $theme-light-input-danger-border-color
    Default Value
    lighten($theme-light-danger, 21%)
    Compiled Value
    #eeafaf
  • Name
    $theme-light-checkbox-before-border-color
    Default Value
    $light
    Compiled Value
    white
  • Name
    $theme-light-alert-primary-background-color
    Default Value
    lighten($theme-light-primary, 47%)
    Compiled Value
    #ebf8f9
  • Name
    $theme-light-alert-primary-border-color
    Default Value
    lighten($theme-light-primary, 27%)
    Compiled Value
    #9cdbe2
  • Name
    $theme-light-alert-info-background-color
    Default Value
    lighten($theme-light-info, 38%)
    Compiled Value
    #eaf3fa
  • Name
    $theme-light-alert-info-border-color
    Default Value
    lighten($theme-light-info, 23%)
    Compiled Value
    #abd0ed
  • Name
    $theme-light-alert-success-background-color
    Default Value
    lighten($theme-light-success, 53%)
    Compiled Value
    #e7f9e7
  • Name
    $theme-light-alert-success-border-color
    Default Value
    lighten($theme-light-success, 30%)
    Compiled Value
    #8ae08a
  • Name
    $theme-light-alert-warning-background-color
    Default Value
    lighten($theme-light-warning, 44%)
    Compiled Value
    #fdf0e3
  • Name
    $theme-light-alert-warning-border-color
    Default Value
    lighten($theme-light-warning, 24%)
    Compiled Value
    #f5bf84
  • Name
    $theme-light-alert-danger-background-color
    Default Value
    lighten($theme-light-danger, 36%)
    Compiled Value
    #fbeeee
  • Name
    $theme-light-alert-danger-border-color
    Default Value
    lighten($theme-light-danger, 23%)
    Compiled Value
    #f0b7b7

Sources