azlen / roam-themes

Azlen's Roam Themes

• Side-by-side page view (shift-click to open on side)
• Minimal aesthetic
• Overlay pages on graph view
• Snazzy search bar
• Custom styles for most components

UPDATE: Separated duplicate code into core.css

To use, just copy the theme you'd like into [[roam/css]], there is a CSS import to collect core.css from this repository which will automatically update to reflect future fixes and updates to the core theme

Or use a single line to import the theme you'd like: @import url('https://azlen.github.io/roam-themes/zenith.css');

👀 Video on how to apply themes to Roam with [[roam/css]]

❤ Donation link if you enjoy these themes and want to support future projects :)

Zenith

@import url('https://azlen.github.io/roam-themes/zenith.css');

Cosmonaut

@import url('https://azlen.github.io/roam-themes/cosmonaut.css');

Yggdrasil

@import url('https://azlen.github.io/roam-themes/yggdrasil.css');

roam-themes's Issues

Yggdrasil Theme: sidebar icons are not vertically aligned.

It's very strange that this problem can only be found in theme Yggdrasil, but not in other two.

For now, I notice that font-size has an impact on this issue, but I can't figure out how did this happen.

Top bar jumbled for me on Zenith

Been trying to figure this out on my own for about a year now.

`overflow-y: auto` lead to sidebar content scrolls unexpectedly.

When holding Shift and scroll your mouse wheel on the sidebar content, the content will move unexpectedly.

Remove the CSS overflow-y: auto !important; will fix this, but not sure if it's intended.

iOS keyboard bar not visible

I've read on Twitter it was hard to get the shortcuts toolbar above the keyboard (for indenting etc) to reliably show on iOS. However now, it works with the default theme, but sadly not using this theme.

Besides, thanks for the awesome work!

Error with collapsing sidebar.

The error is reported in twitter https://twitter.com/ShakeelHashim/status/1269051856526942210 , but the solution provided does not work (for me).

#roam-right-sidebar-content > * {
    min-width: 58.5px;
}

It only works temporarily, which has the same effect of zooming in and out (Crtl +/-). But when pages are collapsed again the problem persists.

Cosmonaut theme: white text on white background on contextual pop-up menu

Contextual pop-up menu (the general … menu) shows white text on white background.

It is probably due to the default CSS defining .bp3-menu with #fff background.

Zenith broken on new update

Hi, the core.css seems to have several misalignments now - the sidebar isn't working too well.

New blocks in right side bar stacks to the far right instead of to the left

When opening a new page/block in the side bar, it seems the new ones will stack to the far right of all stacks now, and I have to scroll to the rightest to see the new block in the side bar (in the screenshot I shift-clicked on pages "test A/B/C" successively). I think this is not how it works before, the new panel in the side bar should be opened in the leftest of all stacks so the user can always viewing the newest one.

White code block on dark Cosmonaut theme.

Hi, first thank a lot for your work. It is awesome and the Zenith theme works flawlessly.

But when trying out the Cosmonaut theme, I found that the Codeblock remain white in the background and some character cannot be seen.

Just want to let you know if you have time to fix in the future. For now I'm sticking with Zenith.

Again thank you very much.

Zenith theme: residual ghost drop shadow beneath search bar

There is some residual ghost drop shadow under the search bar when it is opened with Cmd + U.
This happens especially when you scroll down a bit of the page and call the search bar again.

Not sure if it comes from the CSS or if it is because of Chrome’s rendering performance.

Pages list strangely cropped... is this a theme issue?

Hi there @azlen

I have been using Zenith (the best!) for a while and only recently had this problem. What may be causing it?

I also have this problem — black on near black for queries (also posted in a separate thread):

Any thoughts?
Thanks

Overflow Roam Configuration

Would love it if the sidebar components could "wrap" so if two components don't have a significant height in the y direction they stack on top of eachother as opposed to just adding a new column in the x direction. When I've used Daniel van der Merwe's Andy Matuschak's method adopted for Maggie Appleton's theme it appears to work:

Here is the css that I think enables this, though I'm not good enough with CSS yet to translate it to your core theme unfortunately :(

.roam-center {
  flex: 1 1 100% !important;
  flex-basis: 10% !important;
}

#right-sidebar {
  background-color: white !important;
}

#right-sidebar #roam-right-sidebar-content {
  overflow: scroll !important;
  white-space: normal;
  display: flex;
  align-content: flex-start;
  /* Below is for masonry layout */
  flex-flow: column wrap;
}

#right-sidebar #roam-right-sidebar-content > div {
  position: relative;
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  padding: 10px;
  border: 0.5px solid #e4e9ec !important;
  border-radius: 5px;
  background-color: white !important;
  align-self: flex-start;
  margin-right: 0px !important;
  /* Below is for masonry layout */
  margin-bottom: 16px;
  min-height: fit-content;
  width: 600px;
}

#right-sidebar #roam-right-sidebar-content > div > div:nth-child(2) {
  resize: vertical;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 780px;
}

.roam-log-container .roam-log-page {
  padding: 10px;
  border: 1px solid white;
  border-radius: 5px;
  background-color: white !important;
}

/* Scrollbar improvements */
div::-webkit-scrollbar {
    width: 3px !important;
    height: 3px !important;
}

div::-webkit-scrollbar-track {
    background-color: #ffffff !important;
}

div::-webkit-scrollbar-thumb {
    background-color: #d1dbe2 !important;
}

New block reference menu is too transparent in Cosmonaut.css

Cosmonaut Theme: too low in contrast to see references number.

All pages cropped / positioned incorrectly

This has happened very recently. Sidebar pages are cropped in such a way that they are unusable, main page has been shifted, and the ‘all pages’ page is cropped too. Appreciate all the work you have put into this theme - thank you

.

New Roam Update breaks Scrolling on Sidebar pages

Looks like with the new Roam update, all side bar pages scroll together, instead of scrolling separately :( - not sure yet if this can be fixed using our css, or to be raised with Roam.

Will investigate when it starts to really irritate me 😅

Feature request

Is it possible to change css so that the browser horizontal scroll bar appears?

Feature Request (Zenith): add linked references under open sidebar pages.

Is it possible to have under the "sidebar pages" their linked references list?

Today, I usually use sidebar to check for linked references of a page, and the implementation of the "main page opened" makes me want to have a {{mentions: [[sidebar page]]}} visually under every sidebar page I open?

Thanks,
Eran
[email protected]

Zenith query header text is black on dark grey

Hi
Using queries with the Zenith theme in place produces the query line in black font inside a very dark grey block. This is virtually impossible to read!
Screenshot attached.

Thanks.

Cosmonaut feature request let the primary column have full width when there is no other column

Although the current setting is perfect for linking/viewing notes, it is a bit awkward if the split panel/column is not used. For example, if I am reading a long article in Roam and I don't need a second column I want to have the primary column to have the full width.

Is is possible to add a condition check (e.g. if no split column then set the primary column to be full width)? or maybe add a button?

I have some experience with css and js and I am willing to help!

Right side bar scrolling does not behave like main page

I am using vim-mode by roam-toolkit, although navigation on the main page works fine, it does not work in the right side bar. For example, when using "j" to move down, once it hits the bottom block, the page will not scroll. In other word, I am trying to find why the main page scrolling is different from the right side bar's.

I've been looking at this part in the css, but not able to find the reason.

/* spacing and scrolling */
#roam-right-sidebar-content > * {
    margin: 0px 0px 0 20px !important;
    overflow-x: hidden;
    /*overflow-y: auto !important;*/
    max-height: 100vh;
    padding: 50px 0px 100px 0px;
    
    /* pesky bottom border/outline in chrome won't go away! */
    /* this does not fix it */
    border: none !important;
    outline: none !important;
}

#roam-right-sidebar-content {
    visibility: visible;
    display: flex;
    flex-direction: var(--page-order);
    align-items: flex-start; /* allow pages to have their own height */
    justify-content: flex-end;
}

Zenith issue: When applying Right-to-left theme, right margin is too-big

Hi,

I love Zenith, and use it with another css theme, which allows right-to-left typing (as most of my writing is in Hebrew).

When I do so, there is a big margin to the right of the blocks (see attached image) and it's not aligned with the page header.
Is there any parameters I can play with to fix that?

Thanks,
Eran
[email protected]

When filtering linked references filter menu appears 'under' left sidebar

When trying to filter from the Linked References list the pop-up menu pops under the left sidebar. Please see the attached screenshot.