|||

A dark theme for write.as

// Style your blog up

Theme previewTheme preview

I took some time yesterday to customise 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

Dark and orange paletteDark and orange palette

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 colours 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

The fonts used in the themeThe fonts used in the theme

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

White background for articlesWhite background for articles

As much as I love using dark palette schemes, I hate reading long articles that use a dark background.

Fully responsive

Optimized for mobileOptimized for mobile

Honestly, I didn’t have to do too much here since write.as is already well optisized 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.

Customised 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 customised as well.

Love for the details

Some detailsSome 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 colours across the entire theme.

CSS variablesCSS variables

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 Customise, and then scroll down to Custom CSS. Paste the code, and then click on Save changes.

👉 Download it on GitHub

Up next Books I read in 2020 A list of the books I read last year, with some ratings, quotes, and impressions. An icon for mymind.com
Latest posts Design is not my only passion On the evolution of digital interfaces On Stephen King Long live opinionated design Shortcut: Get Safari URL as markdown link A new album every single day of the year 🔗 The Mac as a place Photos from Morocco New year, new website: 2024 edition HazeOver I hate Netflix Books I read in 2023 🔗 Design takes time Apps Default 2023 Inspiration 002 - Andrea Pazienza Writing is thinking Working a-sync in a 9-to-5 office job Custom style for ilPost.it My design principles Shortcut: Split Screen Inspiration 001 - Head Lopper Bear 2: What’s still missing Photos from Norway Apps stack for 2023 Max VP New year, new website: 2023 edition “Batman: The long Halloween” and the power of comic books An icon for mymind.com A dark theme for write.as Books I read in 2020