Theme (Colors, etc)

The theme object is where you define your Vision UI Dashboard's color palette, type scale, font stacks, breakpoints, border radius values, and more.

Colors#

Add a theme.colors object to provide colors for your project. By default these colors can be referenced by the color, borderColor, backgroundColor, fill, stroke, styles.

We recommend adding a palette that ranges from 50 to 900. Tools like Themera, Smart Swatch, Coolors or Palx are available to generate these palettes.

// theme.js
export default {
colors: {
transparent: "transparent",
black: "#000",
white: "#fff",
gray: {
50: "#f7fafc",
// ...
900: "#171923",
},
// ...
},
}

Black & White#

Black
#000000
White
#FFFFFF

Gray#

gray 50
#F7FAFC
gray 100
#EDF2F7
gray 200
#E2E8F0
gray 300
#CBD5E0
gray 400
#A0AEC0
gray 500
#718096
gray 600
#4A5568
gray 700
#1f2733
gray 800
#1A202C
gray 900
#171923

Brand#

brand 50
#cbbff8
brand 100
#876cea
brand 200
#582CFF
brand 300
#542de1
brand 400
#4a25d0
brand 500
#3915bc
brand 600
#300eaa
brand 700
#1c0377
brand 800
#130156
brand 900
#0e0042

Red#

red 50
#FFF5F5
red 100
#FED7D7
red 200
#FEB2B2
red 300
#FC8181
red 400
#F56565
red 500
#E53E3E
red 600
#C53030
red 700
#9B2C2C
red 800
#822727
red 900
#63171B

Orange#

orange 50
#FFFAF0
orange 100
#FEEBC8
orange 200
#FBD38D
orange 300
#F6AD55
orange 400
#ED8936
orange 500
#DD6B20
orange 600
#C05621
orange 700
#9C4221
orange 800
#7B341E
orange 900
#652B19

Yellow#

yellow 50
#FFFFF0
yellow 100
#FEFCBF
yellow 200
#FAF089
yellow 300
#F6E05E
yellow 400
#ECC94B
yellow 500
#D69E2E
yellow 600
#B7791F
yellow 700
#975A16
yellow 800
#744210
yellow 900
#5F370E

Green#

green 50
#F0FFF4
green 100
#C6F6D5
green 200
#9AE6B4
green 300
#68D391
green 400
#48BB78
green 500
#38A169
green 600
#2F855A
green 700
#276749
green 800
#22543D
green 900
#1C4532

Teal#

teal 50
#E6FFFA
teal 100
#B2F5EA
teal 200
#81E6D9
teal 300
#4FD1C5
teal 400
#38B2AC
teal 500
#319795
teal 600
#2C7A7B
teal 700
#285E61
teal 800
#234E52
teal 900
#1D4044

Blue#

blue 50
#ebf8ff
blue 100
#bee3f8
blue 200
#90cdf4
blue 300
#63b3ed
blue 400
#4299e1
blue 500
#3182ce
blue 600
#2b6cb0
blue 700
#2c5282
blue 800
#2a4365
blue 900
#1A365D

Cyan#

cyan 50
#EDFDFD
cyan 100
#C4F1F9
cyan 200
#9DECF9
cyan 300
#76E4F7
cyan 400
#0BC5EA
cyan 500
#00B5D8
cyan 600
#00A3C4
cyan 700
#0987A0
cyan 800
#086F83
cyan 900
#065666

Purple#

purple 50
#FAF5FF
purple 100
#E9D8FD
purple 200
#D6BCFA
purple 300
#B794F4
purple 400
#9F7AEA
purple 500
#805AD5
purple 600
#6B46C1
purple 700
#553C9A
purple 800
#44337A
purple 900
#322659

Pink#

pink 50
#FFF5F7
pink 100
#FED7E2
pink 200
#FBB6CE
pink 300
#F687B3
pink 400
#ED64A6
pink 500
#D53F8C
pink 600
#B83280
pink 700
#97266D
pink 800
#702459
pink 900
#521B41

Typography#

To manage Typography options, the theme object supports the following keys:

  • fonts (font families)
  • fontSizes
  • fontWeights
  • lineHeights
  • letterSpacings
// example theme object
export default {
colors: {...},
fonts: {
body: "system-ui, sans-serif",
heading: "Helvetica, sans-seriff",
mono: "Menlo, monospace",
},
fontSizes: {
xs: "0.75rem",
sm: "0.875rem",
md: "1rem",
lg: "1.125rem",
xl: "1.25rem",
"2xl": "1.5rem",
"3xl": "1.875rem",
"4xl": "2.25rem",
"5xl": "3rem",
"6xl": "3.75rem",
"7xl": "4.5rem",
"8xl": "6rem",
"9xl": "8rem",
},
fontWeights: {
hairline: 100,
thin: 200,
light: 300,
normal: 400,
medium: 500,
semibold: 600,
bold: 700,
extrabold: 800,
black: 900,
},
lineHeights: {
normal: "normal",
none: 1,
shorter: 1.25,
short: 1.375,
base: 1.5,
tall: 1.625,
taller: "2",
"3": ".75rem",
"4": "1rem",
"5": "1.25rem",
"6": "1.5rem",
"7": "1.75rem",
"8": "2rem",
"9": "2.25rem",
"10": "2.5rem",
},
letterSpacings: {
tighter: "-0.05em",
tight: "-0.025em",
normal: "0",
wide: "0.025em",
wider: "0.05em",
widest: "0.1em",
},
};

Breakpoints#

Vision UI Dashboard comes with a predefined set of commonly used breakpoints.

// theme.js
import { createBreakpoints } from "@chakra-ui/theme-tools"
export default createBreakpoints({
sm: "320px",
md: "768px",
lg: "1024px",
xl: "1440px",
"2xl": "96em",
})

Spacing#

The space key allows you to customize the global spacing and sizing scale for your project. By default these spacing value can be referenced by the padding, margin, and top, left, right, bottom styles.

export default {
space: {
px: "1px",
0.5: "0.125rem",
1: "0.25rem",
1.5: "0.375rem",
2: "0.5rem",
2.5: "0.625rem",
3: "0.75rem",
3.5: "0.875rem",
4: "1rem",
5: "1.25rem",
6: "1.5rem",
7: "1.75rem",
8: "2rem",
9: "2.25rem",
10: "2.5rem",
12: "3rem",
14: "3.5rem",
16: "4rem",
20: "5rem",
24: "6rem",
28: "7rem",
32: "8rem",
36: "9rem",
40: "10rem",
44: "11rem",
48: "12rem",
52: "13rem",
56: "14rem",
60: "15rem",
64: "16rem",
72: "18rem",
80: "20rem",
96: "24rem",
},
}

© 2021, Made with ❤️ by Creative Tim & Simmmple for a better web

  • Creative Tim
  • Simmmple
  • Blog
  • License