🎨 Strapi Admin Tailwind Theme

Create your favorite theme for Strapi admin panel using Tailwind colors.

109,751,747,072 possible combinations!

Plaese don't forget to give it a star if you liked it 🙂⭐

📷 Examples

---

🔨 Installation

1. Go to src/admin and create app.js if you haven't already done that.
2. Create extensions folder inside src/admin.
3. Copy theme.js file from repo and paste it in src/admin/extensions. your folder structure should be like this:

   📁 src
   └── 📁 admin
       ├── 📁 extensions
       │   ├── theme.js
       │   └── ...
       ├── app.js
       └── ...
   

4. Open app.js, import darkTheme and lightTheme from theme.js and update the config:

   import { darkTheme, lightTheme } from "./extensions/theme";
   
   export default {
     config: {
       theme: {
         dark: {
           colors: darkTheme,
         },
         light: {
           colors: lightTheme,
         },
       },
     },
   };

5. Rebuild admin panel.
6. Enjoy!

---

🖌 Customization

This extension replaces Strapi Design System colors with Tailwind colors.

Inside theme.js you'll see a bunch of colors plus some functions. At the end of the file, there are two exported objects: darkTheme and lightTheme. Each object contains other objects (say "color sets") that replace colors of different parts of strapi colors; for example, darkWarning will replace all warning colors in dark mode and lightSuccess will replace all success colors in light mode.
But how are these defined at the first place?

Every color set can be defined with the following syntax:

const colorSetName = createColors(tailwindColorName, strapiDesignSystemName, isDarkTheme) // isDarkTheme is true by default and can be omitted

For example, the code below will replace primary colors (primary100, primary200, primary500, primary600 and primary700) with pink variants:

const darkPrimary = createColors(pink, "primary")

Notice that tailwind color name is a js object and doesn't need quotes!

To create your desired theme, you just need to change the name of the colors. For example, if you want to make all primary colors 'lime' in light mode, look for the lightPrimary and change the color name passed to createColors function:

// before
const lightPrimary = createColors(blue, "primary", false);

//after
const lightPrimary = createColors(lime, "primary", false);

---

🤔 Questions

• Can I have different colors for light and dark mode?
  For sure! lightTheme and darkTheme are two separate objects and you can customize them however you want.

• Can I prevent some colors from being changed and use Strapi colors?
  Of Course! just omit the color set from theme object and you are good to go:

  export const darkTheme = {
    // ...darkNeutral, neutral colors are not included in the object, so the admin panel will use strapi original colors.
    ...darkPrimary,
    ...darkSecondary,
    ...darkAlternative,
    ...darkWarning,
    ...darkSuccess,
    ...darkDanger,
    ...darkButtons,
  };

  

• Can I have dark menus in light theme and vice versa?
  Certainly! You can do it by calling the createColors function with isDarkTrue: true for light colors and the other way round:

  const lightPrimary = createColors(rose, "primary", true);

  

  const lightPrimary = createColors(rose, "primary", false);

  

• Does it support plugins in admin panel?
  Yes! Albeit if the plugin follows the strapi guidlines and uses the strapi design system for its interface.

  👆 The screenshot above is for my Strapi plugin, Content-type Explorer. Check it out on GitHub or Strapi Marketplace!