My 90's Style CSS for Roam

One of the things I love about all these new PKM apps is that most of them have the ability to edit how it looks by editing CSS. This is awesome if you like being able to customize things. The great thing also is that if you don't like editing things, well, just don't.

This is also helping me while I'm going through Codecademy to learn HTML, CSS, Javascript, and React. Thanks to Roam and Obsidian, I've got CSS down pretty well, lol.

After playing around a while I finally have a set of colors that I love. I'm super nostalgic for the 90's, I was born in 84, and I really love the colors from that time. Yes, they were quite ugly at times, but they were bright and playful. So I decided to change my Roam to match that aesthetic. I had a color palette already saved in Sip on my Mac so I just used that. Sip is awesome by the way.

Here's what Roam looked like before:

And here's what it looks like now with my 90's palette:

I love it. It makes me want to use Roam even more. Cal Newport has called this location-boosted cognition:

Put simply, this principle claims that the details of the physical space in which you perform cognitive work can substantially increase the value of what you produce.

He was more referring to physical places, but I think it could also apply to digital workspaces as well. When you have an app that looks awesome and you personalize it, that makes you want to use it more which, in turn, will get you to be more productive. The effect may only be small, but still, it's something.

I'm also including the Google font that I added which is IBM Plex Sans. It's actually the font that Athens Research uses. I really like it. If you don't want that font just delete the "@import" first line and any mention of IBM Plex Sans. I'm also working on a dark mode that is nearly done that closely matches this as well.

I'll post my code below and just copy it in to your "roam/css" page. If anything looks weird or off, just hit me up on Twitter and I'll see what I can do to help. I'm not a master coder, I'm still learning. So there might be a few mistakes.


@import url(‘https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&display=swap’);

.rm-page-ref–tag {
color: #7e8dfb;
}

.rm-bullet.rm-bullet–closed .rm-bullet__inner–user-icon {
box-sizing: content-box;
background-color: var(–rm-edited-email-color-darker);
border: 4px solid rgba(28,214,220,.5);
}

.rm-bullet__inner–user-icon {
box-sizing: content-box;
display: flex;
align-items: center;
overflow: hidden;
border-radius: 50%;
width: 5px;
height: 5px;
background-clip: content-box;
border: 4px solid transparent;
background-color: #ffe33c !important;
}

.rm-multibar {
border-right: 2px solid #3de8d9;
left: -6px;
width: calc(1px - -6px);
box-sizing: border-box;
cursor: pointer;
border-color: #3de8d9;
}

a {
color: #29b0f7;
}

rm-level2, .rm-heading-level-2>.rm-block__self .rm-block__input {
font-family: ‘IBM Plex Sans’, sans-serif !important;
font-weight: 500;
font-size: 1.8em;
color: #43b5c1;
}

.rm-level3, .rm-heading-level-3>.rm-block__self .rm-block__input {
font-family: ‘IBM Plex Sans’, sans-serif !important;
font-weight: 500;
font-size: 1.4em;
color: #333333;
}

.rm-page-ref–link {
color: #ff1b75;
}

.bp3-slider-progress.bp3-intent-primary {
background-color: #ff1b75 !important;
}

rm-level1, .rm-heading-level-1>.rm-block__self .rm-block__input {
font-family: ‘IBM Plex Sans’, sans-serif;
font-weight: 600;
font-size: 2.1em;
}

.rm-title-display {
line-height: 1.3em;
font-weight: 600;
}

div, textarea {
font-family: ‘IBM Plex Sans’, sans-serif !important;
font-size: 18px;
}

.level2 {
font-family: ‘IBM Plex Sans’, sans-serif !important;
}

.body{
font-family: ‘IBM Plex Sans’, sans-serif !important;
}