Fixed buttom text color

src/app/app.component.html

@@ -16,7 +16,7 @@
                 <ion-icon color="primary" name="add-circle"></ion-icon>
               </ion-button>
               <ion-button fill="outline" color="light">
-                <ion-icon color="primary" name="add-circle"></ion-icon>&nbsp;<span style="color: #666;">Child</span>
+                <ion-icon color="primary" name="add-circle"></ion-icon>&nbsp;<span class="button-text">Child</span>
               </ion-button>
               <ion-button fill="outline" color="light">
                 <ion-icon color="danger" name="trash"></ion-icon>

src/app/app.component.scss

@@ -2,25 +2,7 @@
   max-width: 20em !important;
 }
 
-@media (prefers-color-scheme: no-preference) {
+//text portion of buttons
-  ion-toolbar {
+.button-text {
-    --background: black;
+  color: var(--ion-color-medium-shade);
-    color: white;
-  }
-  :root {
-    --background: black;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: black;
-    color: white;
-  }
-}
-
-/* Fallback for older browsers or manual mode */
-.dark {
-  --background: black !important;
-  color: white !important;
 }

src/app/app.component.ts

@@ -29,7 +29,6 @@ export class AppComponent implements OnInit {
       }
     }
   };
-
   public darkMode = false;
 
   constructor(