javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #5441 from matheusrocha89/dark-theme

Browse Source 
feat(theme): dark theme
This commit is contained in:
Adam Bradley
2016-02-15 08:51:41 -06:00
parent e06cf71aae c261d0e348
commit 9888a9c155
3 changed files with 51 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
ionic/themes/dark.ios.scss
View File

@@ -14,6 +14,19 @@ $subdued-text-ios-color: $subdued-text-color !default;
$font-family-ios-base: $font-family-base !default;
$font-size-ios-base: $font-size-base !default;
// iOS Outer content
// --------------------------------------------------
$outer-content-ios-background-color: $background-color !default;
// iOS Card
// --------------------------------------------------
$card-ios-header-color: #ddd !default;
// iOS Note
// --------------------------------------------------
$item-ios-note-color: map-get($colors-ios, light) !default;
// iOS Toolbar
// --------------------------------------------------
@@ -33,6 +46,15 @@ $list-ios-border-color: $list-border-color !default;
$list-ios-background-color: $list-background-color !default;
$list-ios-activated-background-color: #d9d9d9 !default;
// iOS List header
// --------------------------------------------------
$list-ios-header-color: $text-color !default;
$item-ios-divider-bg: #151515 !default;
$item-ios-divider-color: $text-color !default;
ion-list-header {
background-color: #151515;
}
// iOS Item
// --------------------------------------------------
@@ -46,6 +68,10 @@ $item-ios-padding-media-bottom: 10px !default;
$item-ios-padding-icon-top: 10px !default;
$item-ios-padding-icon-bottom: 9px !default;
// iOS Toggle
// --------------------------------------------------
$toggle-ios-handle-background-color: map-get($colors-ios, light) !default;
// iOS Icon
// --------------------------------------------------

20
ionic/themes/dark.md.scss
View File

@@ -16,16 +16,26 @@ $font-family-md-base: "Roboto", "Helvetica Neue", sans-serif !de
$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: #424242 !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
// --------------------------------------------------
@@ -33,7 +43,7 @@ $toolbar-md-button-color: #424242 !default;
$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: #f1f1f1 !default;
$list-md-activated-background-color: #d9d9d9 !default;
// Material Design Item
@@ -47,6 +57,12 @@ $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-bg: #151515 !default;
$item-md-divider-color: map-get($colors-md, light) !default;
// Material Design Toggle
// ---------------------------------------------------
$toggle-md-handle-background-color-off: map-get($colors-md, light) !default;
// Ripple Color

14
ionic/themes/dark.scss
View File

@@ -6,9 +6,9 @@
$colors: (
primary: #327eff,
primary: #007AFF,
secondary: #32db64,
danger: #f53d3d,
danger: #D91E18,
light: #f4f4f4,
dark: #222,
@@ -18,18 +18,18 @@ $colors: (
$text-color: #fff !default;
$paragraph-color: $text-color !default;
$link-color: map-get($colors, primary) !default;
$background-color: #000 !default;
$background-color: #191919 !default;
$subdued-text-color: #666 !default;
$font-family-base: -apple-system, "Helvetica Neue", "Roboto", sans-serif !default;
$font-size-base: 1.4rem !default; // 1.4rem == 14px
$toolbar-background: #000 !default;
$toolbar-border-color: #b2b2b2 !default;
$toolbar-background: #151515 !default;
$toolbar-border-color: map-get($colors, dark) !default;
$toolbar-text-color: $text-color !default;
$toolbar-active-color: $link-color !default;
$toolbar-inactive-color: #8c8c8c !default;
$list-text-color: $text-color !default;
$list-background-color: $background-color !default;
$list-border-color: #c8c7cc !default;
$list-background-color: #242424 !default;
$list-border-color: #000 !default;