Попутный ветер разные темы - PullRequest
Новая
       5

Попутный ветер разные темы

0 голосов
/ 05 апреля 2020

Я хотел бы спросить, есть ли способ использовать разные темы с tailind css.

Представьте, что на вашем сайте есть 2 темы - темная и светлая.

У меня есть кнопка : 

<button class="px-4 bg-blue over:bg-grey-100">Register</button>

Это для светлой темы.

Можно ли изменить дизайн кнопки в зависимости от темы.

Например, в теле я иметь класс: "theme-light" или "theme-dark".

Можно ли изменить классы кнопки для применения только к одной из тем.

Что-то в этом роде theme-dark: bg-orange : 

<button class="px-4 bg-blue over:bg-grey-100 theme-dark:bg-orange">Register</button>

Если нет способа создать разные темы, не написав пользовательские css или полностью не переписав мои html страницы для данного theme.

Если нет, то как лучше всего иметь 2 или более тем?

Спасибо.

1 Ответ

1 голос
/ 06 апреля 2020

Можно создать варианты theme-dark и theme-light, создав варианты pseudo-class. Это подробно описано здесь: https://tailwindcss.com/docs/pseudo-class-variants/#creating -custom-варианты

Например, чтобы создать вариант theme-dark pseudo-class, вы можете сделать что-то подобное в вашем файле tailwind.config.js: 

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addVariant, e }) {
      addVariant('theme-dark', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.${e(`theme-dark${separator}${className}`)}:theme-dark`
        })
      })
    })
  ]
}

Вы также можете узнать больше об этом здесь: https://tailwindcss.com/docs/plugins/#adding -варианты

Однако, чтобы достичь того, чего вы хотите, вам понадобятся некоторые javascript поведение, которое будет иметь состояние, из которого можно будет определить, когда оно theme-light и когда оно theme-dark, что означает, что это невозможно при 100% -ом попутном ветре.

Адам Ватан также быстро создал их здесь: https://github.com/adamwathan/theming-tailwind-demo

Надеюсь, это ответит на ваш вопрос.

...