02. Color set


Color Set

This theme supports light/dark mode. You can switch between the modes via the toggle in the top right corner of the header.

@root

primary-color #FF53B0
white-color #FFFFFF
lgray-color #f2f2f2
dgray-color #282828
black-color #181818

@light

background-color #FFFFFF
gray-color #282828
text-color #181818

@dark

background-color #181818
gray-color #f2f2f2
text-color #FFFFFF


CSS code

This is the CSS that represents the above color settings. If you want to change the color settings, you can do so in assets/css/main.css.

:root {
  --primary-color: #FF53B0;
  --white-color: #FFFFFF;
  --black-color: #181818;
  --dgray-color: #282828;
  --lgray-color: #f2f2f2;
}

body[data-theme="light"] {
  --background-color: var(--white-color);
  --text-color: var(--black-color);
  --gray-color: var(--lgray-color);
}

body[data-theme="dark"] {
  --background-color: var(--black-color);
  --text-color: var(--white-color);
  --gray-color: var(--dgray-color);
}