fix(segment): add styles for in a color toolbar

core/src/components/segment/segment.ios.scss

@@ -72,3 +72,20 @@
   font-size: $segment-button-ios-toolbar-font-size;
   line-height: $segment-button-ios-toolbar-line-height;
 }
+
+:host(.in-color-toolbar) {
+  --ion-color-base: inherit;
+}
+
+:host(.in-color-toolbar) ::slotted(ion-segment-button) {
+  --border-color: currentColor;
+
+  color: inherit;
+}
+
+:host(.in-color-toolbar) ::slotted(ion-segment-button.segment-checked) {
+  --background: #{current-color(contrast)};
+  --border-color: #{current-color(contrast)};
+
+  color: #{current-color(base)};
+}

core/src/components/segment/segment.md.scss

@@ -14,6 +14,10 @@
   color: #{current-color(base)} !important;
 }
 
+:host(.in-color-toolbar) {
+  color: inherit;
+}
+
 :host(.segment-disabled) {
   opacity: $segment-md-opacity-disabled;
 

core/src/components/segment/segment.tsx

@@ -81,7 +81,8 @@ export class Segment {
         ...createColorClasses(this.color),
 
         'segment-disabled': this.disabled,
-        'in-toolbar': hostContext('ion-toolbar', this.el)
+        'in-toolbar': hostContext('ion-toolbar', this.el),
+        'in-color-toolbar': hostContext('ion-toolbar.ion-color', this.el)
       }
     };
   }