Ionic CSS变量系统 #

一、CSS变量概述 #

1.1 什么是CSS变量 #

Ionic使用CSS自定义属性（CSS Variables）来实现主题定制。这种方式具有以下优势：

优势	说明
动态更新	运行时可以动态修改
作用域控制	可以在任意层级定义
继承性	子元素自动继承父元素变量
兼容性	现代浏览器广泛支持

1.2 变量命名规范 #

scss

// Ionic变量命名规范
--ion-{property}-{variant}

// 示例
--ion-color-primary
--ion-background-color
--ion-toolbar-background

二、颜色变量 #

2.1 预设颜色 #

Ionic提供9种预设颜色：

scss

// src/theme/variables.scss
:root {
  --ion-color-primary: #3880ff;
  --ion-color-secondary: #5260ff;
  --ion-color-tertiary: #6a64ff;
  --ion-color-success: #2dd36f;
  --ion-color-warning: #ffc409;
  --ion-color-danger: #eb445a;
  --ion-color-dark: #222428;
  --ion-color-medium: #92949c;
  --ion-color-light: #f4f5f8;
}

2.2 颜色使用 #

html

<!-- 按钮颜色 -->
<ion-button color="primary">Primary</ion-button>
<ion-button color="secondary">Secondary</ion-button>
<ion-button color="danger">Danger</ion-button>

<!-- 文本颜色 -->
<p class="ion-color-primary">Primary文本</p>
<p class="ion-color-danger">Danger文本</p>

<!-- 背景颜色 -->
<div class="ion-background-primary">Primary背景</div>

2.3 自定义颜色 #

scss

// 添加新颜色
:root {
  --ion-color-favorite: #69bb7b;
  --ion-color-favorite-rgb: 105, 187, 123;
  --ion-color-favorite-contrast: #ffffff;
  --ion-color-favorite-contrast-rgb: 255, 255, 255;
  --ion-color-favorite-shade: #5ca56c;
  --ion-color-favorite-tint: #78c288;
}

.ion-color-favorite {
  --ion-color-base: var(--ion-color-favorite);
  --ion-color-base-rgb: var(--ion-color-favorite-rgb);
  --ion-color-contrast: var(--ion-color-favorite-contrast);
  --ion-color-contrast-rgb: var(--ion-color-favorite-contrast-rgb);
  --ion-color-shade: var(--ion-color-favorite-shade);
  --ion-color-tint: var(--ion-color-favorite-tint);
}

html

<!-- 使用自定义颜色 -->
<ion-button color="favorite">收藏</ion-button>

2.4 颜色变体 #

scss

// 颜色变体
:root {
  // Primary颜色
  --ion-color-primary: #3880ff;
  --ion-color-primary-rgb: 56, 128, 255;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #3171e0;
  --ion-color-primary-tint: #4c8dff;
}

三、全局变量 #

3.1 背景与文本 #

scss

:root {
  // 背景色
  --ion-background-color: #ffffff;
  --ion-background-color-rgb: 255, 255, 255;
  
  // 文本色
  --ion-text-color: #000000;
  --ion-text-color-rgb: 0, 0, 0;
  
  // 工具栏背景
  --ion-toolbar-background: #3880ff;
  
  // 工具栏文本
  --ion-toolbar-color: #ffffff;
  
  // 标签栏背景
  --ion-tab-bar-background: #ffffff;
  
  // 标签栏文本
  --ion-tab-bar-color: #92949c;
  --ion-tab-bar-color-selected: #3880ff;
}

3.2 字体设置 #

scss

:root {
  // 字体族
  --ion-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Roboto', sans-serif;
  
  // 字体大小
  --ion-font-size-xs: 10px;
  --ion-font-size-sm: 12px;
  --ion-font-size-md: 14px;
  --ion-font-size-lg: 16px;
  --ion-font-size-xl: 20px;
}

3.3 间距变量 #

scss

:root {
  // 内边距
  --ion-padding: 16px;
  --ion-padding-top: 16px;
  --ion-padding-bottom: 16px;
  --ion-padding-start: 16px;
  --ion-padding-end: 16px;
  
  // 外边距
  --ion-margin: 16px;
  --ion-margin-top: 16px;
  --ion-margin-bottom: 16px;
  --ion-margin-start: 16px;
  --ion-margin-end: 16px;
}

四、组件变量 #

4.1 按钮变量 #

scss

ion-button {
  // 背景
  --background: #3880ff;
  --background-hover: #4285f4;
  --background-activated: #3367d6;
  --background-focused: #2962ff;
  
  // 文本
  --color: #ffffff;
  --color-hover: #ffffff;
  --color-activated: #ffffff;
  --color-focused: #ffffff;
  
  // 边框
  --border-radius: 4px;
  --border-width: 1px;
  --border-style: solid;
  --border-color: transparent;
  
  // 阴影
  --box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  
  // 内边距
  --padding-top: 10px;
  --padding-bottom: 10px;
  --padding-start: 16px;
  --padding-end: 16px;
}

4.2 卡片变量 #

scss

ion-card {
  --background: #ffffff;
  --color: #000000;
  margin: 16px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

ion-card-header {
  --color: #333333;
  padding: 16px;
}

ion-card-title {
  --color: #000000;
  font-size: 18px;
  font-weight: bold;
}

ion-card-subtitle {
  --color: #999999;
  font-size: 14px;
}

4.3 输入框变量 #

scss

ion-item {
  --background: transparent;
  --background-hover: #f5f5f5;
  --background-focused: #f5f5f5;
  --border-color: #e0e0e0;
  --highlight-color-focused: #3880ff;
  --highlight-height: 2px;
}

ion-input, ion-textarea {
  --background: transparent;
  --color: #000000;
  --placeholder-color: #999999;
  --placeholder-opacity: 0.5;
  --padding-start: 12px;
  --padding-end: 12px;
}

4.4 列表变量 #

scss

ion-list {
  --background: transparent;
}

ion-item {
  --background: transparent;
  --background-hover: #f5f5f5;
  --background-activated: #eeeeee;
  --border-color: #e0e0e0;
  --inner-border-width: 0 0 1px 0;
  --padding-start: 16px;
  --padding-end: 16px;
  --min-height: 48px;
}

4.5 工具栏变量 #

scss

ion-toolbar {
  --background: #3880ff;
  --color: #ffffff;
  --border-color: transparent;
  --border-width: 0;
  --min-height: 56px;
}

ion-title {
  --color: #ffffff;
  font-size: 18px;
  font-weight: bold;
}

五、平台变量 #

5.1 iOS样式 #

scss

.ios {
  // iOS特定样式
  ion-toolbar {
    --min-height: 44px;
  }
  
  ion-button {
    --border-radius: 10px;
    --padding-top: 12px;
    --padding-bottom: 12px;
  }
  
  ion-item {
    --padding-start: 16px;
  }
}

5.2 Android样式 #

scss

.md {
  // Android特定样式
  ion-toolbar {
    --min-height: 56px;
  }
  
  ion-button {
    --border-radius: 4px;
    --padding-top: 10px;
    --padding-bottom: 10px;
  }
  
  ion-item {
    --padding-start: 16px;
  }
}

六、暗黑模式 #

6.1 自动暗黑模式 #

scss

// 自动跟随系统
@media (prefers-color-scheme: dark) {
  :root {
    --ion-background-color: #1a1a1a;
    --ion-background-color-rgb: 26, 26, 26;
    
    --ion-text-color: #ffffff;
    --ion-text-color-rgb: 255, 255, 255;
    
    --ion-border-color: #333333;
    
    --ion-item-background: #1e1e1e;
    
    --ion-toolbar-background: #1f1f1f;
    
    --ion-tab-bar-background: #1f1f1f;
  }
}

6.2 手动暗黑模式 #

scss

// 定义暗黑模式类
.dark {
  --ion-background-color: #1a1a1a;
  --ion-background-color-rgb: 26, 26, 26;
  
  --ion-text-color: #ffffff;
  --ion-text-color-rgb: 255, 255, 255;
  
  --ion-border-color: #333333;
  
  --ion-item-background: #1e1e1e;
  
  --ion-toolbar-background: #1f1f1f;
  
  --ion-tab-bar-background: #1f1f1f;
  
  // 调整颜色
  --ion-color-primary: #428cff;
  --ion-color-primary-rgb: 66, 140, 255;
}

typescript

// 切换暗黑模式
import { Component } from '@angular/core';

@Component({
  selector: 'app-settings',
  templateUrl: 'settings.page.html'
})
export class SettingsPage {
  darkMode = false;
  
  toggleDarkMode() {
    this.darkMode = !this.darkMode;
    document.body.classList.toggle('dark', this.darkMode);
  }
}

6.3 暗黑模式颜色调整 #

scss

@media (prefers-color-scheme: dark) {
  :root {
    // 调整预设颜色以适应暗黑背景
    --ion-color-primary: #428cff;
    --ion-color-secondary: #50c8ff;
    --ion-color-tertiary: #6a64ff;
    --ion-color-success: #2fdf75;
    --ion-color-warning: #ffd534;
    --ion-color-danger: #ff4961;
    --ion-color-dark: #f4f5f8;
    --ion-color-medium: #989aa2;
    --ion-color-light: #222428;
  }
}

七、安全区域 #

7.1 安全区域变量 #

scss

:root {
  --ion-safe-area-top: env(safe-area-inset-top);
  --ion-safe-area-bottom: env(safe-area-inset-bottom);
  --ion-safe-area-left: env(safe-area-inset-left);
  --ion-safe-area-right: env(safe-area-inset-right);
}

7.2 应用安全区域 #

scss

// 工具栏
ion-toolbar {
  padding-top: var(--ion-safe-area-top);
}

// 标签栏
ion-tab-bar {
  padding-bottom: var(--ion-safe-area-bottom);
}

// 内容区域
ion-content {
  --padding-bottom: var(--ion-safe-area-bottom);
}

八、动态修改变量 #

8.1 JavaScript修改 #

typescript

// 修改CSS变量
setProperty(propertyName: string, value: string) {
  document.documentElement.style.setProperty(propertyName, value);
}

// 使用示例
this.setProperty('--ion-color-primary', '#ff0000');
this.setProperty('--ion-background-color', '#f5f5f5');

8.2 主题切换 #

typescript

// 主题服务
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ThemeService {
  private themes = {
    default: {
      '--ion-color-primary': '#3880ff',
      '--ion-background-color': '#ffffff',
      '--ion-text-color': '#000000'
    },
    dark: {
      '--ion-color-primary': '#428cff',
      '--ion-background-color': '#1a1a1a',
      '--ion-text-color': '#ffffff'
    },
    custom: {
      '--ion-color-primary': '#10dc60',
      '--ion-background-color': '#f4f5f8',
      '--ion-text-color': '#333333'
    }
  };
  
  setTheme(themeName: string) {
    const theme = this.themes[themeName as keyof typeof this.themes];
    if (theme) {
      Object.keys(theme).forEach(key => {
        document.documentElement.style.setProperty(key, theme[key as keyof typeof theme]);
      });
    }
  }
}

九、最佳实践 #

9.1 变量组织 #

scss

// variables.scss

// 颜色系统
:root {
  // 品牌颜色
  --color-brand-primary: #3880ff;
  --color-brand-secondary: #5260ff;
  
  // 语义颜色
  --color-success: #2dd36f;
  --color-warning: #ffc409;
  --color-danger: #eb445a;
  
  // 中性颜色
  --color-text-primary: #000000;
  --color-text-secondary: #666666;
  --color-text-disabled: #999999;
  
  // 背景颜色
  --color-background: #ffffff;
  --color-background-secondary: #f5f5f5;
  
  // 边框颜色
  --color-border: #e0e0e0;
  --color-border-light: #f0f0f0;
}

// 映射到Ionic变量
:root {
  --ion-color-primary: var(--color-brand-primary);
  --ion-background-color: var(--color-background);
  --ion-text-color: var(--color-text-primary);
}

9.2 响应式变量 #

scss

// 不同屏幕尺寸使用不同变量
:root {
  --font-size-base: 14px;
}

@media (min-width: 768px) {
  :root {
    --font-size-base: 16px;
  }
}

@media (min-width: 1024px) {
  :root {
    --font-size-base: 18px;
  }
}

9.3 组件封装 #

scss

// 自定义组件变量
my-custom-component {
  --background: var(--ion-background-color);
  --color: var(--ion-text-color);
  --border-radius: 8px;
  --padding: 16px;
  
  display: block;
  background: var(--background);
  color: var(--color);
  border-radius: var(--border-radius);
  padding: var(--padding);
}

十、总结 #

10.1 变量分类 #

类型	示例	用途
颜色变量	–ion-color-primary	定义应用颜色
全局变量	–ion-background-color	全局样式设置
组件变量	–background	组件样式定制
平台变量	.ios / .md	平台特定样式
安全区域	–ion-safe-area-top	适配刘海屏

10.2 下一步 #

掌握了CSS变量系统后，接下来让我们学习主题定制，深入了解Ionic的主题配置！