Want to try fastn for your company's website?
Book a Demo

color-scheme in doc-site

In this video we will learn how to add or change color-scheme


A color scheme in website creation refers to the selection and arrangement of colors used in a design. It is important because it enhances visual appeal, establishes branding, improves readability, guides user engagement and navigation, creates coherence, and has cultural and psychological significance. A well-chosen color scheme contributes to a visually appealing and cohesive website that resonates with users. The importance of a well-thought-out color scheme in website creation cannot be overstated as it significantly impacts the overall user experience and perception of the site. `color-scheme` is added through a property of page component of `doc-site`.

Adding color-scheme

**Select/choose the color-scheme of your choice.** You can create your own color-scheme or you can select it from the [`featured page`](/featured/cs/). Copy the package name. *Note:* For explanation, we have selected [`winter-cs`](https://fastn-community.github.io/winter-cs/) The two steps to adding a color-scheme are: - **Add the color-scheme in your project**
**A:** By adding the package as a dependency in `FASTN.ftd` document
-- fastn.dependency: fastn-community.github.io/winter-cs
**B:** And, import the package in the `my-ds` document
-- import: fastn-community.github.io/winter-cs
- **Use the `colors` property of the `ds.page` component** In the previous video, we created a custom component page in the `my-ds` document. To highlight the benefit of this approach, there's no need to individually add the color-scheme to each page. Instead, by adding the color-scheme once and using `my-ds.page`, the color-scheme will be applied to all pages that utilize `my-ds.page`. And if one decides to go for another color-scheme, then changing it once in my-ds document will reflect the new color-scheme across the website.
Using `colors` property
-- component page:
optional caption title:
optional body body:
children wrapper:

-- ds.page: $page.title
body: $page.body
wrapper: $page.wrapper
colors: $winter-cs.main

;; content goes here

-- end: ds.page

-- end: page
**Case A:** Some projects needs visibility i.e. instead of passing reference, color-scheme should be visible and hence in such cases we pass the name of the color-scheme as the value of `colors` property. **Case B:** But at times, you need to do things quickly by changing one line of code. In such cases we give alias `as my-cs` after the package name when adding it as the dependency. Then pass the reference by alias while importing and also passing it as the value of the `colors` property.

Change the color-scheme

**Case A:** To change the color-scheme, - Select the color-scheme - Replace the package name of old color-scheme with new one dependency - Replace the package name of old color-scheme with new one - Use the new color-scheme name followed by `.main` **Case B:** To change the color-scheme, - Select the color-scheme - Replace the old color-scheme with new one as dependency
In summary, a well-chosen color scheme is a powerful tool in website creation. It enhances the visual appeal, reinforces branding, improves readability and accessibility, engages users, promotes navigation, and creates a cohesive and meaningful user experience.
Thank you guys, keep watching these videos to learn more about fastn. Support us by giving a star ⭐ on [GitHub](https://github.com/fastn-stack/fastn/) and join our fastn community on [Discord](/discord/).