v7.1.0

Root Dark

Table of Contents

Detail

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

CSS Variables

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

Change Selector

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

// 出力をbody.theme-darkに変更したい場合
$selector-root-dark: "body"; // Default: ":root"
$selector-root-dark-attr: "&.theme-dark"; // Default: '[data-theme="dark"]'

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

Variables

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

Sources