Document mapping colors for different frameworks

[techniq]

Provide examples to specifying Tailwind colors (or mapping to existing theme colors with other frameworks).

Would be nice to provide integration examples for:

shadcn-svelte

tailwind.config.ts

export default {
  content: [
    "./src/**/*.{html,js,svelte,ts}",
    "./node_modules/layerchart/**/*.{svelte,js}"
  ],
  theme: {
    extend: {
      colors: {
        surface: {
          content: "hsl(var(--card-foreground) / <alpha-value>)",
          100: "hsl(var(--background) / <alpha-value>)",
          200: "hsl(var(--muted) / <alpha-value>)",
          // not sure what color maps here (should be darker than 200).  Could add a new color to `app.css`
          300: "hsl(var(--muted) / <alpha-value>)"
        }
      }
    },
  },
};

Skeleton 2

tailwind.config.ts

export default {
  content: [
    './src/**/*.{html,js,svelte,ts}',
    './node_modules/layerchart/**/*.{svelte,js}', 
    join(require.resolve(
      '@skeletonlabs/skeleton'), 
      '../**/*.{html,js,svelte,ts}'
  )],
  theme: {
    extend: {
      colors: {
        'surface-100': 'rgb(var(--theme-color-surface-100) / <alpha-value>)',
        'surface-200': 'rgb(var(--theme-color-surface-200) / <alpha-value>)',
        'surface-300': 'rgb(var(--theme-color-surface-300) / <alpha-value>)',
        'surface-content': 'rgb(var(--theme-color-surface-content) / <alpha-value>)',
      }
    },
  },
};

app.css (or anywhere to define CSS)

/* `:root` doesn't work as needs to be a descendant of `:root` where Skeleton defined `--color-*`  */
body {
  --theme-color-surface-100: var(--color-surface-50);
  --theme-color-surface-200: var(--color-surface-100);
  --theme-color-surface-300: var(--color-surface-200);
  --theme-color-surface-content: var(--theme-font-color-base);

  html.dark & {
    --theme-color-surface-100: var(--color-surface-700);
    --theme-color-surface-200: var(--color-surface-800);
    --theme-color-surface-300: var(--color-surface-900);
    --theme-color-surface-content: var(--theme-font-color-dark);
  }
}

Skeleton 3

@source '../node_modules/layerchart/dist';

/* TODO: what is most common for Skeleton 3 setup */
@custom-variant dark (&:where([data-mode="dark"], [data-mode="dark"] *));

@theme {
  /* Define additional color (Skeleton provides all the other `surface-*` colors (but they need remapped for charts */
  --color-surface-content: var(--base-font-color);
}

.lc-root-container {
  --color-surface-100: var(--color-surface-50);
  --color-surface-200: var(--color-surface-100);
  --color-surface-300: var(--color-surface-200);
  --color-surface-content: var(--base-font-color);

  html[data-mode="dark"] & {
    --color-surface-100: var(--color-surface-700);
    --color-surface-200: var(--color-surface-800);
    --color-surface-300: var(--color-surface-900);
    --color-surface-content: var(--base-font-color-dark);
  }
}

Daisy UI

Daisy UI 4 (TW3)

tailwind.config.ts

export default {
  content: [
    "./src/**/*.{html,js,svelte,ts}",
    "./node_modules/layerchart/**/*.{svelte,js}"
  ],
  theme: {
    extend: {
      colors: {
        'surface-100': 'oklch(var(--b1) / <alpha-value>)',
        'surface-200': 'oklch(var(--b2) / <alpha-value>)',
        'surface-300': 'oklch(var(--b3) / <alpha-value>)',
        'surface-content': 'oklch(var(--bc) / <alpha-value>)',
      }
    },
  },
};

Daisy UI 5 (TW4)

app.css

@source '../node_modules/layerchart/dist';

@theme {
    --color-surface-100: var(--color-base-100);
    --color-surface-200: var(--color-base-200);
    --color-surface-300: var(--color-base-300);
    --color-surface-content: var(--color-base-content);
}

Tailwind only

tailwind.config.ts

export default {
  content: [
    "./src/**/*.{html,js,svelte,ts}",
    "./node_modules/layerchart/**/*.{svelte,js}"
  ],
  theme: {
    extend: {
      colors: {
        primary: "hsl(var(--color-primary) / <alpha-value>)",
        surface: {
          100: "hsl(var(--color-surface-100) / <alpha-value>)",
          200: "hsl(var(--color-surface-200) / <alpha-value>)",
          300: "hsl(var(--color-surface-300) / <alpha-value>)",
          content: "hsl(var(--color-surface-content) / <alpha-value>)"
        }
      }
    },
  },
};

app.css (or anywhere to define CSS)

:root {
  --color-primary: 257.4075 100% 50%;
  --color-surface-100: 180 100% 100%;
  --color-surface-200: 0 0% 94.902%;
  --color-surface-300: 180 1.9608% 90%;
  --color-surface-content: 215 27.907% 16.8627%;
}

flowbite

Doesn't appear to use CSS variables (just Tailwind defined colors), which makes integration challenging.

[techniq]

Skeleton

tailwind.config.ts

export default {
  theme: {
    extend: {
      colors: {
        'surface-100': 'rgb(var(--theme-color-surface-100) / <alpha-value>)',
        'surface-200': 'rgb(var(--theme-color-surface-200) / <alpha-value>)',
        'surface-300': 'rgb(var(--theme-color-surface-300) / <alpha-value>)',
        'surface-content': 'rgb(var(--theme-color-surface-content) / <alpha-value>)',
      }
    },
  },
};

app.postcss (or anywhere to define CSS)

/* `:root` doesn't work as needs to be a descendant of `:root` where Skeleton defined `--color-*`  */
body {
  --theme-color-surface-100: var(--color-surface-50);
  --theme-color-surface-200: var(--color-surface-100);
  --theme-color-surface-300: var(--color-surface-200);
  --theme-color-surface-content: var(--theme-font-color-base);

  html.dark & {
    --theme-color-surface-100: var(--color-surface-700);
    --theme-color-surface-200: var(--color-surface-800);
    --theme-color-surface-300: var(--color-surface-900);
    --theme-color-surface-content: var(--theme-font-color-dark);
  }
}

[x4080]

Hi I'm using daisyui and I added it in my .css

@media (prefers-color-scheme: dark) {
	:root {
		--customTextColor: white;
		--primaryTextColor: #ff5757;
		--softTextColor: rgba(156, 163, 175, 1);
		--softLineColor: rgba(156, 163, 175, 0.4);
		--screenBgColor: rgba(70, 70, 70, 0.5);
		--errorBgColor: darkred;
		--bgbase200: #2a2e37;
		--scrollBarColor: rgba(86, 93, 105, 1);
		--bgbase100: #3d4451;
		--bgaccent: #078d7e;
		/* layerchart */
		--theme-color-surface-100: #2a2e37;
		--theme-color-surface-200: #2a2e37;
		--theme-color-surface-300: #2a2e37;
		--theme-color-surface-content: white;
	}
}

But it seems nothing changes (using the bar chart example), when I set to light theme, colors is black and white, but using dark theme all is still black and white (nothing changes)

Is there something I missed ?

Thanks

[techniq]

Hi @x4080 👋, a few thoughts:

You need to have at least the following Tailwind colors defined

• surface-100
• surface-200
• surface-300
• surface-content

You can define them without CSS variables (just set to #2a2e37, etc), but if you decide to use CSS variables, they must be defined as colors channels separated by spaces (ex. R G B as 42 62 55 or H S L as 39 19.2 20.4) and then reference the the colors in the tailwind config with the applicable color function (rgb(...), hsl(...), etc). Ultimately follow the Tailwind Using CSS Variables guide.

Daisy UI usually sets colors in the OKLCH color space. They also have similar variables as Svelte UX / LayerChart's variables/tokens (they were a big source of inspiration). You should be able to map base-100, base-200, base-300, and base-content variables to the applicable surface-* variable.

Something like this should work (but untested, and might need some refinement):

export default {
  theme: {
    extend: {
      colors: {
        'surface-100': 'oklch(var(--b1) / <alpha-value>)',
        'surface-200': 'oklch(var(--b2) / <alpha-value>)',
        'surface-300': 'oklch(var(--b3) / <alpha-value>)',
        'surface-content': 'oklch(var(--bc) / <alpha-value>)',
      }
    },
  },
};

Let me know if that helps get you going. If you can setup a repo with Daisy UI and LayerChart, I could investigate it further.

[x4080]

Thanks for quick answer, I'll try it with

surface-100
surface-200
surface-300
surface-content

[techniq]

I've added a shadcn-svelte section as well as example integration project