Add new theme/skins example to starterkit

Created on 6 May 2025, about 1 month ago

Problem/Motivation

DaisyUI provide 35 pre-built theme.

The starterkit should provide an example on how to add other themes during the build process !

Example of theme declarations: https://github.com/saadeghi/daisyui/tree/master/packages/daisyui/src/themes

Feature request
Status

Active

Version

5.0

Component

Code

Created by

🇫🇷France G4MBINI Bègles

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • 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" dropdown

    The 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

    @christian.wiedemann can we have a look ?

  • 🇫🇷France G4MBINI Bègles
  • 🇫🇷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

Production build 0.71.5 2024