Theming help

[marceloverdijk]

Hi,

I'm using a default flowbite setup and I'm trying to change the theme colours to red.
I tried the following:

    extend: {
      colors: {
        // https://www.tailwindshades.com/#color=11.578947368421055%2C100%2C33.52941176470588&step-up=13&step-down=6&hue-shift=0&name=milano-red&base-stop=5&v=1&overrides=eyIxIjp7Imh1ZSI6LTEsInNhdHVyYXRpb24iOjEwMCwibGlnaHRuZXNzIjotMSwiaGV4IjoiRkZDNEI2IiwidGV4dENvbG9yIjoiYmxhY2sifSwiMiI6eyJodWUiOi0xLCJzYXR1cmF0aW9uIjo4NCwibGlnaHRuZXNzIjotMSwiaGV4IjoiRjQ5NTdFIiwidGV4dENvbG9yIjoiYmxhY2sifSwiMyI6eyJodWUiOi0xLCJzYXR1cmF0aW9uIjo3NiwibGlnaHRuZXNzIjotMSwiaGV4IjoiRTY2ODQ5IiwidGV4dENvbG9yIjoiYmxhY2sifSwiNCI6eyJodWUiOi0xLCJzYXR1cmF0aW9uIjo3MiwibGlnaHRuZXNzIjotMSwiaGV4IjoiQ0M0MjIxIiwidGV4dENvbG9yIjoid2hpdGUifSwiMC41Ijp7Imh1ZSI6LTEsInNhdHVyYXRpb24iOi0xLCJsaWdodG5lc3MiOjkyLCJoZXgiOiJGRkRFRDYiLCJ0ZXh0Q29sb3IiOiJibGFjayJ9fQ%3D%3D
        primary: {
          DEFAULT: '#AB2100',
          50: '#FFDED6',
          100: '#FFC3B5',
          200: '#F4957E',
          300: '#E66849',
          400: '#CC4221',
          500: '#AB2100',
          600: '#8C1B00',
          700: '#6E1500',
          800: '#4F0F00',
          900: '#310900',
          950: '#210600'
        },

which indeed changes the primary colour to red as I was hoping for:

However, the background is still a dark blue'ish color.
I'm wondering where that is coming from and how to change it...

The sections contain the following markup:

<section class="bg-white dark:bg-gray-900">
    <div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16 lg:px-12">
      <a
        href="#"
        class="inline-flex justify-between items-center py-1 px-1 pr-4 mb-7 text-sm text-gray-700 bg-gray-100 rounded-full dark:bg-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
        role="alert"
      >
        <span class="text-xs bg-primary-600 rounded-full text-white px-4 py-1.5 mr-3">New</span>
        <span class="text-sm font-medium">Flowbite is out! See what's new</span>
        <svg class="ml-2 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path
            fill-rule="evenodd"
            d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
            clip-rule="evenodd"></path>
        </svg>
      </a>
      <h1 class="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white">
        We invest in the world’s potential
      </h1>
      <p class="mb-8 text-lg font-normal text-gray-500 lg:text-xl sm:px-16 xl:px-48 dark:text-gray-400">
        Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
      </p>

I'm currently experimenting a bit but I can't find any further information here unfortunately. Are there any resources that give more help?

[marceloverdijk]

Maybe to make this discussion more concrete.
How are other soming up with the correct values for 50, 100, 200 etc. like the defaults here: https://flowbite.com/docs/customize/colors/

I e.g. tried https://www.tailwindshades.com/ but when I enter a base colour like #e22222 then I get:

which is more red'ish at 50 (compared to the defaults) and sure much darker at 800 and 900.

[marceloverdijk]

I ended up doing:

    extend: {
      colors: {
        gray: colors.zinc,
        primary: colors.red,
      },
    },

this uses red as primary colour, and the blue'ish default gray now uses zinc.

Also this section in the Tailwind docs is useful: https://tailwindcss.com/docs/customizing-colors#generating-colors