mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
9efa3ea3e6
BREAKING CHANGE:
Can now pass contrast to the colors map:
```
$colors-md: (
primary: (
base: #327eff,
contrast: yellow
),
secondary: (
base: #32db64,
contrast: hotpink
),
danger: #d91e18,
light: #f4f4f4,
dark: #222
) !default;
```
references #5445
90 lines
3.0 KiB
SCSS
90 lines
3.0 KiB
SCSS
@import "./dark";
|
|
|
|
// Material Design Dark Theme
|
|
// ----------------------------------
|
|
|
|
$colors-md: copy-colors($colors) !default;
|
|
|
|
|
|
$text-md-color: $text-color !default;
|
|
$paragraph-md-color: $paragraph-color !default;
|
|
$link-md-color: color($colors-md, primary) !default;
|
|
$background-md-color: $background-color !default;
|
|
$subdued-text-md-color: $subdued-text-color !default;
|
|
|
|
$font-family-md-base: "Roboto", "Helvetica Neue", sans-serif !default;
|
|
$font-size-md-base: $font-size-base !default;
|
|
|
|
|
|
// Material Design Outer content
|
|
// --------------------------------------------------
|
|
$outer-content-md-background-color: $background-color !default;
|
|
|
|
// Material Design Toolbar
|
|
// --------------------------------------------------
|
|
|
|
$toolbar-md-background: $toolbar-background !default;
|
|
$toolbar-md-border-color: $toolbar-border-color !default;
|
|
$toolbar-md-text-color: #fff !default;
|
|
$toolbar-md-active-color: $toolbar-active-color !default;
|
|
$toolbar-md-inactive-color: $toolbar-inactive-color !default;
|
|
$toolbar-md-button-color: #424242 !default;
|
|
|
|
// Material Design Card
|
|
// --------------------------------------------------
|
|
|
|
$card-md-header-color: #ddd !default;
|
|
$card-md-title-text-color: #fff !default;
|
|
$card-md-text-color: #ddd !default;
|
|
|
|
// Material Design List
|
|
// --------------------------------------------------
|
|
|
|
$list-md-text-color: $list-text-color !default;
|
|
$list-md-border-color: #dedede !default;
|
|
$list-md-background-color: $list-background-color !default;
|
|
$list-md-activated-background-color: #d9d9d9 !default;
|
|
|
|
|
|
// Material Design Item
|
|
// --------------------------------------------------
|
|
|
|
$item-md-padding-top: 13px !default;
|
|
$item-md-padding-right: 16px !default;
|
|
$item-md-padding-bottom: 13px !default;
|
|
$item-md-padding-left: 16px !default;
|
|
$item-md-padding-media-top: 9px !default;
|
|
$item-md-padding-media-bottom: 9px !default;
|
|
$item-md-padding-icon-top: 11px !default;
|
|
$item-md-padding-icon-bottom: 10px !default;
|
|
$item-md-divider-background: #151515 !default;
|
|
$item-md-divider-color: color($colors-md, light) !default;
|
|
|
|
// Material Design Toggle
|
|
// ---------------------------------------------------
|
|
$toggle-md-handle-background-color-off: color($colors-md, light) !default;
|
|
|
|
|
|
// Ripple Color
|
|
// --------------------------------------------------
|
|
|
|
@function ripple-background-color($button-color) {
|
|
@return rgba(red($button-color), green($button-color), blue($button-color), .1);
|
|
}
|
|
|
|
|
|
// Material Design Body
|
|
// --------------------------------------------------
|
|
|
|
@mixin md-body() {
|
|
font-family: $font-family-md-base;
|
|
font-size: $font-size-md-base;
|
|
background-color: $background-md-color;
|
|
}
|
|
|
|
|
|
// Roboto Font
|
|
@at-root {
|
|
@import "../fonts/roboto";
|
|
}
|