Ionic应用：如何根据用户输入修改工具栏颜色及切换主题

嘿，我来帮你搞定这两个需求！在Ionic里实现工具栏颜色自定义和主题切换其实挺直观的，下面一步步拆解：

这个需求核心是动态绑定工具栏的背景样式，通过双向绑定用户输入的颜色值来实时更新：

1. 首先在页面的TS文件里定义颜色变量和处理方法：

import { Component } from '@angular/core';

@Component({
  selector: 'app-custom-toolbar',
  templateUrl: './custom-toolbar.page.html',
  styleUrls: ['./custom-toolbar.page.scss'],
})
export class CustomToolbarPage {
  // 默认工具栏颜色为白色
  public toolbarColor: string = '#ffffff';

  // 处理用户输入的颜色值，加个简单校验确保格式合法
  updateToolbarColor(inputColor: string) {
    // 匹配十六进制颜色格式（如#fff或#ffffff）
    const validColor = /^#([0-9A-F]{3}){1,2}$/i.test(inputColor);
    if (validColor) {
      this.toolbarColor = inputColor;
    } else {
      // 可以用Ionic的Toast提示用户输入无效
      console.log('请输入有效的十六进制颜色，比如#ff0000');
    }
  }
}

2. 然后在页面的HTML模板里，绑定样式并添加输入框：

<ion-content>
  <!-- 颜色输入框 -->
  <ion-item>
    <ion-label>输入工具栏颜色</ion-label>
    <ion-input 
      [(ngModel)]="toolbarColor" 
      (ionChange)="updateToolbarColor(toolbarColor)"
      placeholder="如#ff0000"
    ></ion-input>
  </ion-item>

  <!-- 动态颜色的工具栏 -->
  <ion-toolbar [style.background]="toolbarColor">
    <ion-title>自定义颜色工具栏</ion-title>
  </ion-toolbar>
</ion-content>

这样用户输入合法颜色后，对应的工具栏背景就会实时变化啦！

如果要全局修改所有工具栏，最好用Ionic的CSS变量+主题类切换的方式，这样能统一管理全局样式：

1. 先在global.scss里定义不同主题的CSS变量：

/* 默认主题 */
:root {
  --ion-toolbar-background: #ffffff;
  --ion-toolbar-color: #000000;
}

/* 深色主题 */
.dark-theme {
  --ion-toolbar-background: #121212;
  --ion-toolbar-color: #ffffff;
}

/* 蓝色主题 */
.blue-theme {
  --ion-toolbar-background: #165DFF;
  --ion-toolbar-color: #ffffff;
}

2. 在app.component.ts里管理主题状态，负责切换和持久化主题：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  currentTheme: string = '';

  constructor() {
    // 从本地存储读取上次保存的主题，实现页面刷新后保留主题
    const savedTheme = localStorage.getItem('app-active-theme');
    if (savedTheme) {
      this.currentTheme = savedTheme;
      this.applyTheme(savedTheme);
    }
  }

  // 切换主题的方法
  switchTheme(theme: string) {
    this.currentTheme = theme;
    this.applyTheme(theme);
    // 保存到本地存储
    localStorage.setItem('app-active-theme', theme);
  }

  // 给body添加/移除主题类
  private applyTheme(theme: string) {
    // 先移除所有主题类，避免冲突
    document.body.classList.remove('dark-theme', 'blue-theme');
    if (theme) {
      document.body.classList.add(theme);
    }
  }
}

3. 在设置页面（或侧边栏）添加主题选择UI：

<ion-content>
  <ion-list>
    <ion-item (click)="switchTheme('')">
      <ion-label>默认主题</ion-label>
      <ion-radio slot="end" [checked]="currentTheme === ''"></ion-radio>
    </ion-item>
    <ion-item (click)="switchTheme('dark-theme')">
      <ion-label>深色主题</ion-label>
      <ion-radio slot="end" [checked]="currentTheme === 'dark-theme'"></ion-radio>
    </ion-item>
    <ion-item (click)="switchTheme('blue-theme')">
      <ion-label>蓝色主题</ion-label>
      <ion-radio slot="end" [checked]="currentTheme === 'blue-theme'"></ion-radio>
    </ion-item>
  </ion-list>
</ion-content>

现在所有的ion-toolbar都会自动继承--ion-toolbar-background变量，切换主题后全局工具栏都会同步更新！

如果想让用户既可以选预设主题，也能自定义全局工具栏颜色，可以在主题切换逻辑里加个自定义颜色的分支：

// 设置自定义全局工具栏颜色
setCustomGlobalColor(color: string) {
  const validColor = /^#([0-9A-F]{3}){1,2}$/i.test(color);
  if (validColor) {
    // 直接修改根元素的CSS变量
    document.documentElement.style.setProperty('--ion-toolbar-background', color);
    // 保存到本地存储
    localStorage.setItem('custom-toolbar-color', color);
    // 清空预设主题，避免冲突
    this.currentTheme = '';
    localStorage.removeItem('app-active-theme');
  }
}

// 初始化时读取自定义颜色
ngOnInit() {
  const customColor = localStorage.getItem('custom-toolbar-color');
  if (customColor) {
    document.documentElement.style.setProperty('--ion-toolbar-background', customColor);
  }
}

这样就能完美覆盖你的两个需求啦！

内容的提问来源于stack exchange，提问作者Sinner3107