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>

ProblemScoped 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>

Solved:

Suggested by tho-masn on: StackOverflow

Suggestion was to pass a custom CSS property to <BaseLayout> component and v-bind it to the inline style attribute of the <ion-content> as in:

    <ion-content  :style="`--ion-background-color: ${backgroundColor}`">
    </ion-content>

 props: {
    backgroundColor: {
      type: String,
      default: 'white'
    }
  }

This does allow me to set a custom background color for just the Home page by providing a CSS color in the prop, but somehow caused strange side effects (almost double exposure-like) in the simulator. I assumed this was due to the :style attribute having the highest specificity, so other theming was broken.

What worked really well was passing a prop into <BaseLayout>, but v-binding to a :class=“anotherStyle” instead of binding to the inline :style=“CSS”, as in:

<ion-content :class="additionalStyle"></ion-content>

props: {
    additionalStyle: {
        type: String,
        default: ''
   },


<style scoped> 
  .themeBackground {
    --ion-background-color: var(--ion-color-primary);
    --color:var(--ion-color-primary-contrast);
  }
</style>

Putting a custom class in the style section of <BaseLayout> and then passing the name of this class (‘themeBackground’ in this example) as a prop which is then bound to a :class attribute of the <ion-content> allowed me to change/add custom background (and other CSS properties) on the fly for any page on the site.

Thanks for the help

1 Like