- Issue created by @G4MBINI
- 🇧🇪Belgium svendecabooter Gent
I was trying to add my own custom theme, and followed the following process:
- Create a new theme based on the starterkit - as per `starterkits/ui_suite_daisyui_starterkit/README.md`
- Run the `npm install` and `npm run build` commands
- Add new theme file in `mytheme/css/themes/fancy.pcss.css` with contents like this:@plugin "daisyui/theme" { name: "fancy"; default: true; prefersdark: false; color-scheme: "light"; --color-base-100: #FAF7F2; ... }
- Add file `mytheme/mytheme.ui_skins.themes.yml` with contents like this:
# No value because same as plugin ID. fancy: label: "Fancy" label_context: "color" key: "data-theme" target: html
- Run the `npm install` and `npm run build` commands again
- Go to `/admin/appearance/settings/mytheme` and select the "Fancy" theme from the "Theme" dropdownThe CSS file for fancy theme is included in the HTML output, and my tag contains `data-theme="fancy".
I can't see any of the colors though...Is this because I use hex color codes, instead of oklch()?
Or anything else in the process I missed? - 🇧🇪Belgium svendecabooter Gent
It does seem to work if I add it like this in `mytheme/css/themes/fancy.pcss.css`:
:root:has(input.theme-controller[value=fancy]:checked),[data-theme="fancy"] { color-scheme: "light"; --color-base-100: #FAF7F2; ...
As per documentation at https://daisyui.com/docs/themes/#how-to-add-a-new-custom-theme, under "If you're using CDN and you want to use a custom theme, use it like this".
I would create a MR to add this to the documentation, but I'm not sure if this is the correct way to implement a custom theme...
- 🇫🇷France G4MBINI Bègles
@svendecabooter
You probably have to edit also the libraries.yml file like this :
core: css: theme: dist/css/app.css: { minified: true } dist/css/themes/dark.css: { minified: true } dist/css/themes/fancy.css: { minified: true }
- 🇧🇪Belgium svendecabooter Gent
Ah yes I did add the CSS like in #9 - forgot to document here.
- 🇵🇰Pakistan drupak
For me, I had to change the order of the loading of Daisy UI CDN theme. It should be loaded before the custom core library hence I had to add the dependencies to the core library definition in #9
dependencies:
- ui_suite_daisyui/daisyui