javierm42 / tailwind-material-colors Goto Github PK

I edited the main example page at https://tailwind-material-colors-docs.vercel.app/ to generate the screenshots.

bg-primary

disabled

Hiya

First of all thanks for the package.

I wanted to ask if it is already possible or if one could extend the package, so that it allows for a config, where one could fine grain the output by passing in a darkener / lightener to generate the results.

Here's an example of the output I am trying to achieve:

Default

Darker

I saw that there is a Scheme.dark function which leads to material-color-utilities being called, but that can't be extended. So in my opinion the colors would have to be changed after they are generated.

Whatever i try the plugin seems to be only default to @media (prefers-color-scheme: dark)

const config = {
  darkMode: ["selector", "[data-theme=\"dark\"]"],

module.exports = withMaterialColors(
  config,
  {
    primary: "#00491e"
  },
  {
    scheme: "content"
  }
);

Stuck in "dark mode" as that's my local preference, can see in the variable outputs all the dark mode srtuff is being put under
@media (prefers-color-scheme: dark) :root { and not my preferred selector. From what i can see of the source, looks like if it's not "class" it doesn't respect the selector.

Maybe this is using an older version of the tailwind-mode-aware-colors? seems to be pinned to v1 and looks like you've updarted to v2, perhaps fixing this there?

(ps. thanks for the plugin, does look like it's going to be immensely helpful!)

Hi Javier,

This is exactly what i was looking for, but I'm having some trouble implementing.
Here's my new tailwind.config.js with the changes applied:

const { withMaterialColors } = require('tailwind-material-colors');

/** @type {import('tailwindcss').Config} */
export default withMaterialColors(
    {
        content: ['./src/**/*.{html,js,svelte,ts}'],
        darkMode: 'class',
        theme: {
            extend: {}
        },
        plugins: []
    },
    {
        // Here, your base colors as HEX values
        // primary is required
        primary: '#ff0000',
        // secondary and/or tertiary are optional, if not set they will be derived from the primary color
        secondary: '#ffff00',
        tertiary: '#0000ff',
        // extra named colors may also be included
        green: '#00ff00',
        blue: '#0000ff'
    }
);

The problem is I'm losing all Intellisense (VScode) support for the theme structure, and postcss complains about dark:bg-gray-500 class does not exist (so I'm thinking it broke everything).

Any ideas?

Can it be rewrited to typescript or support types?

As per the spec:
https://m3.material.io/styles/color/the-color-system/tokens#7fd4440e-986d-443f-8b3a-4933bff16646

For instance, surface-container-lowest.

It looks like the current implementation is more Material 2: https://m2.material.io/design/color/the-color-system.html