vuetify/src/stylus/settings/_theme.styl

Vue.js 2 Semantic Component Framework

@require './_colors'

// Theme
// ============================================================
$body-font-family := 'Roboto', sans-serif
$font-size-root := 14px
$line-height-root := 1.5

// Material Design - https://material.io/guidelines/style/color.html#color-usability
// ============================================================
$material-light := {
  status-bar: {
    regular: #E0E0E0,
    lights-out: rgba(#fff, .7)
  },
  app-bar: #F5F5F5,
  background: #FAFAFA,
  cards: #FFFFFF,
  chips: {
    background: $grey.lighten-2,
    color: rgba(#000, .87)
  },
  dividers: rgba(#000, .12),
  text: {
    theme: #fff,
    primary: rgba(#000, .87),
    secondary: rgba(#000, .54),
    disabled: rgba(#000, .38),
    link: $blue.darken-2,
    link-hover: $grey.darken-3
  },
  icons: {
    active: rgba(#000, .54),
    inactive: rgba(#000, .38)
  },
  inputs: {
    box: rgba(#000, .04),
    solo-inverted: rgba(#000, .16),
    solo-inverted-focused: #424242,
    solo-inverted-focused-text: #fff
  },
  buttons: {
    disabled: rgba(#000, .26),
    focused: rgba(#000, .12),
    focused-alt: rgba(#fff, .6),
    pressed: rgba(#999, .4)
  },
  expansion-panels: {
    focus: #EEEEEE
  },
  list-tile: {
    hover: rgba(#000, .04)
  },
  selection-controls: {
    thumb: {
      inactive: $grey.lighten-5,
      disabled: $grey.lighten-1
    },
    track: {
      inactive: rgba(#000, .38),
      disabled: rgba(#000, .12)
    }
  },
  slider: {
    active: rgba(#000, .38),
    inactive: rgba(#000, .26),
    disabled: rgba(#000, .26),
    discrete: #000
  },
  tabs: {
    active: rgba(#000, .87)
  },
  text-fields: {
    box: rgba(#000, .06),
    box-hover: rgba(#000, .12)
  },
  input-bottom-line: rgba(#000, .42),
  stepper: {
    active: rgba(#fff, 1),
    completed: rgba(#000, 0.87),
    hover: rgba(#000, 0.54)
  },
  table: {
    active: $grey.lighten-4
    hover: $grey.lighten-3
  },
  picker: {
    body: #fff,
    clock: $grey.lighten-2,
    indeterminateTime: $grey.lighten-1,
    title: $grey.lighten-2
  },
  bg-color: #fff
  fg-color: #000
  text-color: #000
  primary-text-percent: .87
  secondary-text-percent: .54
  disabledORhints-text-percent: .38
  divider-percent: .12
  active-icon-percent: .54
  inactive-icon-percent: .38
}

$material-dark := {
  status-bar: {
    regular: #000000,
    lights-out: rgba(#000, .2)
  },
  app-bar: #212121,
  background: #303030,
  cards: #424242,
  chips: {
    background: #FFF,
    color: $material-light.text.primary
  },
  dividers: rgba(#fff, .12),
  text: {
    theme: #fff,
    primary: #fff,
    secondary: rgba(#fff, .70),
    disabled: rgba(#fff, .50),
    link: $blue.accent-1,
    link-hover: $grey.lighten-3
  },
  icons: {
    active: #fff,
    inactive: rgba(#fff, .5)
  },
  inputs: {
    box: #fff,
    solo-inverted: rgba(#fff, .16),
    solo-inverted-focused: #fff,
    solo-inverted-focused-text: $material-light.text.primary
  },
  list-tile: {
    hover: rgba(#fff, .08)
  },
  buttons: {
    disabled: rgba(#fff, .3),
    focused: rgba(#fff, .12),
    focused-alt: rgba(#fff, .1),
    pressed: rgba(#ccc, .25)
  },
  expansion-panels: {
    focus: #494949
  },
  selection-controls: {
    thumb: {
      inactive: $grey.lighten-1,
      disabled: $grey.darken-3
    },
    track: {
      inactive: rgba(#fff, .3),
      disabled: rgba(#fff, .1)
    }
  },
  slider: {
    active: rgba(#fff, .3),
    inactive: rgba(#fff, .2),
    disabled: rgba(#fff, .2),
    discrete: #fff
  },
  tabs: {
    active: #fff
  },
  text-fields: {
    box: rgba(#000, .1),
    box-hover: rgba(#000, .2),
    box-focus: rgba(#000, .3)
  },
  input-bottom-line: rgba(#fff, .7),

  stepper: {
    active: rgba(#fff, 1),
    completed: rgba(#fff, 0.87),
    hover: rgba(#fff, 0.75)
  },
  table: {
    active: #505050
    hover: $grey.darken-2
  },
  picker: {
    body: #424242,
    clock: $grey.darken-2,
    indeterminateTime: $grey.darken-1,
    title: $grey.darken-2
  },
  bg-color: #303030
  fg-color: #fff
  text-color: #fff
  primary-text-percent: 1
  secondary-text-percent: .70
  disabledORhints-text-percent: .50
  divider-percent: .12
  active-icon-percent: 1
  inactive-icon-percent: .50
}

// Default Material Theme
// ============================================================
$material-theme := $material-light
$material-twelve-percent-light := rgba($material-dark.fg-color, $material-dark.divider-percent)
$material-twelve-percent-dark := rgba($material-light.fg-color, $material-light.divider-percent)


// Theme
// ============================================================
$body-bg-light := $material-light.background
$body-bg-dark := $material-dark.background
$body-color-light := rgba($material-dark.text-color, $material-dark.primary-text-percent)
$body-color-dark := rgba($material-light.text-color, $material-light.primary-text-percent)
$color-theme := rgba($material-theme.text-color, $material-theme.primary-text-percent)