From 871c0838bde9b4d2dde0520d33fe9b11040f2dd8 Mon Sep 17 00:00:00 2001 From: Matheus Cruz Rocha Date: Tue, 2 Feb 2016 16:00:50 -0300 Subject: [PATCH 01/16] Dark colors toolbar --- ionic/themes/dark.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/ionic/themes/dark.scss b/ionic/themes/dark.scss index 303631251c..e918fc35d5 100644 --- a/ionic/themes/dark.scss +++ b/ionic/themes/dark.scss @@ -18,14 +18,14 @@ $colors: ( $text-color: #fff !default; $paragraph-color: $text-color !default; $link-color: map-get($colors, primary) !default; -$background-color: #000 !default; +$background-color: #1e1e1e !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; From b54fe34468512ba5338672d44e5e02a39013febd Mon Sep 17 00:00:00 2001 From: Matheus Cruz Rocha Date: Tue, 2 Feb 2016 16:05:13 -0300 Subject: [PATCH 02/16] New colors --- ionic/themes/dark.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/ionic/themes/dark.scss b/ionic/themes/dark.scss index e918fc35d5..51d384e18a 100644 --- a/ionic/themes/dark.scss +++ b/ionic/themes/dark.scss @@ -6,9 +6,9 @@ $colors: ( - primary: #327eff, - secondary: #32db64, - danger: #f53d3d, + primary: #3498DB, + secondary: #00B16A, + danger: #D91E18, light: #f4f4f4, dark: #222, From 21bf106ea0ed2c7e11185a531000d70ed191faa4 Mon Sep 17 00:00:00 2001 From: Matheus Cruz Rocha Date: Tue, 2 Feb 2016 18:55:01 -0300 Subject: [PATCH 03/16] Dark theme list --- ionic/themes/dark.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ionic/themes/dark.scss b/ionic/themes/dark.scss index 51d384e18a..4009431a1c 100644 --- a/ionic/themes/dark.scss +++ b/ionic/themes/dark.scss @@ -31,5 +31,5 @@ $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; From af8ced290a81b3e2126eeb976f7fd02e6d044485 Mon Sep 17 00:00:00 2001 From: Matheus Cruz Rocha Date: Tue, 2 Feb 2016 19:18:40 -0300 Subject: [PATCH 04/16] Dark theme ios list header --- ionic/themes/dark.ios.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/ionic/themes/dark.ios.scss b/ionic/themes/dark.ios.scss index 2ab19c6645..a7e3bdf837 100644 --- a/ionic/themes/dark.ios.scss +++ b/ionic/themes/dark.ios.scss @@ -33,6 +33,12 @@ $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; +ion-list-header { + background-color: $background-ios-color; +} // iOS Item // -------------------------------------------------- From 0d4c9beaf523d145b6ee3bbfa36cf78cd2db9bed Mon Sep 17 00:00:00 2001 From: Matheus Cruz Rocha Date: Wed, 3 Feb 2016 09:12:44 -0300 Subject: [PATCH 05/16] Changing list-headers and sticky headers colors For iOS --- ionic/themes/dark.ios.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/ionic/themes/dark.ios.scss b/ionic/themes/dark.ios.scss index a7e3bdf837..77881c80be 100644 --- a/ionic/themes/dark.ios.scss +++ b/ionic/themes/dark.ios.scss @@ -36,8 +36,11 @@ $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: $background-ios-color; + background-color: #151515; } // iOS Item From a955482e7032449f59ebc48b8dec31de9830ab1c Mon Sep 17 00:00:00 2001 From: Matheus Cruz Rocha Date: Wed, 3 Feb 2016 09:26:53 -0300 Subject: [PATCH 06/16] Toggle iOS colors --- ionic/themes/dark.ios.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/ionic/themes/dark.ios.scss b/ionic/themes/dark.ios.scss index 77881c80be..4ab6a04ac4 100644 --- a/ionic/themes/dark.ios.scss +++ b/ionic/themes/dark.ios.scss @@ -55,6 +55,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 // -------------------------------------------------- From 10d95f237f9151f6e0ebbd60c526b684b67fe38b Mon Sep 17 00:00:00 2001 From: Matheus Cruz Rocha Date: Thu, 4 Feb 2016 10:08:54 -0300 Subject: [PATCH 07/16] Change color iOS outer-content background --- ionic/themes/dark.ios.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/ionic/themes/dark.ios.scss b/ionic/themes/dark.ios.scss index 4ab6a04ac4..08b51d82f9 100644 --- a/ionic/themes/dark.ios.scss +++ b/ionic/themes/dark.ios.scss @@ -14,6 +14,10 @@ $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 Toolbar // -------------------------------------------------- From d833bec04fdb2b1dd11991f255c1d4ee89a1d93d Mon Sep 17 00:00:00 2001 From: Matheus Cruz Rocha Date: Thu, 4 Feb 2016 10:22:16 -0300 Subject: [PATCH 08/16] Dark theme ion-note --- ionic/themes/dark.ios.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/ionic/themes/dark.ios.scss b/ionic/themes/dark.ios.scss index 08b51d82f9..c6764dadc7 100644 --- a/ionic/themes/dark.ios.scss +++ b/ionic/themes/dark.ios.scss @@ -18,6 +18,10 @@ $font-size-ios-base: $font-size-base !default; // -------------------------------------------------- $outer-content-ios-background-color: $background-color !default; +// iOS Note +// -------------------------------------------------- + +$item-ios-note-color: map-get($colors-ios, light) !default; // iOS Toolbar // -------------------------------------------------- From 572f7cc1772856deadc427d780d011e93395a810 Mon Sep 17 00:00:00 2001 From: Matheus Cruz Rocha Date: Thu, 4 Feb 2016 10:22:50 -0300 Subject: [PATCH 09/16] Dark theme card header color Also fixing code alignment --- ionic/themes/dark.ios.scss | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/ionic/themes/dark.ios.scss b/ionic/themes/dark.ios.scss index c6764dadc7..a260e3f7d5 100644 --- a/ionic/themes/dark.ios.scss +++ b/ionic/themes/dark.ios.scss @@ -16,7 +16,12 @@ $font-size-ios-base: $font-size-base !default; // iOS Outer content // -------------------------------------------------- -$outer-content-ios-background-color: $background-color !default; +$outer-content-ios-background-color: $background-color !default; + +// iOS Card +// -------------------------------------------------- + +$card-ios-header-color: #ddd !default; // iOS Note // -------------------------------------------------- @@ -43,9 +48,9 @@ $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; +$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; From 70bee0fcc6f4f2f44d11381956e56f1ff1765192 Mon Sep 17 00:00:00 2001 From: Matheus Cruz Rocha Date: Thu, 4 Feb 2016 10:28:01 -0300 Subject: [PATCH 10/16] Changing background color Darken background color to give more relevance to itens with dark color --- ionic/themes/dark.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ionic/themes/dark.scss b/ionic/themes/dark.scss index 4009431a1c..9883e6f02e 100644 --- a/ionic/themes/dark.scss +++ b/ionic/themes/dark.scss @@ -18,7 +18,7 @@ $colors: ( $text-color: #fff !default; $paragraph-color: $text-color !default; $link-color: map-get($colors, primary) !default; -$background-color: #1e1e1e !default; +$background-color: #191919 !default; $subdued-text-color: #666 !default; $font-family-base: -apple-system, "Helvetica Neue", "Roboto", sans-serif !default; From 569beabbf13f4dbba0f4cf6402b7fc550630f7ca Mon Sep 17 00:00:00 2001 From: Matheus Cruz Rocha Date: Thu, 11 Feb 2016 18:37:23 -0300 Subject: [PATCH 11/16] feat(Themes): md toggle dark theme This commit overrides the toggle handle background color for MD dark theme --- ionic/themes/dark.md.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/ionic/themes/dark.md.scss b/ionic/themes/dark.md.scss index c3ed5285b5..c9dcd70ce6 100644 --- a/ionic/themes/dark.md.scss +++ b/ionic/themes/dark.md.scss @@ -48,6 +48,10 @@ $item-md-padding-media-bottom: 9px !default; $item-md-padding-icon-top: 11px !default; $item-md-padding-icon-bottom: 10px !default; +// Material Design Toggle +// --------------------------------------------------- +$toggle-md-handle-background-color-off: map-get($colors-md, light) !default; + // Ripple Color // -------------------------------------------------- From eb8e778473481ac122fc683c4a62a3d86eb24a93 Mon Sep 17 00:00:00 2001 From: Matheus Cruz Rocha Date: Thu, 11 Feb 2016 19:15:12 -0300 Subject: [PATCH 12/16] feat(Themes): md dark theme item-divider Overriding color of item-divider for material design dark theme --- ionic/themes/dark.md.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/ionic/themes/dark.md.scss b/ionic/themes/dark.md.scss index c9dcd70ce6..aa62475dc3 100644 --- a/ionic/themes/dark.md.scss +++ b/ionic/themes/dark.md.scss @@ -47,6 +47,8 @@ $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 // --------------------------------------------------- From bcaa4841c439c7dbca48a46c632d3ff2c6206362 Mon Sep 17 00:00:00 2001 From: Matheus Cruz Rocha Date: Thu, 11 Feb 2016 19:16:22 -0300 Subject: [PATCH 13/16] feat(Themes): md outer content dark theme Overriding background color of outer content for material design dark theme --- ionic/themes/dark.md.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/ionic/themes/dark.md.scss b/ionic/themes/dark.md.scss index aa62475dc3..165e64bfa7 100644 --- a/ionic/themes/dark.md.scss +++ b/ionic/themes/dark.md.scss @@ -16,6 +16,10 @@ $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 // -------------------------------------------------- From 3dbd9a992e4b75dee8a987056bf0d27795c4eb8d Mon Sep 17 00:00:00 2001 From: Matheus Cruz Rocha Date: Thu, 11 Feb 2016 19:17:07 -0300 Subject: [PATCH 14/16] feat(Themes): md cards dark theme Creating dark theme for Material Design cards --- ionic/themes/dark.md.scss | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/ionic/themes/dark.md.scss b/ionic/themes/dark.md.scss index 165e64bfa7..0d537c4315 100644 --- a/ionic/themes/dark.md.scss +++ b/ionic/themes/dark.md.scss @@ -30,6 +30,12 @@ $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 // -------------------------------------------------- @@ -37,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 From 7eb7952849dfaf9048e36f06dfb211cdfbad925e Mon Sep 17 00:00:00 2001 From: Matheus Cruz Rocha Date: Thu, 11 Feb 2016 19:21:31 -0300 Subject: [PATCH 15/16] feat(Theme): md toolbar dark theme Changing text default color on toolbar for Material Design dark theme --- ionic/themes/dark.md.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ionic/themes/dark.md.scss b/ionic/themes/dark.md.scss index 0d537c4315..8041a23f22 100644 --- a/ionic/themes/dark.md.scss +++ b/ionic/themes/dark.md.scss @@ -25,7 +25,7 @@ $outer-content-md-background-color: $background-color !default; $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; From 3ee5bd3d0313758e3c86956bca982043094a5fee Mon Sep 17 00:00:00 2001 From: Matheus Cruz Rocha Date: Thu, 11 Feb 2016 19:26:13 -0300 Subject: [PATCH 16/16] feat(Themes): dark theme Changing default primary and secondary color for dark theme --- ionic/themes/dark.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ionic/themes/dark.scss b/ionic/themes/dark.scss index 9883e6f02e..be9df7aefa 100644 --- a/ionic/themes/dark.scss +++ b/ionic/themes/dark.scss @@ -6,8 +6,8 @@ $colors: ( - primary: #3498DB, - secondary: #00B16A, + primary: #007AFF, + secondary: #32db64, danger: #D91E18, light: #f4f4f4, dark: #222,