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
Thank you guys, keep watching these videos to learn more about fastn.
Support us by giving a star ⭐ on GitHub and join our fastn community on Discord.