Merge pull request #5441 from matheusrocha89/dark-theme

feat(theme): dark theme
ionic-team · Feb 15, 2016 · 9888a9c · 9888a9c
2 parents e06cf71 + c261d0e
commit 9888a9c
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 9 deletions.
diff --git a/ionic/themes/dark.ios.scss b/ionic/themes/dark.ios.scss
@@ -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
 // --------------------------------------------------

diff --git a/ionic/themes/dark.md.scss b/ionic/themes/dark.md.scss
@@ -16,24 +16,34 @@ $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
 // --------------------------------------------------
 
 $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

diff --git a/ionic/themes/dark.scss b/ionic/themes/dark.scss
@@ -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;