VertiTab Help Center

简体中文

English

简体中文

English

Appearance

参考文档 ​

VertiTab 自定义主题系统技术参考指南。

官方文档链接 ​

MUI 官方资源 ​

主题结构概览 ​

基础信息 ​

javascript
{
  id: 'ultraviolet',
  name: 'Ultra Violet',
  description: 'Pantone Color of the Year 2018 - Ultra Violet with mysterious and creative purple tones',
  isBuiltIn: true,
  themeIndex: 17
}

颜色方案 ​

javascript
colorSchemes: {
  light: {
    palette: {
      // 主要色调
      primary: { main: '#6B46C1' },
      secondary: { main: '#A855F7' },
      error: { main: '#DC2626' },
      warning: { main: '#D97706' },
      info: { main: '#2563EB' },
      success: { main: '#059669' },
      // 背景色
      background: {
        default: '#FEFBFF',
        paper: '#FAF7FF',
      },
      // 文字色
      text: {
        primary: '#1A1A1A',
        secondary: '#4A4A4A',
        disabled: '#9E9E9E',
      },
      // 动作色
      action: {
        active: '#5B21B6',
        hover: 'rgba(107, 70, 193, 0.08)',
        selected: 'rgba(107, 70, 193, 0.3)',
        focus: 'rgba(107, 70, 193, 0.16)',
      },
      divider: '#F3F0FF',
    },
  },
  dark: {
    // 深色模式配置...
  }
}

字体排版 ​

javascript
typography: {
  htmlFontSize: 16,
  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
  fontSize: 14,
  h1: {
    fontWeight: 500,
    fontSize: '1.5rem',
    lineHeight: 1.3
  },
  h4: {
    fontWeight: 400,
    fontSize: '0.875rem',
    lineHeight: 1.4
  },
  body1: {
    fontWeight: 400,
    fontSize: '0.875rem',
    lineHeight: 1.5
  },
  button: {
    fontWeight: 400,
    fontSize: '0.875rem',
    lineHeight: 1.75
  }
}

关键组件示例 ​

CSS 基线设置 ​

javascript
MuiCssBaseline: {
  defaultProps: {
    enableColorScheme: true
  },
  styleOverrides: {
    html: {
      fontSize: "16px"
    },
    body: {
      background: undefined,
      "-webkit-font-smoothing": 'antialiased',
      "-moz-osx-font-smoothing": 'grayscale'
    }
  }
}

列表项按钮 ​

javascript
MuiListItemButton: {
  defaultProps: {
    dense: true,
    disableGutters: false,
    divider: false,
    disableRipple: false
  },
  styleOverrides: {
    root: {
      borderRadius: '6px',
      paddingTop: '4px',
      paddingRight: '8px',
      paddingBottom: '4px',
      paddingLeft: '8px',
      '&:hover': {
        backgroundColor: 'rgba(107, 70, 193, 0.08)',
        boxShadow: '0 2px 8px rgba(107, 70, 193, 0.15)',
        transform: 'translateY(-1px)'
      }
    }
  }
}

图标按钮 ​

javascript
MuiIconButton: {
  defaultProps: {
    disableRipple: false,
    disableFocusRipple: false,
    color: 'primary',
    size: 'small'
  },
  styleOverrides: {
    root: {
      padding: '4px',
      margin: 0,
      borderRadius: '6px',
      '&:hover': {
        backgroundColor: 'rgba(107, 70, 193, 0.08)',
        boxShadow: '0 2px 8px rgba(107, 70, 193, 0.2)',
      }
    }
  }
}

图标组件 ​

javascript
MuiIcon: {
  defaultProps: {
    fontSize: 'small',
    color: 'inherit'
  },
  styleOverrides: {
    root: {
      fontSize: '14px',
    }
  }
},
MuiSvgIcon: {
  defaultProps: {
    fontSize: 'small',
    color: 'inherit'
  },
  styleOverrides: {
    root: {
      fontSize: '14px'
    }
  }
}

头像组件 ​

javascript
MuiAvatar: {
  defaultProps: {
    variant: 'rounded'
  },
  styleOverrides: {
    root: {
      width: '14px',
      height: '14px',
      fontSize: '14px',
    }
  }
}

菜单组件 ​

javascript
MuiMenu: {
  defaultProps: {
    dense: true,
    disableAutoFocusItem: true,
  },
  styleOverrides: {
    paper: {
      borderRadius: '8px',
      paddingTop: '8px',
      paddingBottom: '8px',
      boxShadow: '0 8px 32px rgba(107, 70, 193, 0.15)',
      border: '1px solid rgba(107, 70, 193, 0.1)',
    }
  }
}

按钮组件 ​

javascript
MuiButton: {
  defaultProps: {
    color: 'primary',
    disableFocusRipple: false,
    disableRipple: false,
    size: 'small',
  },
  styleOverrides: {
    root: {
      borderRadius: '8px',
      '&:hover': {
        transform: 'translateY(-1px)',
        boxShadow: '0 4px 16px rgba(107, 70, 193, 0.25)'
      }
    }
  }
}

背景设置语法 ​

纯色 ​

css
background: #6b46c1;
background: rgb(107, 70, 193);
background: rgba(107, 70, 193, 0.8);

渐变 ​

css
background: linear-gradient(45deg, #6b46c1, #a855f7);
background: radial-gradient(circle, #6b46c1, #a855f7);

图片 ​

css
background: url("image.jpg") center/cover no-repeat;

主题配置技巧 ​

颜色一致性 ​

  • 使用相同的主色调系列
  • 保持明暗模式的颜色对应
  • 确保足够的对比度

组件协调 ​

  • 统一的圆角设计（如 borderRadius: '6px'）
  • 一致的间距模式（如 padding: '4px'）
  • 协调的动画效果

性能优化 ​

  • 避免过度复杂的阴影和动画
  • 使用 transform 而非改变布局属性
  • 合理使用 transition 时长

常见问题 ​

主题不生效 ​

  1. 检查 JSON 语法是否正确
  2. 确认主题已保存并应用
  3. 清除浏览器缓存重新加载

样式冲突 ​

  1. 检查 CSS 特异性
  2. 使用浏览器开发者工具调试
  3. 确认组件名称拼写正确

性能问题 ​

  1. 减少复杂的 CSS 动画
  2. 优化背景图片大小
  3. 限制自定义样式数量

相关文档 ​

Copyright © 2025 VertiTab Team