A dark theme for Write.as
I took some time yesterday to customize my blog and create this beautiful theme for the blogging platform I use.
I created this theme to make sure that my blog was in line with the design of my personal website.
Below you will find some notes and instructions on how to install the theme. If you want to download it immediately, please head over to 👉 GitHub.
Dark palette with orange highlights
I used a dark palette with some orange highlights to mimic the look and feel of my site but don’t worry, changing it is super easy thanks to CSS variables.
CSS variables
Thanks to CSS variables you can easily the colors and fonts of the theme with just a few clicks. No need to hunt down all the references to a specific color in the CSS. Check the beginning of the file to see all of the variables I have used and easily replace them.
Beautiful fonts
A selection of Google fonts now replace the default font set by Write.as.
Cormorant Garamond has been used for titles and everything else is in Open Sans.
Source Code Pro applies to to tags and other “code-like” elements.
White background for articles
As much as I love using dark palette schemes, I hate reading long articles that use a dark background.
Fully responsive
Honestly, I didn’t have to do too much here since Write.as is already well optimized for mobile.
The main thing I did is increasing the font size of the articles.
Animations
Don’t expect crazy things. I wanted to keep the focus on the content. Apart from some hover effects, the only animations I added are on the hashtag near the titles of the articles and on the images.
Shadows for every image
Every image displays a soft shadow behind it. A small touch that makes everything look more professional.
Customized pages for tags archives
When clicking on a tag (i.e. #movies), Write.as automatically generates a page to browse through all the articles tagged with it. Those pages have been customized as well.
Love for the details
The ones above are just some of the refinements I added but is there is a lot more, like a subtle light gradient coming from the top of the page, or the rounded corners in the article page, the fonts pairing, etc.
How to edit it
To edit the theme, download it from GitHub and open it in an editor like Visual Studio Code.
If you want to change the variables of the color, for example, you can find them at the beginning of the file. Changing these will change the colors across the entire theme.
I tried to keep the CSS as clean as possible, so it shouldn’t be a problem finding things.
How to install it
Download the theme from GitHub and then head over to Write.as.
In your blog settings search for Customize, and then scroll down to Custom CSS. Paste the code, and then click on Save changes.