How to customize the colors of the website?

The design of Chisai is done using basic CSS, a programming language used specifically to style websites.

Chisai does not offer a big range of customization for it's structure, but you can still modify the colors of the website as you want! There are only three colors to change in a single file:

• The text color.
• The background color.
• The frame color.

But before we change them, you have to know what color syntax to use!

How to input colors in CSS

There are several of them:

• In CSS, some predefined colors exist like blue, red, black or white. Most of the time those colors won't be what you want.
• Most of the time people use hexadecimals colors. It's a shortened version of the classic Red - Green - Blue (RGB) color that starts with an #. For example, white is #ffffff.
• But you can also use RBG instead of the hexadecimal shorcut! The syntax is rgb(red, green, blue);. For example white will be rgb(255, 255, 255).
• Even better than RGB... is RGBA, A being for Alpha aka transparency! The transparency value goes from 0 to 1 and is at the end of the color declaration. For example, a white color with 50% transparency will be rgba(255, 255, 255, 0.5);.
• And finally, there's HSL for Hue Saturation Lightness (and HSLA with Alpha):
  • Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, 240 is blue.
  • Saturation is a percentage value; 0% means a shade of gray and 100% is the full color.
  • Lightness is also a percentage; 0% is black, 100% is white.

So, which one should you use? Actually... it depends! If you already have your own colors, it's fairly easy, just use them the way they come to you, being hexadecimal or RGB. If you have your colors but need transparency, use RGBA.

My advice would be to try HSL because it's easier to customize. You have both in a single declaration the capacity to pick a color and customize it. Is the color too bland? Rise the saturation. Is the color too light? Lower the lightness.

Change colors in CSS

1. Go to the assets folder.
2. Click on the main.css file.
3. Click on the pen on the right corner to edit the file.
4. Go to line 83, 84 and 85 to change the colors.

Explanations:

• --text is the color of all your text on the website.
• --background is the color of the background on the website.
• --dots is the color of the border/frame of the content (sorry for the non-explicit name...)

You'll need to change the right part of those lines, right after the :. Don't worry about deleting the values, even the long one starting with radial-gradient.

Once the changes are done, save the file and wait for the website to be rebuilt.

Light and dark mode

By default Chisai detects if your device/computer is in light or dark mode. If you already changed colors on the lines 83 to 85, you only changed colors for the light mode!

To change the colors of the dark mode, repeat the previous instructions on lines 103, 104, 105.

Help! I don't know which colors to pick!

Don't worry colors are hard! It can take time to choose the right colors for you, so here's a tip to help you experiment directly on your website.

Open your website and using your move, right click on the background of the website and click select inspect in the menu. You will see this:

What you're seeing on the right (but it could be in the bottom or the left) are the developers tools. Don't worry, it's frightening but we're not going to use them fully.

Now on this developer tools half, look at the bottom part you will notice... Yes, the colors that are also in the assets/main.css file! Click on one of the color squares:

It will open a color picker. If you change the color:

The website changes in real time!

Using this technique, you can change the text background and dots value to see how your website look like.

Please be careful as these changes are temporary! You still need to input the colors in the assets/main.css file once your choice is made.

Have fun with colors!

But you're starting to have a lot of pages and are a bit lost when trying to make links. Fortunately for us, there's the wikilink syntax ready to be used!