v7.1.0

Root Light

Table of Contents

Detail

CSS Variables 有効化時に :root へ出力するライトテーマの変数。

CSS Variables

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

Change Selector

$selector-root-light をオーバーライドすることで、出力を :root 以外の場所へ移すことができます。

// 出力をbodyに変更したい場合
$selector-root-light: "body"; // Default: ":root"

// Import
@import "~musubii/src/scss/configs/_import.scss";

Variables

Name
Default Value
  • Name
    $selector-root-light
    Default Value
    :root
  • Name
    $selector-root-light-attr
    Default Value
    [data-theme="light"]

Sources