You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Daisy UI自定义主题在SvelteKit+Tauri项目中无法生效求助

avatar
开发者阿泽
2026-6-14
Daisy UI自定义主题颜色不生效问题（基于Tauri+SvelteKit+Tailwind CSS）

项目基于Tauri、SvelteKit、TypeScript、Tailwind CSS和Daisy UI构建，Tailwind CSS类可正常使用，但自定义的Daisy UI主题颜色无法生效。已在app.html中设置data-theme="light"，且尝试过Daisy UI文档中的所有解决方案，问题仍存在。

当前tailwind.config.ts配置：

import containerQueries from '@tailwindcss/container-queries';
import forms from '@tailwindcss/forms';
import typography from '@tailwindcss/typography';
import type { Config } from 'tailwindcss';
import daisyui from 'daisyui';
import themes from 'daisyui/src/theming/themes';

export default {
    content: ['./src/**/*.{html,js,svelte,ts}'],
    theme: {
        extend: {
            fontFamily: {
                sans: ['Inter', 'sans-serif']
            },
            animation: {
                'spin-slow': 'spin 3s linear infinite'
            }
        },
        daisyui: {
            themes: [
                {
                    light: {
                        ...themes["light"],
                        background: '#ffffff',

                        'primary-900': '#362F78',
                        'primary-800': '#42389D',
                        'primary-700': '#5145CD',
                        'primary-600': '#5850EC',
                        'primary-500': '#6875F5',
                        'primary-400': '#8DA2FB',
                        'primary-300': '#B4C6FC',
                        'primary-200': '#CDDBFE',
                        'primary-100': '#E5EDFF',
                        'primary-50': '#F0F5FF',

                        'secondary-900': '#111928',
                        'secondary-800': '#1F2A37',
                        'secondary-700': '#374151',
                        'secondary-600': '#4B5563',
                        'secondary-500': '#6B7280',
                        'secondary-400': '#9CA3AF',
                        'secondary-300': '#D1D5DB',
                        'secondary-200': '#E5E7EB',
                        'secondary-100': '#F3F4F6',
                        'secondary-50': '#F9FAFB',

                        'danger-900': '#771D1D',
                        'danger-800': '#9B1C1C',
                        'danger-700': '#C81E1E',
                        'danger-600': '#E02424',
                        'danger-500': '#F05252',
                        'danger-400': '#F98080',
                        'danger-300': '#F8B4B4',
                        'danger-200': '#FBD5D5',
                        'danger-100': '#FDE8E8',
                        'danger-50': '#FDF2F2',

                        'success-900': '#014737',
                        'success-800': '#03543F',
                        'success-700': '#046C4E',
                        'success-600': '#057A55',
                        'success-500': '#0E9F6E',
                        'success-400': '#31C48D',
                        'success-300': '#84E1BC',
                        'success-200': '#BCF0DA',
                        'success-100': '#DEF7EC',
                        'success-50': '#F3FAF7'
                    }
                },
                {
                    dark: {
                        ...themes["dark"],
                        background: '#0B0D13',
                        
                        'primary-900': '#362F78',
                        'primary-800': '#42389D',
                        'primary-700': '#5145CD',
                        'primary-600': '#5850EC',
                        'primary-500': '#6875F5',
                        'primary-400': '#8DA2FB',
                        'primary-300': '#B4C6FC',
                        'primary-200': '#CDDBFE',
                        'primary-100': '#E5EDFF',
                        'primary-50': '#F0F5FF',

                        'secondary-900': '#111928',
                        'secondary-800': '#1F2A37',
                        'secondary-700': '#374151',
                        'secondary-600': '#4B5563',
                        'secondary-500': '#6B7280',
                        'secondary-400': '#9CA3AF',
                        'secondary-300': '#D1D5DB',
                        'secondary-200': '#E5E7EB',
                        'secondary-100': '#F3F4F6',
                        'secondary-50': '#F9FAFB',

                        'danger-900': '#771D1D',
                        'danger-800': '#9B1C1C',
                        'danger-700': '#C81E1E',
                        'danger-600': '#E02424',
                        'danger-500': '#F05252',
                        'danger-400': '#F98080',
                        'danger-300': '#F8B4B4',
                        'danger-200': '#FBD5D5',
                        'danger-100': '#FDE8E8',
                        'danger-50': '#FDF2F2',

                        'success-900': '#014737',
                        'success-800': '#03543F',
                        'success-700': '#046C4E',
                        'success-600': '#057A55',
                        'success-500': '#0E9F6E',
                        'success-400': '#31C48D',
                        'success-300': '#84E1BC',
                        'success-200': '#BCF0DA',
                        'success-100': '#DEF7EC',
                        'success-50': '#F3FAF7'
                    }
                }
            ],
            darkTheme: 'dark',
            base: true, 
            styled: true,
        }
    },

    plugins: [typography, forms, containerQueries, daisyui]
} satisfies Config;

解决方案

1. 修正Daisy UI配置层级

你的daisyui配置嵌套在了theme对象内部，这违反了Tailwind CSS的配置规则——daisyui应该与theme、content同级，而非嵌套。这是自定义主题不生效的核心原因。

2. 调整后的配置文件

将daisyui配置移到根层级，修改后的tailwind.config.ts如下：

import containerQueries from '@tailwindcss/container-queries';
import forms from '@tailwindcss/forms';
import typography from '@tailwindcss/typography';
import type { Config } from 'tailwindcss';
import daisyui from 'daisyui';
import themes from 'daisyui/src/theming/themes';

export default {
    content: ['./src/**/*.{html,js,svelte,ts}'],
    theme: {
        extend: {
            fontFamily: {
                sans: ['Inter', 'sans-serif']
            },
            animation: {
                'spin-slow': 'spin 3s linear infinite'
            }
        },
    },
    // 将daisyui移至根层级，与theme同级
    daisyui: {
        themes: [
            {
                light: {
                    ...themes["light"],
                    background: '#ffffff',
                    'primary-900': '#362F78',
                    'primary-800': '#42389D',
                    'primary-700': '#5145CD',
                    'primary-600': '#5850EC',
                    'primary-500': '#6875F5',
                    'primary-400': '#8DA2FB',
                    'primary-300': '#B4C6FC',
                    'primary-200': '#CDDBFE',
                    'primary-100': '#E5EDFF',
                    'primary-50': '#F0F5FF',

                    'secondary-900': '#111928',
                    'secondary-800': '#1F2A37',
                    'secondary-700': '#374151',
                    'secondary-600': '#4B5563',
                    'secondary-500': '#6B7280',
                    'secondary-400': '#9CA3AF',
                    'secondary-300': '#D1D5DB',
                    'secondary-200': '#E5E7EB',
                    'secondary-100': '#F3F4F6',
                    'secondary-50': '#F9FAFB',

                    'danger-900': '#771D1D',
                    'danger-800': '#9B1C1C',
                    'danger-700': '#C81E1E',
                    'danger-600': '#E02424',
                    'danger-500': '#F05252',
                    'danger-400': '#F98080',
                    'danger-300': '#F8B4B4',
                    'danger-200': '#FBD5D5',
                    'danger-100': '#FDE8E8',
                    'danger-50': '#FDF2F2',

                    'success-900': '#014737',
                    'success-800': '#03543F',
                    'success-700': '#046C4E',
                    'success-600': '#057A55',
                    'success-500': '#0E9F6E',
                    'success-400': '#31C48D',
                    'success-300': '#84E1BC',
                    'success-200': '#BCF0DA',
                    'success-100': '#DEF7EC',
                    'success-50': '#F3FAF7'
                }
            },
            {
                dark: {
                    ...themes["dark"],
                    background: '#0B0D13',
                    'primary-900': '#362F78',
                    'primary-800': '#42389D',
                    'primary-700': '#5145CD',
                    'primary-600': '#5850EC',
                    'primary-500': '#6875F5',
                    'primary-400': '#8DA2FB',
                    'primary-300': '#B4C6FC',
                    'primary-200': '#CDDBFE',
                    'primary-100': '#E5EDFF',
                    'primary-50': '#F0F5FF',

                    'secondary-900': '#111928',
                    'secondary-800': '#1F2A37',
                    'secondary-700': '#374151',
                    'secondary-600': '#4B5563',
                    'secondary-500': '#6B7280',
                    'secondary-400': '#9CA3AF',
                    'secondary-300': '#D1D5DB',
                    'secondary-200': '#E5E7EB',
                    'secondary-100': '#F3F4F6',
                    'secondary-50': '#F9FAFB',

                    'danger-900': '#771D1D',
                    'danger-800': '#9B1C1C',
                    'danger-700': '#C81E1E',
                    'danger-600': '#E02424',
                    'danger-500': '#F05252',
                    'danger-400': '#F98080',
                    'danger-300': '#F8B4B4',
                    'danger-200': '#FBD5D5',
                    'danger-100': '#FDE8E8',
                    'danger-50': '#FDF2F2',

                    'success-900': '#014737',
                    'success-800': '#03543F',
                    'success-700': '#046C4E',
                    'success-600': '#057A55',
                    'success-500': '#0E9F6E',
                    'success-400': '#31C48D',
                    'success-300': '#84E1BC',
                    'success-200': '#BCF0DA',
                    'success-100': '#DEF7EC',
                    'success-50': '#F3FAF7'
                }
            }
        ],
        darkTheme: 'dark',
        base: true, 
        styled: true,
    },
    plugins: [typography, forms, containerQueries, daisyui]
} satisfies Config;

3. 额外检查点

  • 确认app.html的<html>标签上正确设置了data-theme：<html lang="en" data-theme="light">
  • 组件中使用Daisy UI标准类名，比如btn-primary、bg-primary-500，而非直接引用自定义变量
  • 修改配置后，清除Tailwind缓存并重启Tauri/SvelteKit开发服务

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
火山引擎 最新活动
全面开放
Doubao-Seedance-2.5全新模型升级

模型再升级,30秒超长叙事, 模态参考扩容

HOT
方舟Codingplan

模型自由，工具不限，最新支持 Deepseek-V4 系列、GLM-5.3 系列

HOT
方舟Agent plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列

HOT
新用户特惠专场

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠

最近更新时间：2026.06.14 22:54:54