How to set a unique background color via scope styling

Using Ionic 5 .6.13/ Vue 4.5.12

Goal … I want the Home page to have unique background color, different from the remaining SPA ( #000000 during testing…)

Setup … Single Page (Ionic/Vue) App…Using a <base-layout> component as the app skeleton… Home.vue utilizes the default slot in <base-layout>

Problem … Scoped styling in Home.vue does not work. As expected, un-scoped styling globally changes the background color for every page, but is undesired (see 5 Attempts in sample code …they ALL change the ion-content background color ONLY if the ‘scope’ attribute is removed, and thus are globally applied)

QUESTION … Is there a way to use <style scoped> to selectively change the background of the ion-content for Home.vue ONLY ??

BaseLayout.vue
<template>
  <ion-page>
    <ion-header translucent>
      <ion-toolbar>
       ..various buttons
      </ion-toolbar>
    </ion-header>

    <!-- DEFAULT SLOT for content -->
    <ion-content class="customStyles" fullscreen id="main-content">
      <slot></slot>
    </ion-content>
  </ion-page>
</template>

Home.vue
<template>
  <base-layout>
   <!-- some Ionic components for content -->
  </base-layout>
</template>

<style scoped>
/*Attempt 1*/
ion-content {
    --background:#000000;
}
/*Attempt 2*/
ion-content {
    --ion-background-color:#000000;
}
/*Attempt 3*/
ion-content.customStyles {
  --background:#000000;
  background: #000000;
}
/*Attempt 4*/
:host {
    background: #000000;
}
/*Attempt 5*/
@media (prefers-color-scheme: light) {
 
  ion-content {
    --ion-background-color: #000000;
    --ion-background-color-rgb: 0, 0, 0;
  }
}
</style>

1 post - 1 participant

Read full topic