diff --git a/core/src/components/segment-button/segment-button.ios.scss b/core/src/components/segment-button/segment-button.ios.scss
index a54c7332f2..f63cd5757a 100644
--- a/core/src/components/segment-button/segment-button.ios.scss
+++ b/core/src/components/segment-button/segment-button.ios.scss
@@ -12,7 +12,7 @@
--border-color: #{$segment-button-ios-border-color};
--color: #{$segment-button-ios-text-color};
--color-activated: var(--color);
- --color-checked: #{ion-color(primary, contrast)};
+ --color-checked: #{$segment-button-ios-text-color-checked};
--color-disabled: #{ion-color(primary, base, $segment-button-ios-opacity-disabled)};
--color-checked-disabled: #{ion-color(primary, contrast, $segment-button-ios-opacity-disabled)};
--border-radius: #{$segment-button-ios-border-radius};
diff --git a/core/src/components/segment-button/segment-button.ios.vars.scss b/core/src/components/segment-button/segment-button.ios.vars.scss
index d9ea8d7e7e..b30e38034b 100644
--- a/core/src/components/segment-button/segment-button.ios.vars.scss
+++ b/core/src/components/segment-button/segment-button.ios.vars.scss
@@ -30,6 +30,9 @@ $segment-button-ios-background-color-disabled: ion-color(primary, base, $
/// @prop - Text color of the segment button
$segment-button-ios-text-color: ion-color(primary, base) !default;
+/// @prop - Text color of the checked segment button
+$segment-button-ios-text-color-checked: ion-color(primary, contrast) !default;
+
/// @prop - Border width of the segment button
$segment-button-ios-border-width: 1px !default;
diff --git a/core/src/components/segment-button/segment-button.md.scss b/core/src/components/segment-button/segment-button.md.scss
index ace9166eb8..7101f16b21 100644
--- a/core/src/components/segment-button/segment-button.md.scss
+++ b/core/src/components/segment-button/segment-button.md.scss
@@ -15,7 +15,7 @@
--background-activated: #{$segment-button-md-background-activated};
--color: #{$segment-button-md-text-color};
--color-activated: var(--color);
- --color-checked: #{$segment-button-md-text-color-activated};
+ --color-checked: #{$segment-button-md-text-color-checked};
--color-checked-disabled: var(--color-checked);
--indicator-color: transparent;
--indicator-color-checked: var(--color-checked);
diff --git a/core/src/components/segment-button/segment-button.md.vars.scss b/core/src/components/segment-button/segment-button.md.vars.scss
index 5d2a7f7aea..e5113224b9 100644
--- a/core/src/components/segment-button/segment-button.md.vars.scss
+++ b/core/src/components/segment-button/segment-button.md.vars.scss
@@ -25,7 +25,7 @@ $segment-button-md-border-bottom-width: 2px !default;
$segment-button-md-border-bottom-color: transparent !default;
/// @prop - Text color of the activated segment button
-$segment-button-md-text-color-activated: ion-color(primary, base) !default;
+$segment-button-md-text-color-checked: ion-color(primary, base) !default;
/// @prop - Border color of the activated segment button
$segment-button-md-border-bottom-color-activated: ion-color(primary, base) !default;
diff --git a/core/src/components/segment/segment.ios.scss b/core/src/components/segment/segment.ios.scss
index c6c0b578ab..9c5c936912 100644
--- a/core/src/components/segment/segment.ios.scss
+++ b/core/src/components/segment/segment.ios.scss
@@ -50,6 +50,13 @@
line-height: $segment-button-ios-toolbar-line-height;
}
+:host-context(ion-toolbar):not(.ion-color)::slotted(ion-segment-button) {
+ --background-checked: var(--color);
+ --border-color: var(--color);
+ --color: #{var(--ion-toolbar-color-unchecked, $segment-button-ios-text-color)};
+ --color-checked: #{var(--ion-toolbar-color-checked, $segment-button-ios-text-color-checked)};
+}
+
// Segment: Color Toolbar
// --------------------------------------------------
diff --git a/core/src/components/segment/segment.md.scss b/core/src/components/segment/segment.md.scss
index 99525f36bc..d80a781033 100644
--- a/core/src/components/segment/segment.md.scss
+++ b/core/src/components/segment/segment.md.scss
@@ -26,6 +26,16 @@
color: #{current-color(base)};
}
+
+// Segment: Default Toolbar
+// --------------------------------------------------
+
+:host-context(ion-toolbar):not(.ion-color)::slotted(ion-segment-button) {
+ --color: #{var(--ion-toolbar-color-unchecked, $segment-button-md-text-color)};
+ --color-checked: #{var(--ion-toolbar-color-checked, $segment-button-md-text-color-checked)};
+}
+
+
// Segment: Toolbar Color
// --------------------------------------------------
diff --git a/core/src/components/segment/segment.md.vars.scss b/core/src/components/segment/segment.md.vars.scss
index 8afad1e1f2..9d12593879 100644
--- a/core/src/components/segment/segment.md.vars.scss
+++ b/core/src/components/segment/segment.md.vars.scss
@@ -1,4 +1,5 @@
@import "../../themes/ionic.globals.md";
+@import "../segment-button/segment-button.md.vars";
// Material Design Segment
// --------------------------------------------------
diff --git a/core/src/components/segment/test/toolbar/index.html b/core/src/components/segment/test/toolbar/index.html
index f68875be37..d55f46d84e 100644
--- a/core/src/components/segment/test/toolbar/index.html
+++ b/core/src/components/segment/test/toolbar/index.html
@@ -32,6 +32,20 @@
+
+
+
+ Paid
+
+
+ Free
+
+
+ Top
+
+
+
+
@@ -243,6 +257,22 @@
Segment in Toolbar
+
+