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

Lang:

ftd

**B:** And, import the package in the `my-ds` document

-- import: fastn-community.github.io/winter-cs

Lang:

ftd

- **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

my-ds.ftd

Lang:

ftd

📝

Note

**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/).

Support `fastn`!

Enjoying `fastn`? Please consider giving us a star ⭐️ on [GitHub](https://github.com/fastn-stack/fastn) to show your support!

[⭐️](https://github.com/fastn-stack/fastn)

Getting Help

Have a question or need help? Visit our [GitHub Q&A discussion](https://github.com/fastn-stack/fastn/discussions/categories/q-a) to get answers and subscribe to it to stay tuned. Join our [Discord](https://discord.gg/a7eBUeutWD) channel and share your thoughts, suggestion, question etc. Connect with our [community](/community/)!

[💻️](/community/)

Found an issue?

If you find some issue, please visit our [GitHub issues](https://github.com/fastn-stack/fastn/issues) to tell us about it.

Quick links:

- [Install `fastn`](install/) - [Create `fastn` package](create-fastn-package/) - [Expander Crash Course](expander/) - [Syntax Highlighting in Sublime Text](/sublime/)

Join us

We welcome you to join our [Discord](https://discord.gg/a7eBUeutWD) community today. We are trying to create the language for human beings and we do not believe it would be possible without your support. We would love to hear from you.