I took some time over the holidays to plant a seed and create a new theme for this and a few sites. I had a few objectives this time around that I wanted to achieve and the biggest of these was to create a foundation I could experiment from over the coming year.

• Keep it simple but with readability.
• Where possible have everything from the block editor, including navigation.
• A minimal base to build upon.
• Share my journey (starting with this post).

I began with a simple sketch, starting to think about what I would like this theme to be.

Forming Lithosphere

The lithosphere is the solid, outer part of the Earth. The lithosphere includes the brittle upper portion of the mantle and the crust, the outermost layers of Earth’s structure. This theme is a foundation which will be built on by the editor. With the functionality below and styling above.

I began by using the Gutenberg starter theme as my base. It’s a terrific boost to any theme project. I didn’t have to reinvent any wheels and was already off to a great start.

I picked ‘Libre Franklin’ as the font; it balanced readability with the larger, crisp font sizes I wanted. I decided to make the typography scale bigger than have in the past on themes to improve readability. Colours, again I went for blue with a brighter variation on hover.

The most prominent styling element was a top strip which had the title. I choose to use emojis for titles. I was pretty happy to discover you could do that in the Customizer. I then added a little background to it to create a logo.

Navigating

I didn’t want to have traditional navigation. Previously, I was using a reusable block made from a list and styling for navigation. Now with the new navigation block, I could use that to create my own.

I wanted to link my sites through this navigation, having each going to a type of content. By doing this, it was a way for me to bring in some different sites I use and over have them separate to titles, link to what they are specifically about. I also linked in my reading list and speaking page. As a final point, I tied in a contact email using a plane emoji.

One cool thing I found was the ability to copy and paste blocks even across sites. I have rolled this theme out onto various sites to tie in with the navigation and each one I could add the navigation and social links block by copying – so cool!

Layout using blocks

For the front page, I wanted to create a summary layout. The latest posts block was just perfect for this. I added it and set to a grid layout. You can adjust the excerpt length, so I did that. It’s a great way to create a starting page to content.

I also added in a search block to the top of the page and a quote block to frame the latest posts. Building layout using the blocks gives me the flexibility to change what I want effortlessly.

Block styles

Along the way, I brought in some styles to particular blocks. For example, the search block got a wide style using the following code:

.wp-block-search{
  background: var(--border-color);
  padding: 20px;
}

.wp-block-search .wp-block-search__input{
  background: var(--bg-color);
  max-width: 780px;
}

I also styled the ‘read more’ link:

ul.wp-block-latest-posts .wp-block-latest-posts__post-excerpt a{
  font-size: 80%;
  font-weight: 400;
  color: #888;
}

I also brought in some adjustments for the navigation block, and social links as the default Gutenberg starter theme has some margins I didn’t want for those list styles.

Adding dark mode switch

The foundation of my theme was in place, but I wanted to add a few extras. I have only got around to one of those so far, and that’s adding dark mode. I remember having one on my blog that would change the season and having lots of others – they were such a part of sites for a while. I wanted to simplify back to a light and dark mode as for me often dark mode is easier to read, but it’s personal so having the option makes sense.

My searching for a solution took me down the path of using CSS variables. I ended up finding a tutorial by Ananya Neogi ‘Create A Dark/Light Mode Switch with CSS Variables’. After some adjusting to suit my styling, I ended up with the switch that is here. It’s an exciting solution using:

[data-theme=“dark”]

Here are the variables I settled on for now:

:root {
  --primary-color: #046b99;
  --secondary-color: #00cfff;
  --font-color: #191e23;
  --bg-color: #fff;
  --heading-color: #191e23;
  --border-color: #ddd;
}

[data-theme="dark"] {
  --primary-color: #046b99;
  --secondary-color: #00cfff;
  --font-color: #eee;
  --bg-color: #161616;
  --heading-color: #aaa;
  --border-color: #444;
}

Always something to do

I on purpose am ok with the theme being pretty rough and ready at this point. I want to see it as a work in progress over the coming months. As more features get added to the block editor, I want a space where I can explore them. I’ll try and share those as I do.

Here is a list of a few things I want to do coming up:

• Create some editor layout templates for the portfolio, reading list, speaking and front page.
• Improve dark mode styling for blocks and form elements.
• Iterate on smaller device styles.
• Find a way to change quotes. Maybe a quotation block could be my next block to make.
• Editor styles to reflect front: some don’t now so want to tie back.
• Add a day/night option to the header. Possibly, also add weather to it.

I also have a fair bit of styling to polish for things like comments and forms. As a bonus to doing this, I also got a few bugs and ideas for enhancements.

If you’d like to see the work so far, it’s all up on GitHub, and I’ll be updating there.

Block boost

There is no doubt, creating a theme and the layouts were faster because I use blocks. I do recognise the considerable push forward that the Gutenberg starter theme gave me. It’s incredible how you can create almost a full layout using just blocks, a taste of amazing things to come with site-building this year.

I am looking forward to from this base theme exploring as the months unfold.