How to add custom theme to tailwind css besides dark and ligth

Question

I want to add a reader mode which is different from light and dark for example

<div class="text-white dark:text-black reader:text-yellow-100"><div>

Answer 1

You could consider creating a Tailwind plugin that adds a new variant called reader that modifies a selector for when it should apply. For example, if reader: should apply when a parent element has a reader class:

tailwind.config = {
  darkMode: 'class',
  plugins: [
    tailwind.plugin(({ addVariant }) => {
      addVariant('reader', '.reader &');
    }),
  ],
};

<script src="https://cdn.tailwindcss.com/3.3.5"></script>

<div class="text-white dark:text-black reader:text-yellow-100">Foo</div>

<div class="reader">
  <div class="text-white dark:text-black reader:text-yellow-100">Foo</div>
<div>

<div class="dark">
  <div class="text-white dark:text-black reader:text-yellow-100">Foo</div>
<div>