You have never seen a theme this fast with unique features like these.
Pure performance doesn’t have to be ugly. And dark mode is hip now right? Have you ever seen dark/light mode AND color shift? You decide what the page looks like — make it comfortable for you.
Tap the ☀️ in the top menu to brighten your day. Then 🌙 when you want to relax. Slide the color shift slider to change the ambiance. A little something to fit your mood, or even to help your eyes read the content easier. It works in light and dark modes!
Bear Metal, a lean, mean, speed-loving theme using advanced CSS techniques and a cool dark mode with fantastic typography, perfectly responsive design, and Gutenberg-ready.
Actually… it’s the theme you’re looking at now.
That’s right, Bear Metal is the custom theme developed to power WP🐹.
But you don’t want this theme
Yes. Bear Metal is developed to be ultra-fast. Learn. Easily readable. No fluff, no extras to get in the way.
It loads the least amount of CSS possible. It obtains perfect scores on Web. Dev’s web vitals report.
But you don’t want this theme. It is so custom it’s very inflexible. It’s built perfectly for WP🐹. It’s a v1.0.0 release and there is a ton of work to do on it still.
And while I will be constantly improving it, I don’t know if it will ever be publicly available (but never say never).
Take care,
—🐹, ✌️+❤️
Bear Metal styles the Guidepost table of contents plugin and typography as follows:
- But you don’t want this theme
- Heading 2
- Heading 3
- Heading 4
- Heading 3
- Developer Notes
- Updates
Heading 2
Heading 3
Heading 4
This is a paragraph, with a nice amount of line-height as to not appear squashed — more readable that way. There is also an extra margin after each paragraph.
This extra margin makes it easier on the eyes to move from one paragraph to the other and has less of the “wall of text” effect. It’s a thin font on the dark background which allows the eyes to relax when reading — especially at night.
Text size, padding, and alignment are responsive — so it renders nicely from the smallest to largest screens — and there are custom color palettes added to the block editor too.
This is hot red.
This is sky blue.
This is lime green.
And this is darkness
The colors and HSL color codes were discovered using my color inspiration tool, powered by Colrrr (my WP plugin to create color tools).
Developer Notes
Getting nerdy here. The theme focuses on using as little “extra” as possible. It even removes the block editor styles (which are 55kb!). There is no dependency on jQuery (another 99kb saved!).
I also try to limit the amount of CSS needed, just the right amount to make it work.
As you can probably tell, there’s no use of images to create the aesthetic. It’s subtle gradients and color sprinkled in with great typography to add separation and draw the reader’s eye toward important content.
There’s still a lot to do, but it’s online and functional.
Updates
5 July, 2020 — Thanks to some fantastic feedback, the h2/h3 heading tags now use color to help make the headlines “jump out” as the reader scrolls articles.
6 July, 2020 — Tweaked colors to subdue text a tiny bit to reduce eye strain. Also preparation for introducing a light mode switcher. Heading sizes increased on large screens to improve section separation.
7 July, 2020 — New feature: Dark/Light Mode Toggle. Can now swap between dark and light mode! Useful when reading at various times in the day. And the selected mode will remember your choice as you explore.
9 July, 2020 — New feature: Color Shift. Now visitors have not only the ability to toggle dark/light mode, but they can shift colors to their liking too!
10 July, 2020 — Two new features: ImgA11y and HashTag Links.
ImgA11y will warn you when an image has no alt tag at all. Why? For accessibility reasons. All images should have alt tags, even if empty. ImgA11y will draw an ugly red outline around images missing alt tags.
HashTag Links adds a hashtag link after headings with ID attributes so readers can quickly create links to share with others — taking them directly to the content on-page.
12 July, 2020 — Tweaked typography and colors to produce an even more readable design. Typography is an art that takes countless tiny tweaks to perfect.
Today Bear Metal takes a major step toward a better reading experience on large screens by pulling headings slightly left. This creates a hierarchy the reader’s eye can follow quickly.
Colors have been tweaked too — the “lower level” headings color taper off in saturation and brightness compared to the headings above them. Again, this is to help the reader’s eye move along the content smoothly.
13 July, 2020 — You may, or may not, have noticed the shake animation on the “Updates” heading above when you scrolled down to this section. The ability to shake elements when they come into view is now a feature of Bear Metal. Simply add the class “animated” to the element and it will shake when entering the viewport — quite useful for email opt-in forms. 🙂
19 July, 2020 — Tweaked and consolidated styles to reduce the overall size of the CSS payload, slightly improving the non-cached performance of the theme.
20 July, 2020 — Made the overall theme a bit more saturated so more color will show and can be changed with the color shift feature at the top right. Also added an SVG-based “cityscape” abstract to the heading of articles to bring some visual appeal without adding much bulk to the payload. Performance is important!
Take care.
