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
.Select/choose the color-scheme of your choice.
You can create your own color-scheme or you can select it from the featured page
. Copy the package name.
Note: For explanation, we have selected winter-cs
FASTN.ftd
document-- fastn.dependency: fastn-community.github.io/winter-cs
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
.
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.
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.Case A: To change the color-scheme,
.main
Have a question or need help?
Visit our GitHub Q&A discussion to get answers and subscribe to it to stay tuned.
Join our Discord channel and share your thoughts, suggestion, question etc.
Connect with our community!We welcome you to join our Discord 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.