最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

daisyui - Daisy UI custom theme is not applying with SvelteKit - Stack Overflow

programmeradmin1浏览0评论

Here is my tailwind.config.ts file configuration. The problem is Tailwind CSS classes are working but when I am using custom theme colors of Daisy UI it's not working. Project is built on Tauri with SvelteKit, TypeScript, Tailwind CSS and Daisy UI.

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;

I tried every possible solution mention in Daisy UI docs. I have also mention data-theme="light" in app.html.

发布评论

评论列表(0)

  1. 暂无评论