In this video we will learn how to add or change color-scheme
Introduction
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
**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.
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.