How setup your own brand colors Nintu templates with Winden and Bricks Builder.

This guide is pending an update, in the meantime please read this article to setup and configure your winden settings and start using nintu templates.

Step 1: Setup Winden’s Tailwind Config for colors and dark mode.

We want dark mode to be switchable by class (so that a user can toggle it between light and dark as well as it being loaded with the default user preference). This can be done by setting “darkMode” to “Class in the config.

We also want to load up our brand’s color palette to use instead of the default tailwind ones. To do so we configure our own colors in a similar way tailwind colors are setup by default. I would recommend starting with 10 primary shades (P50 through to P900) and 10 neutral shades (N50 through to N900). There are many tools out there to help generate tailwind color palettes, my favorite generator is this one. Once you’ve generated all shades for your colors simply replace the color codes below with your own ones (maintaining the “P” for primary colors and “N” for neutral colors).

Below is the code you need to copy/paste into your winden settings in the tailwind config field (and adjust to your color needs).

module.exports = {
	darkMode: 'class',
	theme: {
		extend: {
  "colors": {
    "p": {
      "50": "#FEF5F6",
      "100": "#FDE7EA",
      "200": "#FCCAD0",
      "300": "#FAA9B2",
      "400": "#F77D8C",
      "500": "#F12139",
      "600": "#DD0E26",
      "700": "#C50C22",
      "800": "#A30A1C",
      "900": "#730714"
    },
    "n": {
      "50": "#fafafa",
      "100": "#f4f4f5",
      "200": "#e4e4e7",
      "300": "#d4d4d8",
      "400": "#a1a1aa",
      "500": "#71717a",
      "600": "#52525b",
      "700": "#3f3f46",
      "800": "#27272a",
      "900": "#18181b"
    }
  }
},
	},
	plugins: [],
	corePlugins: {
		preflight: false,
	}
}

That’s it! You’re now all set to use copy and paste Nintu templates onto your bricks website!