Gunmetal + yellow theme - problem with popup headers

Ionic Framework ionic-v3
1

Hi, I am trying to write my own dark SCSS for ionic.

I’m facing a problem with popup headers (alert/modal/etc)

IMG_1386
IMG_1386.PNG750×1334 65.5 KB

Note the “Confirm” header color - its black. I tried to inspect source and the popup headers show up as “h2” but I don’t see a black color anywhere.

Any thoughts on how I can specific a color for this? Note: I am aware I can customize anything using cssClass - I want to avoid this and simply use my own scss file instead of ionic.default.scss

My scss so far: (work in progress - working my way through different controls)

@import "./ionic.globals";


// Goofing around with my own Dark Theme
// ----------------------------------------

$colors: (
  primary:   (base: #eeae15, contrast:black),
  secondary:  (base: #E67E22, contrast: black),
  danger:     #f43e00,
  light:      (base:#bdc3c7, contrast:black),
  dark:       (base:#d35400, contrast:black),

  alert:      #F39C12,
  
) !default;


$text-color:                 #DADFE1 !default;
$link-color:                 color($colors, primary) !default;
$background-color:           #363232 !default;
$subdued-text-color:         #666 !default;

$font-family-base:            "Helvetica Neue", "Roboto", sans-serif !default;
$font-size-base:             1.4rem !default; // 1.4rem == 14px

$content-padding:            16px !default;
$content-margin:             16px !default;

$toolbar-background:         #434343 !default;
$toolbar-border-color:       #434343 !default;

$toolbar-active-color:       $link-color !default;
$toolbar-inactive-color:     #8c8c8c !default;

$tabs-background:            $toolbar-background !default;
$tabs-border-color:          $toolbar-border-color !default;
$tabs-tab-color-inactive:    #8c8c8c !default;
$tabs-tab-color-active:      $link-color !default;

$list-text-color:            $text-color !default;
$list-background-color:      #242424 !default;
$list-border-color:          #000 !default;

$alert-background: $toolbar-background !default;
$alert-button-background-color-activated: lighten($alert-background,30%);
$alert-message-text-color: $text-color;


$alert-ios-background: $alert-background !default;
$alert-md-background: $alert-background !default;
$alert-wp-background: $alert-background !default;

$alert-ios-message-text-color: $alert-message-text-color !default;
$alert-md-message-text-color: $alert-message-text-color !default;
$alert-wp-message-text-color: $alert-message-text-color !default;
2

Okay, figured it out. Had to add

body {
  //background-color: $background-color;
  color: $text-color;
}

Bleh - this is going to be a rocky path of experimentation. Anyone has a full done theme I can look at?