[CSS] A Dark Minimalist Theme for Bearblog

04 Feb, 2025

I present: A Dark Minimalist Theme for Bearblog. This is because I saw Mire and was like, "I want that! For AO3!" And so I've been doodling on making something for AO3; I've gotten far enough into it that I then went "I want that! For Shousetsu Bang Bang!" (a very cool project that you should check out) and now finally I was like, "I want that! For a blog theme!"

(Look, I have somehow progressed to the point that I can do a baffling amount of CSS off the top of my head, I am very clearly not in control here.)

This is a super basic theme with limited functionality, but since I made it and am not going to use it myself (at least not right now), I thought I'd share! XD

To install: Switch to the Plain HTML theme (I don't know if switching does anything, but this is what I used so just in case), delete what's already in the CSS box, and paste the code into it. Hit Publish!

The basic CSS code:

:root {

--1: #252525;
	--2: #f7f4ee;
	--3: #f7f4ee;
	--4: #f7f4ee;
}

/* 1: background, 2: text, 3: links, 4: visited links*/

@media screen and (min-width: 480px) {
  body, .post, .home {
margin: 2rem auto;  }
}

/*BODY*/

body {background: var(--1)!important; color: var(--2)!important; max-width: 500px; margin: 1rem; font-family: monospace; word-wrap: break-word;}

/*HEADER*/

nav a {margin-right: 5px;}

/*FOOTER*/

footer, footer p {max-width: 60ch;text-align: center; font-size: .6rem !important; margin: auto; margin-bottom: .8rem; line-height: .8rem}

/*FONTS*/

h1, h2, h3, h4, h5, h6, span {font-family: monospace !important;}
blockquote, p, li {font-size: .75rem !important; font-family: monospace !important; line-height: 1.1rem}
p {margin-bottom: 1.25rem;}

/*LINKS*/
a {color: var(--3) !important; text-decoration: none !important; border-bottom: 1px dotted var(--3) !important}
a:visited {color: var(--4) !important;}
a:hover {background: var(--3) !important; color: var(--1) !important}

/*BLOCKQUOTE*/

blockquote {border-left: 1px solid var(--2);padding-left: .5rem}

/*BREAKLINE*/

hr {border: 1px solid var(--2);}

Add-on function: textares (like this box!) + Notices!

Add-on function: Automatically switch to light mode!

Add-on function: Tables!

Preview Images

Top: bearblog dark minimalist 1 Bottom: bearblog dark minimalist 2

#Post Type: CSS