Na het ontwerpen van een dark-mode en een contrast-mode zijn we aan de slag gegaan met het bouwen daarvan. We hebben gebruik gemaakt van custom properties. Door dit aan de code toe te voegen kan je het bijvoorbeeld bij background-color, color of bij tekst-elementen (p, h1, h2, etc) toevoegen en dan wordt het toegepast. We hebben voor de verschillende thema's classes aangemaakt zodat het meer overzicht en structuur heeft en daardoor is het duidelijk wat bij wat hoort.

:root { --clr-block: #ededed; --clr-blockhover: #dedede; --clr-contrast-0:#FFFFFF; --clr-contrast-50: #666666; --clr-contrast-100: #1F2123; --clr-primair-80: #DE9000; --clr-primair-50: #F7A100; --clr-icon: #DE9000; --clr-heart: #f03c2f; --clr-secundair-50:#0071B3; --clr-secundair-15: #E6F2F7; }

.dark-mode { --clr-contrast-100: #fff; --clr-contrast-0: #1F2123; --clr-block: #333; --clr-blockhover: #4a4a4a; --clr-contrast-50: #999999; --clr-secundair-50:#60C5F8; --clr-secundair-15: #006199; }

.contrast-mode { --clr-contrast-0:#FFFFFF; --clr-block: #ededed; --clr-blockhover: #999999; --clr-contrast-50: #525252; --clr-primair-50: #53241B; --clr-icon: #53241B; --clr-primair-80: #321610; --clr-contrast-100: #1F2123; --clr-secundair-50: #115D92; --clr-heart: #DB1D10; }

Ook hebben we gebruik gemaakt van CSS-nesting omdat het voor duidelijke structuur zorgt, ook is het minder code waardoor het DRY-er wordt. Voorbeeld CSS Nesting code, (de link is hetzelfde voorbeeld als het screenshot).