[Vuejs]-Change Background of Single Page (ie Component) in Ionic 6 Vue 4.5.2 :

by

0👍

✅

The easiest solution would probably be to just pass the background-color as prop to your BaseLayout component like this:

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"
      :style="`--ion-background-color: ${backgroundColor}`"
    >
      <slot></slot>
    </ion-content>
  </ion-page>
</template>

<script>
export default {
  props: {
    backgroundColor: {
      type: String,
      default: 'white'
    }
  }
}
</script>

This way you can easily override the background color, by passing the value to the component:

<base-layout
  background-color="#000000"  
>
   <!-- some ionic components for content -->
</base-layout>

0👍

The most straightforward solution is to just supply the background-color argument to your BaseLayout component.

Leave a comment