Learn full-stack web development using fastn in a week
Learn Now
Adding color-scheme

color-scheme in doc-site

In this video we will learn how to add or change color-scheme


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

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
B: And, import the package in the 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.

    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

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 and join our fastn community on Discord.
Copyright © 2023 - fastn.com