testblog

Example Post

Heya!
I made a bear theme!
Dark Mode
Light mode

It is called 'Bubble Tea'!
You can see it in action over at bubbletea-theme.bearblog.dev.

If you end up using it, I'd appreciate if you'd link to this post somewhere on your blog :3

Originally, I created it for the 32bit cafe spring 2025 tea party, but I may have missed the deadline... By a lot xd.
So! I added darkmode, converted it to a bearblog theme, and now I'm putting it up here for people to hopefully enjoy!

It is accessible and has dark and lightmode! (as previously mentioned)
Colors should be easy to configure, if you want to use custom ones. I only use a couple of CSS variables, and theyre all fairly aply named.

You can check it out over on github, use my custom themes browser extension if you want an easier time updating to newer versions, or copy-paste the styles from this blogpost!

:root {
    --main-color: #ffafcc;
    --secondary-color: #ffcada;
    --link-color: #023e8a;
    --link-hover-color: #ff5d8f;
    --link-header-color: #FFF7FA;
    --header-color: #9B2C55;
  	--font-color-header: #8f2d56;
  	--bullet-color: white;
  	--font-color-tags: #00375C;
  	--font-color: #10002b;
}
@media (prefers-color-scheme: dark) {
  :root {
  	--main-color: #10002b;
    --header-color: #7b2cbf;
    --font-color-header: #BB8AE5;
    --font-color: white;
    --font-color-bold: #BB8AE5;
    --link-color: #4cc9f0;
    --font-color-tags: #4cc9f0;
    --link-hover-color: #e0aaff;
  }
}


body {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
  background-color: var(--main-color);
  
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
             "Segoe UI", Roboto, "Helvetica Neue",
             Arial, sans-serif;
}

p, li, table, footer {
	color: var(--font-color);
}

strong {
	color: var(--font-color-bold)
}

main, footer {
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  text-align: justify;
}

/* Start of Header Styles */
header {
	text-align: center;
}

header a h1 {
  display: none;
}

header nav p {
	margin: 0;
}


header {
    position: sticky;
    margin: 0;
    
    width: fit-content;
    margin-left: auto;
    margin-right: auto;

    padding-left: 5vw;
    padding-right: 5vw;

    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;

    margin-top: 0px;

    background-color: var(--header-color);
}

header a {
    text-decoration: none;
    color: var(--link-header-color)
}
/* End of Header Styles */


/* Miscellaneous Default Elements */
a {
    color: var(--link-color);
}

a:hover {
    color: var(--link-hover-color);
}

img {
    max-width: 100%;
    max-height: 100%;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--font-color-header)
}
hr {
  border: none;
  border-top: 2px solid var(--bullet-color);
}

pre {
  max-width: 100%;
  overflow-x: scroll;
}

/* Default Elements End */

.blog-posts li {
  margin-bottom: 0.3rem
}


/* Bear classes start */
.tags {
  position: relative;
}

.tags:has(a:not([style*="display:none"])) {
  border: 2px solid white;
  border-radius: 10px;
  padding: 1.2rem 1rem 1rem;
  margin-top: 1.5rem;
}

.tags:has(a:not([style*="display:none"]))::before {
  content: "tags";
  color: white;
  position: absolute;
  top: -0.6em;
  left: 1rem;
  background: var(--main-color);
  padding: 0 0.5em;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Bear classes end */


/* Fluid typography, stolen from https://css-tricks.com/snippets/css/fluid-typography/ */
html {
  font-size: 16px;
}

@media screen and (min-width: 320px) {
  html {
    font-size: calc(16px + 6 * ((100vw - 320px) / 680));
  }
}

@media screen and (min-width: 1000px) {
  html {
    font-size: 22px;
  }
}

#another tag #some more tags #themes