diff --git a/src/app/app.component.html b/src/app/app.component.html
index 77853f2..50c566a 100644
--- a/src/app/app.component.html
+++ b/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>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index a439a25..5a0076b 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -2,25 +2,7 @@
   max-width: 20em !important;
 }
 
-@media (prefers-color-scheme: no-preference) {
-  ion-toolbar {
-    --background: black;
-    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;
+//text portion of buttons
+.button-text {
+  color: var(--ion-color-medium-shade);
 }
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 2fefa53..e277233 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -29,7 +29,6 @@ export class AppComponent implements OnInit {
       }
     }
   };
-
   public darkMode = false;
 
   constructor(