自定义主题

全面介绍 IndieShow 项目的主题系统架构和定制方法，包括颜色配置、暗色模式和UI组件样式，帮助您打造个性化的网站视觉风格

IndieShow-Starter-Nuxt 提供了一个简洁而灵活的主题系统，让您可以轻松定制网站的视觉风格。本文档将详细介绍主题系统的架构和配置方法。

主题系统概述

IndieShow 的主题系统基于以下核心技术：

TailwindCSS：实用优先的 CSS 框架
@nuxtjs/color-mode：提供暗色模式支持
CSS 变量：用于动态主题切换

主题系统主要包含：

品牌颜色配置
暗色/亮色模式支持
UI 组件样式定制
响应式设计支持

主题配置文件

主题配置统一在 config/theme.ts 文件中管理：

// config/theme.ts 核心结构
export const themeColors = {
  primary: {
    color: "indigo",    // 主色调名称
    hex: "#4f46e5",     // 主色调十六进制值
    gradient: {
      dark: "#6366f1",  // 暗色模式渐变色
    },
  },
  gray: {
    color: "zinc",      // 中性色调名称
  },
};
 
export const uiConfig = {
  // UI 组件配置
};
 
export const metaConfig = [
  // 浏览器主题色配置
];

颜色配置

主色调设置

IndieShow 默认使用靛蓝色（indigo）作为主色调，代表专业、创新和可信赖。要修改主色调，编辑 config/theme.ts 文件：

export const themeColors = {
  primary: {
    color: "indigo",    // Tailwind 颜色名称
    hex: "#4f46e5",     // 对应的十六进制值
    gradient: {
      dark: "#6366f1",  // 暗色模式下的渐变色
    },
  },
  // ...
};

中性色系设置

项目使用 zinc 作为默认的中性色系，提供柔和的视觉体验：

export const themeColors = {
  // ... primary 配置
  gray: {
    color: "zinc",      // 使用 zinc 灰度
  },
};

浏览器主题色

通过 metaConfig 配置浏览器标题栏和磁贴的颜色：

export const metaConfig = [
  { name: "msapplication-TileColor", content: themeColors.primary.hex },
  { name: "theme-color", content: themeColors.primary.hex },
];

暗色模式

IndieShow 通过 @nuxtjs/color-mode 模块提供完整的暗色模式支持。

基础配置

暗色模式的配置位于 nuxt.config.ts 文件中：

export default defineNuxtConfig({
  colorMode: {
    classSuffix: "",
    preference: "system",    // 默认跟随系统
    fallback: "light",      // 无法检测系统首选项时的默认值
    dataValue: "theme",     // HTML data 属性名
    storageKey: "nuxt-color-mode", // 本地存储键名
  },
});

组件中使用

在组件中使用 TailwindCSS 的 dark: 修饰符来定制暗色模式样式：

<div class="bg-white text-gray-800 dark:bg-gray-900 dark:text-white">
  自动适应暗色模式的内容
</div>

字体配置

IndieShow 使用 Google Fonts 加载字体。字体配置位于 nuxt.config.ts 的 app.head.link 部分：

export default defineNuxtConfig({
  app: {
    head: {
      link: [
        // Google Fonts 配置
        { rel: "dns-prefetch preconnect", href: "https://fonts.googleapis.com" },
        { rel: "dns-prefetch preconnect", href: "https://fonts.gstatic.com", crossorigin: "anonymous" },
        // 添加其他字体链接...
      ],
    },
  },
});