Is it possible to access the theme colors from Javascript?

[wuarmin]

Hey,
daisyUI is great! Thank you! 👍

One question: Is it possible to access the theme colors from JS? I.e. when integrating a third party gui-library, which uses a CSS in JS-styling pattern, it would be useful to access the daisyUI-theme-colors. Something like this:

const customStyles = {
  option: (provided, state) => ({
    ...provided,
    color: theme("colors.base-content"),
    borderBottom: '1px dotted pink'
  })
}

  const App = () => (
    <Select
      styles={customStyles}
      options={...}
    />
  );

Or is it safe to just use the css variables?

const customStyles = {
  option: (provided, state) => ({
    ...provided,
    color: var(--bc),
    borderBottom: '1px dotted pink'
  })
}

Thanks and best regards

[saadeghi]

You can import daisyui/src/theming/themes file and get the color values of a theme.
Or you can get the CSS variable value of the current theme.

Example: https://svelte.dev/repl/dcb3fbf9915741fea2f6fce0a0f166ea?version=3.46.2

Edit :
daisyui/src/colors/themes path is now changed to daisyui/src/theming/themes in daisyUI version 3.0

[robawolf]

Has this changed again in 4.x? Can't resolve either path in NextJS.

[saadeghi]

@robawolf The path didn't change
But object property names in version 4 is theme name like light instead of [data-theme=light] which makes it easier to use the themes.

It was mentioned in changelog and upgrade guide: #2507 (at Extending themes)

[robawolf]

I can access Daisy UI colors with import daisyuiColors from 'daisyui/src/theming/themes', now... thanks.

But despite extending the light theme with:

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}", // Note the addition of the `app` directory.
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  plugins: [require("daisyui")],
  daisyui: {
    themes: [
      {
        light: {
          ...require("daisyui/src/theming/themes")["light"],
          "primary": "#005F73",        
          "secondary": "#0A9396",
          "accent": "#FFA0A0",
          "neutral": "#f3f4f6",
          "base-100": "#f5f5f4",
          "info": "#a5b4fc",
          "success": "#0A9396",
          "warning": "#EE9B00",
          "error": "#AE2012",
        },
      },
      },
    ]
  },
};

I'm getting back the default colors for 'light'.

{
  'color-scheme': 'light',
  primary: 'oklch(49.12% 0.3096 275.75)',
  secondary: 'oklch(69.71% 0.329 342.55)',
  'secondary-content': 'oklch(98.71% 0.0106 342.55)',
  accent: 'oklch(76.76% 0.184 183.61)',
  neutral: '#2B3440',
  'neutral-content': '#D7DDE4',
  'base-100': 'oklch(100% 0 0)',
  'base-200': '#F2F2F2',
  'base-300': '#E5E6E6',
  'base-content': '#1f2937'
}

Using a newly defined theme name like below returns undefined:

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}", 
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  plugins: [require("daisyui")],
  daisyui: {
    themes: [
      {
        yswLight: {
          ...require("daisyui/src/theming/themes")["light"],
          "primary": "#005F73",        
          "secondary": "#0A9396",
          "accent": "#FFA0A0",
          "neutral": "#f3f4f6",
          "base-100": "#f5f5f4",
          "info": "#a5b4fc",
          "success": "#0A9396",
          "warning": "#EE9B00",
          "error": "#AE2012",
        },
      }
    ]
  },
};

[GodTamIt]

@robawolf did you ever figure out how to import your customized and/or custom themes? I'm running into the same exact issue.

(Note: sorry to gravedig this thread, but this was the only results that would show up when searching here)

[robawolf]

I did not. I still would like to. My use case is that I'm using MUI along with Daisy for a few of their widgets like Calendar and Autocomplete with Creation that are unmatched with CSS only. I want to be able to feed MUI some colors from my custom Daisy theme.

[saadeghi]

Update: daisyui/colors/themes is now moved to daisyui/src/theming/themes

[AshSimmonds]

Does this only affect references in tailwind.config.js?

[saadeghi]

@AshSimmonds It's a JS file and people can import it from anywhere.
For basic use, you don't need to import this file at all... but if you wanted to modify an existing theme like this and you manually imported that file, the path needs to be updated.

[sgamma]

Is there a way to get my custom theme from JS?
I've defined my theme in tailwind.config.js

daisyui: {
    themes: [
      {
        "custom-light": {
          primary: "#003466",
          "primary-focus": "#00274d",
          "primary-content": "#ffffff",
        },
      },
    ],
  },

How can i read the primary color code from JS?

[saadeghi]

It's an object in a JS file so you can import it in your JS (on the server)
Or you can access the HSL values on the browser using CSS variables

[Goldziher]

Since I got this page myself, here is what I ended up doing using typescript:

export interface ThemeColors {
	primary: string;
	primaryFocus: string;
	primaryContent: string;
	secondary: string;
	secondaryFocus: string;
	secondaryContent: string;
	accent: string;
	accentFocus: string;
	accentContent: string;
	neutral: string;
	neutralFocus: string;
	neutralContent: string;
	base100: string;
	base200: string;
	base300: string;
	baseContent: string;
	info: string;
	infoContent: string;
	success: string;
	successContent: string;
	warning: string;
	warningContent: string;
	error: string;
	errorContent: string;
}

export function extractThemeColorsFromDOM(): ThemeColors {
	const computedStyles = getComputedStyle(document.querySelector(':root')!);
	return {
		primary: `hsl(${computedStyles.getPropertyValue('--p')}`,
		primaryFocus: `hsl(${computedStyles.getPropertyValue('--pf')}`,
		primaryContent: `hsl(${computedStyles.getPropertyValue('--pc')}`,
		secondary: `hsl(${computedStyles.getPropertyValue('--s')}`,
		secondaryFocus: `hsl(${computedStyles.getPropertyValue('--sf')}`,
		secondaryContent: `hsl(${computedStyles.getPropertyValue('--sc')}`,
		accent: `hsl(${computedStyles.getPropertyValue('--a')}`,
		accentFocus: `hsl(${computedStyles.getPropertyValue('--af')}`,
		accentContent: `hsl(${computedStyles.getPropertyValue('--ac')}`,
		neutral: `hsl(${computedStyles.getPropertyValue('--n')}`,
		neutralFocus: `hsl(${computedStyles.getPropertyValue('--nf')}`,
		neutralContent: `hsl(${computedStyles.getPropertyValue('--nc')}`,
		base100: `hsl(${computedStyles.getPropertyValue('--b1')}`,
		base200: `hsl(${computedStyles.getPropertyValue('--b2')}`,
		base300: `hsl(${computedStyles.getPropertyValue('--b3')}`,
		baseContent: `hsl(${computedStyles.getPropertyValue('--bc')}`,
		info: `hsl(${computedStyles.getPropertyValue('--in')}`,
		infoContent: `hsl(${computedStyles.getPropertyValue('--inc')}`,
		success: `hsl(${computedStyles.getPropertyValue('--su')}`,
		successContent: `hsl(${computedStyles.getPropertyValue('--suc')}`,
		warning: `hsl(${computedStyles.getPropertyValue('--wa')}`,
		warningContent: `hsl(${computedStyles.getPropertyValue('--wac')}`,
		error: `hsl(${computedStyles.getPropertyValue('--er')}`,
		errorContent: `hsl(${computedStyles.getPropertyValue('--erc')}`,
	};
}

This code extracts the color theme in its entirety from the DOM.

To be able to extract this data, the DOM must actually be present - so be aware that in SSR situations this needs to be guarded against.

[saadeghi]

If it's a separate file for types, yes of course. PRs are appreciated.

Thank you

[Goldziher]

PR added

[MarcGodard]

I did this, but the values I got didn't look like hsl?

[saadeghi]

@MarcGodard It was HSL in daisyUI 3.
It's now OKLCH since daisyUI 4.

This thread is old (2022-2023)

[MarcGodard]

Already figured that out... Thanks tho