Why write a Hugo theme from scratch? One reason is to ensure our websites are designed with progressive enhancement in mind. In this post we explain the relevance of progressive enhancement to the climate crisis, detail exactly what progressive enhancement is, and then demonstrate how we use it in this Hugo theme. By refining the technology our websites are built upon, and documenting what we learn, we hope to initiate more conversations about how technology can support climate justice, and perhaps advance the state of the art in sustainable web design.
Here is the CSS that powers this theme’s dark mode. First, we define some colors as CSS variables: