color-scheme in doc-site
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. Copy the package name.
Note: For explanation, we have selected winter-cs
- Add the color-scheme in your project
FASTN.ftd document
-- fastn.dependency: fastn-community.github.io/winter-cs
my-ds document-- import: fastn-community.github.io/winter-cs
-
Use the
colorsproperty of theds.pagecomponentIn the previous video, we created a custom component page in the
my-dsdocument.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
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.my-ds.page, the color-scheme will be applied to all pages that utilizemy-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.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
- Select the color-scheme
- Replace the old color-scheme with new one as dependency
Getting Help
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!Found an issue?
Quick links:
Join us
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.
