I'm having trouble loading the custom theme generated by the theme-generator.
Below is my implementation. Could anyone help?
app.css
@import 'tailwindcss';
@plugin "daisyui";
@plugin "daisyui/theme" {
name: "light";
default: false;
prefersdark: false;
color-scheme: "light";
--color-base-100: oklch(100% 0 0);
--color-base-200: oklch(98% 0 0);
--color-base-300: oklch(95% 0 0);
--color-base-content: oklch(21% 0.006 285.885);
--color-primary: oklch(45% 0.24 277.023);
--color-primary-content: oklch(93% 0.034 272.788);
--color-secondary: oklch(65% 0.241 354.308);
--color-secondary-content: oklch(94% 0.028 342.258);
--color-accent: oklch(77% 0.152 181.912);
--color-accent-content: oklch(38% 0.063 188.416);
--color-neutral: oklch(14% 0.005 285.823);
--color-neutral-content: oklch(92% 0.004 286.32);
--color-info: oklch(74% 0.16 232.661);
--color-info-content: oklch(29% 0.066 243.157);
--color-success: oklch(76% 0.177 163.223);
--color-success-content: oklch(37% 0.077 168.94);
--color-warning: oklch(82% 0.189 84.429);
--color-warning-content: oklch(41% 0.112 45.904);
--color-error: oklch(71% 0.194 13.428);
--color-error-content: oklch(27% 0.105 12.094);
--radius-selector: 0.5rem;
--radius-field: 0.25rem;
--radius-box: 0.5rem;
--size-selector: 0.25rem;
--size-field: 0.25rem;
--border: 1px;
--depth: 1;
--noise: 0;
}
vite.config.js
import { defineConfig } from 'vite'
import { getDirname } from '@adonisjs/core/helpers'
import inertia from '@adonisjs/inertia/client'
import vue from '@vitejs/plugin-vue'
import adonisjs from '@adonisjs/vite/client'
import { VitePWA } from 'vite-plugin-pwa'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [
tailwindcss(),
inertia({ ssr: { enabled: false } }),
vue(),
adonisjs({
entrypoints: ['inertia/app/app.ts'],
reload: ['resources/views/**/*.edge'],
}),
VitePWA({
registerType: 'autoUpdate',
manifest: {
name: 'Clickion PWA',
short_name: 'Clickion',
theme_color: '#ffffff',
start_url: '/',
display: 'standalone',
background_color: '#ffffff',
icons: [
{
src: '/icon-192x192.png',
sizes: '192x192',
type: 'image/png',
},
{
src: '/icon-512x512.png',
sizes: '512x512',
type: 'image/png',
},
],
},
workbox: {
globPatterns: ['**/*.{js,css,html,ico,png,svg,webp,json}'],
skipWaiting: true,
clientsClaim: true,
},
}),
],
resolve: {
alias: {
'@/': `${getDirname(import.meta.url)}/inertia/`,
},
},
})
I'm having trouble loading the custom theme generated by the theme-generator.
Below is my implementation. Could anyone help?
app.css
@import 'tailwindcss';
@plugin "daisyui";
@plugin "daisyui/theme" {
name: "light";
default: false;
prefersdark: false;
color-scheme: "light";
--color-base-100: oklch(100% 0 0);
--color-base-200: oklch(98% 0 0);
--color-base-300: oklch(95% 0 0);
--color-base-content: oklch(21% 0.006 285.885);
--color-primary: oklch(45% 0.24 277.023);
--color-primary-content: oklch(93% 0.034 272.788);
--color-secondary: oklch(65% 0.241 354.308);
--color-secondary-content: oklch(94% 0.028 342.258);
--color-accent: oklch(77% 0.152 181.912);
--color-accent-content: oklch(38% 0.063 188.416);
--color-neutral: oklch(14% 0.005 285.823);
--color-neutral-content: oklch(92% 0.004 286.32);
--color-info: oklch(74% 0.16 232.661);
--color-info-content: oklch(29% 0.066 243.157);
--color-success: oklch(76% 0.177 163.223);
--color-success-content: oklch(37% 0.077 168.94);
--color-warning: oklch(82% 0.189 84.429);
--color-warning-content: oklch(41% 0.112 45.904);
--color-error: oklch(71% 0.194 13.428);
--color-error-content: oklch(27% 0.105 12.094);
--radius-selector: 0.5rem;
--radius-field: 0.25rem;
--radius-box: 0.5rem;
--size-selector: 0.25rem;
--size-field: 0.25rem;
--border: 1px;
--depth: 1;
--noise: 0;
}
vite.config.js
import { defineConfig } from 'vite'
import { getDirname } from '@adonisjs/core/helpers'
import inertia from '@adonisjs/inertia/client'
import vue from '@vitejs/plugin-vue'
import adonisjs from '@adonisjs/vite/client'
import { VitePWA } from 'vite-plugin-pwa'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [
tailwindcss(),
inertia({ ssr: { enabled: false } }),
vue(),
adonisjs({
entrypoints: ['inertia/app/app.ts'],
reload: ['resources/views/**/*.edge'],
}),
VitePWA({
registerType: 'autoUpdate',
manifest: {
name: 'Clickion PWA',
short_name: 'Clickion',
theme_color: '#ffffff',
start_url: '/',
display: 'standalone',
background_color: '#ffffff',
icons: [
{
src: '/icon-192x192.png',
sizes: '192x192',
type: 'image/png',
},
{
src: '/icon-512x512.png',
sizes: '512x512',
type: 'image/png',
},
],
},
workbox: {
globPatterns: ['**/*.{js,css,html,ico,png,svg,webp,json}'],
skipWaiting: true,
clientsClaim: true,
},
}),
],
resolve: {
alias: {
'@/': `${getDirname(import.meta.url)}/inertia/`,
},
},
})
3 Answers
Reset to default 0You are overriding the default Light theme. However, you are setting it to be false by default, which means there is no default theme left. You have two options: either set Light as the default or choose another theme as the default.
Additionally, you can declare the themes used for DaisyUI like this:
@import "tailwindcss";
@plugin "daisyui" {
themes: light --default, dark --prefersdark;
}
Incomplete solutions are when you disable the default Light theme, like this:
- Your example without default theme: not working
Solution
Declare the themes and do not override the default status of the Light theme, so it remains true. (Or assign the default value to at least one other theme.)
@import "tailwindcss";
@plugin "daisyui";
@plugin "daisyui/theme" {
name: "light";
default: true; /* here */
prefersdark: false;
color-scheme: light;
--color-base-200: oklch(70% 0.1357 157.76); /* example change */
}
- Example with default theme: working
As noted, please add default: true
I also had too add
@plugin "daisyui" {
themes: false;
}
which disables the default themes altogether, as I wanted to redefine light and dark.
Import plugin like this:
@plugin "daisyui" {
themes: false;
}
@plugin "daisyui/theme" {
name: "light";
default: true; /* here */
prefersdark: false;
color-scheme: light;
--color-error: red;
}