Sidemenu Background-Color in Ionic-V4

Sidemenu background-color in Ionic-v4

I believe below solution would help you :-)

ion-menu {
  --ion-background-color: var(--ion-color-primary);
  --ion-text-color: var(--ion-color-primary-contrast);

  ion-toolbar {
    --background: var(--ion-color-primary);
  }

  ion-list {/* optional, but it needs when you use gradient as a background color.*/
    background: transparent;
  }
}

Change side menu background color ionic 4

To do this in ionic 4 you have to add to your pages css (or scss) file

ion-menu{
      ion-content{
          --ion-background-color:#color
      }
}

Since the menu is most probably on the app.component.html you may not have a css file generated for it in which case you can easily link one by specifying it at the app.component.ts using

@Component({
     selector: 'app-root',
     templateUrl //,
     stykeUrls :['yourstyles.scss']
})

how to change background color in ion side menu in ionic 4

see this answer. I added this to my menu page custom scss, and it worked for me.

ionic2 left side menu background color changing after clicked

You can use ngClass

app.html

<ion-menu [content]="content">
    <ion-header>
        <ion-toolbar>
            <ion-title>Menu</ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-list>
            <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)" [ngClass]="{'selectedMenu' : (p.title == selectedmenu)}">
                {{p.title}}
            </button>
        </ion-list>
    </ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { HomePage } from '../pages/home/home';

@Component({
    templateUrl: 'app.html'
})

export class MyApp 
{
    rootPage:any = HomePage;
    pages: Array<{title: string, component: any}>;
    selectedmenu: String;
    constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) 
    {
        this.pages = [
        { title: 'Home', component: HomePage },
        { title: 'Contact', component: HomePage },
        { title: 'About', component: HomePage },
        { title: 'Notification', component: HomePage },
        ];

        platform.ready().then(() => 
        {
            statusBar.styleDefault();
            splashScreen.hide();
        });
    }

    openPage(obj)
    {
        this.selectedmenu = obj.title;
    }
}

Can't change background of ionic side menu

You don't need to use some "span"s inside ion-item elements.
But you need to apply your styles to the ion-item > a elements.

Here's some pieces of code from one of my projects:

<ion-content>
    <ion-list>
        <ion-item ui-sref=".c1" ui-sref-active="active">1. Y</ion-item>
        <ion-item ui-sref=".c2" ui-sref-active="active">2. O</ion-item>
        <ion-item ui-sref=".c3" ui-sref-active="active">3. D</ion-item>
        <ion-item ui-sref=".c4" ui-sref-active="active">4. N</ion-item>
    </ion-list>
</ion-content>

And the SASS (here I'm overriding the background-color of the "active" ion-item's child (a element))

    ion-list {
        ion-item {
            &.active a {
                background-color: $darkYellow !important;
                color: #fff;
            }
        }
    }

Or in CSS: (assuming that you added the class coloredList to your ion-list)

ion-list.coloredList ion-item.active  a {
    background-color: red !important; 
}

With the modified HTML, in order not to color ALL the ion-lists.

<ion-list class="coloredList"> ... </ion-list>

how to set header background color in ionic 4

It seems like the ion-header acts more as a container for an inner ionic component (like an ion-toolbar). I looked over the Ionic v4 ion-toolbar documentation. This component has many custom css custom properties, including --background, that can be customized. This may be what you're looking for.

Assuming you used the CLI to create a 'login' page component, you can add a new css class definition to the login.scss file:

.new-background-color{
    --background: #54d61c;
}

And then refer to it in your login.page.html file:

<ion-header>
  <ion-toolbar class="new-background-color">
        <ion-title>Login</ion-title>
  </ion-toolbar>
</ion-header>

---

Related Topics