linuz90/better-roam-research

Better Roam Research

This is one of the most popular minimal themes for Roam Research, with system-level Dark Mode support.

👀 How does it look? See the preview below.

💬 Got feedback? Say hi on Twitter.

🔥 Want to contribute? Edit the theme.

How to use

1. Inside Roam Research, create a page named exactly roam/css

2. Create a [[Better Roam Research]] bullet point.

3. Create a child code block inside it (you can write three backticks to create it: ```) and change it to css

4. Paste this in the code block @import url("https://linuz90.github.io/better-roam-research/main.css");

NEW: If you want to force light or dark mode, use light.css or dark.css respectively instead of main.css (which uses system detection instead).

It will look like this:

The theme will change when I push updates in this repo ⚡️

Change Accent Color

Just add an extra CSS block and change the --accent-color root variable to customize the theme accent color.

Preview

Light:

When Dark Mode is enabled on your computer:

This theme improves many areas of Roam, like the Kanban:

Here it is without the theme, for reference:

Editing this theme

To create this theme I'm using the SCSS syntax. .scss files are compiled into regular CSS files used for the theme.

To edit the theme, install Sass here.

Then compile the files running this command in the project folder:

sass .:. --no-source-map --watch

The main.scss file imports the main components of the theme, using the dark mode based on the system preference.

The light.scss and dark.scss files instead only import the respective palettes.

The theme styling itself is in components/style.scss, the most important file.

better-roam-research's Issues

Favicon only for youtube?

I tried to use the favicon js. But saw that youtube favicon was already active but not other sites.
How can I use it for all websites without them being duplicated?

Delete Page modal is not visible

The confirmation modal is hidden when using this theme. I can look into it a bit during the week but wanted to note the issue.

Missing dark theme styling for the Collapsible Parentheticals

Missing dark theme styling for the new Collapsible Parentheticals feature in both collapsed 𐃏 and ((non-collapsed)) forms.

Wondering if #37 was closed without fixing this means you intend to leave some styling unhandled/not working?

Youtube embed size not work

I REALLY love the theme very much.

Simple and Beatiful

But maybe 210110, the youtube embed size change not work. It turned to the orginal theme size. For me, it is too small to watch the video.
How can I fix it in this css theme

dark.css (forced theme) doesn't have --accent-color

https://linuz90.github.io/better-roam-research/dark.css doesn't have --accent-color declaration.

So, the color of the link was displayed in white.
There is --accent-color in light.css, but not in dark.css.
It seems to be a mistake.

Looks like the update yesterday broke system-level dark mode

I'm using MacOS in fixed dark mode. This morning I'm seeing all white.

Edit: I'm importing the CSS from the URL with minimal customizations:

H2’s don’t respect custom font choice

Using

body, div, textarea, .level2

as selectors, when I make a second level heading it reverts to default font (but not first level heading or anywhere else)

Block Embed bug??

Is this a bug when I make a [block embed], the background in the [block embed] is dark even if OS is in Light Mode?

Highlight text in darkmode

Hi, thanks for the theme.

I tried it in darkmode, somehow the highlight text looks like this. It is not like your preview picture. Is it a bug or did Roam change something?

Code blocks in dark mode are white

When using the code block feature in dark mode, the output appears with a white background which can feel a bit blinding and out of place in comparison to the rest of the themes aesthetic.

New visual glitches

The delete button text has low contrast

As you can see from this image, the color of the delete button is wrong, maybe this has also propagated to other parts of the application (needs further exploration).

Quick capture sync colors need fixing in dark mode

As stated

Color-Inverted Emoji in Dark Mode

Some icons look fine but human emojis are really creepy... Perhaps exclude emojis for dark mode?

Block selection with Dark Mode

The current color makes text unreadable.

Manual Light Mode Possible?

Hi, love this theme!

I was just wondering if it was possible to enable the light mode despite having my Mac set on dark mode?

Merge page modal in Dark mode is not visible

Merge modal popup in dark mode is not visible.

Text in Search inputs with Dark Mode

missing style in help panel view

css quick fix =>

#app > div > div.rm-help-popup.react-draggable > div.react-resizable > div.rm-help-results > div.rm-help__left-panel.sticky > div.rm-help-categories {
  color: black
}

Adjustable font size

I have some trouble reading off a screen so I prefer to increase font size of blocks. I don't really like using zoom because it also zooms in the chrome (such as the search bar), which leaves less space for the actual work.

I added this below the import line on the [[roam/css]] page:

:root {
  --font-size: 15pt;
}

Which mostly works, but there are a few issues:

1. The bullet points are now misaligned from the block they belong to
2. The sidebar text doesn't resize at all

It would be nice if there was a css variable I could tweak that would adjust the text size for blocks (both in the main area as well as the sidebar) while leaving everything else as normal.

If you're not interested in implementing this feel free to close this issue, I just thought it might be something other people want as well.

Broken shared page

If you share a page in public, this is how it looks.

Block references aren't shown properly in Dark mode

When in dark mode, the block references do not properly appear. (white text on a white background)

Block quote

You don't seem to support block quotes yet—the formatting looks a little odd. This would be nice :)

Nice theme though—thanks.

Filter popup with dark mode

CSS file is 404

Previously was using this theme from the URL https://linuz90.github.io/better-roam-research/src/css/main.css, which is now 404. Didn't realized it had moved – might want to setup a redirect to avoid breaking existing themes!

In the MacOS dark mode, the color of {{diagram}} is not correct

As the title says

---

Highlighting in dark mode

In the sample image, the highlighted text is readable. However, there seems to be an issue when I am highlighting. Using macOS and chrome. Any help would be great! Thanks.

Suggestion: Colored Tags and Kanban Blocks

I've started using colored tags. I've been doing this by having my own css code after the import line for your theme.

@import url("https://linuz90.github.io/better-roam-research/main.css");
/* Custom data tags From Leyendecker Theme*/
span.rm-page-ref[data-tag="iCIMS"] {
    background: #5fa7ad !important;
    color: white !important;
    padding: 3px 7px;
    border-radius: 5px;
    line-height: 2em;
    font-weight: 500;
}
...

I think a great feature of your theme would be the ability to change the color of a Kanban block to match the color of the tag. Maybe just outline it in that color? Something along those lines could make the Kanban board easier to search for a certain colored tag.
I realize this is a bit farfetched since your theme doesn't have its own implementation of colored blocks (I think), but I thought it would be really cool if you were able to get this working.

My Current Kanban set up:

Disappearing topbar and keyboard shortcuts issue

Better Roam Research now hides Roam's topbar and shows it only when the cursor hovers over it. This introduces an issue when using keyboard shortcuts for interacting with the items in the topbar. For example, cmd+u triggers full text search by focusing the search input, but it becomes unusable as the topbar remains hidden.

Any chance we can find a workaround for this or revert the change until there's a better solution? Thank you!

License

Hi, are you willing to create license for this project?

Queries in darkmode

The frame around queries is very bright in dark mode. Preferably it would be de-emphasized and colored darker like the blocks themselves.

margin-top for version-bullet

Suggested fix:

.version-bullet {
  margin-top: 8px !important;
}

Block reference usage count obscured while using dark mode

Expected behaviour (as seen in sidebar, default theme) - block referenced ones somewhere else in graph

Actual behaviour (as seen in sidebar, Better Roam Research) - block reference count missing

Block reference count only appears when hovered over

Kanban Board visual bug dark mode

The kanban board doesn't have a dark theme, which in my opinion isn't a huge deal. The bigger problem in my eyes is that the font at the top of each column on the board is white against a light grey background.

Theme not applied via @import as of this morning

copy + pasting the whole main.css file seems to fix the issue. Importing other themes also seem to be working. Didn't investigate further… Thanks!

block embed text in dark mode is unreadable

Issue:

Temporary fix:
added parallel css formatting to fix it:
roam/css -> theme -> /code block (choose css) -> this code inside:
.rm-embed-container { background-color: #21282C; }

Result:

Text not readable in expanded links / sidebar view

When a mention in the references or sidebar is expended for context, the selected paragraph color scheme (yellow highlight, white font) makes readability very tough

Before expansion

After expansion

Add .rm-alias-block to the :not selector for showing external link svg

Today, the theme will add a little link icon next to any external link but excludes any "link" that is actually just an alias to a page.

[this shows the link icon](https://google.com)
[this does not show the link icon]([[November 23rd, 2020]])

It would be nice if this applied to block references as well as page references.

[this currently shows a link icon but likely shouldn't](((44RcQMcMq)))

Here is the part of the codebase that likely needs changing:

better-roam-research/main.css

Line 168 in 1a63199

div.roam-article span > a:not(.rm-alias-page):after {

TODO checkbox is misaligned in kanban item

When you have a {{TODO}} in a kanban item, the check box is misaligned.

Text max-width conflicts with new feature to adjust page width

This line in the CSS causes issues when "large" or "full" width is chosen in the new page width selector. In my roam/css I just overrode the value from the stylesheet to unset but we may want to consider removing it from the CSS here. Happy to submit a PR if you agree.

better-roam-research/main.css

Line 509 in 575c32b

max-width: 660px !important;

Roam42 SmartBlock PopUp in Dark Mode is Hard to See

If you install Roam42, when inserting a SmartBlock the popup menu is very hard to see in Dark Mode.

.rm-alias is missing --accent-color in light.css

Tittle is pretty self explanatory, but I had to add this to my roam/css:

.rm-alias {
  color: var(--accent-color);
}

I'm using https://linuz90.github.io/better-roam-research/light.css. Not sure if this is true in the other versions.

Thanks for the beautiful theme!

Bottom Padding Issue

So I've found that the newest "framed" theme has a weird 10px bug at the bottom of the viewport:

I've tried removing the margin-top: 10px from .roam-center and adding padding-bottom: 10px to .roam-topbar but neither of those seems to properly solve the bug. Just wanted to flag this for you.

CSS does not work.

Missing dark theme styling

Missing dark theme styling for:

• Path-based block search (Ctrl-Shift-9)
• "Find or Create Page" results (top right)

Not sure if this is intentional?

Graph cannot display its full width

The CSS at (I believe it's this one): https://github.com/linuz90/better-roam-research/blob/master/main.scss#L58-L61

Prevents the graph from displaying completely:

Could seperate the --accent-color in light and dark theme?

Unreadable tags when filtering pages

Here's what it looks like for me:

However, filtering linked references is fine:

Calendar date picker is f^&*ed in dark mode on Win 10/Chrome

https://www.loom.com/share/a4df3df2243a4d8b98956a0bddfbff68

Text in Header blocks is un-styled

Description

It seems that H1, H2, and H3 blocks are not being styled in the latest versions of Roam and Better Roam Research. I didn't dive too deep, but I'm wondering if it's tied to some of the changes to roam/css they made on December 14th.

• Roam Version: 0.7.6-3f864e82
• BRR Version: main
• OS Tested: macOS Catalina and Big Sur
• Browsers Tested: Safari 14, Firefox 85, Chrome 87

Screenshots