Tried to add some color to app

src/components/ListComponent.css

@@ -8,6 +8,6 @@
   width: 100%;
 }
 
-ion-list-header {
-  /* color: "primary"; */
+ion-list {
+  background-color: aqua;
 }

src/pages/Home.tsx

@@ -1,11 +1,14 @@
 import {
   IonContent,
   IonHeader,
+  IonIcon,
   IonPage,
   IonTitle,
   IonToolbar,
 } from "@ionic/react";
 
+
+
 const Home: React.FC = () => {
   return (
     <IonPage>

src/theme/global.css

@@ -2,20 +2,25 @@
 .notion-title,
 .notion-header {
   display: none !important;
+  background-color: #d6f8df;
 }
 
 .notion-page {
   width: 100% !important;
   padding: 0px 0px 0px 0px !important;
+  background-color: #d6f8df;
 }
 
 main.notion-page-no-cover {
   padding-top: 0px !important;
   margin-top: 0px !important;
+  background-color: #d6f8df;
 }
 
 .notion-blank {
   display: none !important;
+  background-color: #d6f8df;
+  
 }
 
 .video {
@@ -34,4 +39,4 @@ main.notion-page-no-cover {
   right: 0;
   width: 100%;
   height: 100%;
-}
+}

src/theme/variables.css

@@ -74,6 +74,37 @@ http://ionicframework.com/docs/theming/ */
   --ion-color-light-contrast-rgb: 0, 0, 0;
   --ion-color-light-shade: #d7d8da;
   --ion-color-light-tint: #f5f6f9;
+
+  /** Color styling for the app **/
+
+  /* --ion-background-color: #bcf5a7;
+  --ion-tab-bar-background:#FFE001;
+  --ion-toolbar-color:#000000;
+  --ion-tab-bar-color:#ee3c2c;
+  --ion-tab-bar-color-selected:#39c6e3;
+  --ion-border-color:#000000;
+  --ion-toolbar-background:#39c6e3; */
+  --ion-background-color:#d6f8df;
+--ion-background-color-rgb:rgb(255, 255, 255);
+--ion-text-color:#000000;	 
+--ion-text-color-rgb:rgb(0, 0, 0);	
+--ion-tab-bar-background:#51c16b;
+--ion-tab-bar-border-color:#727272;
+--ion-tab-bar-color:#defbe3;
+--ion-tab-bar-color-selected:#165cf3;
+--ion-toolbar-background:#6e99f5;
+--ion-toolbar-border-color:#727272; 
+--ion-toolbar-color:#000000;
+--ion-toolbar-segment-color:#ffffff; 
+--ion-toolbar-segment-color-checked:#ffffff;
+--ion-toolbar-segment-background:#ffffff; 
+--ion-toolbar-segment-background-checked:#ffffff;
+--ion-toolbar-segment-indicator-color:#614848; 
+--ion-item-background:#defbe3; 
+--ion-item-border-color:#ff9a9a87;
+--ion-item-color:#000000; 
+--ion-placeholder-color:#ffffff;
+  
 }
 
 /*