One of the fun things about Roam Research is that you can very easily style the appearance of your database using CSS.
I've been fond of the gruvbox color-scheme for a while, so I've built one for Roam. I'm using Azlen Elza's incredible Zenith theme as a basis for it - the result looks like this:
The above graphic also shows you how to install the theme and the adjustments I've made.
First, what you need is a page called [[roam/css]]. On that page, you'll create a code block with styling css
to import the Zenith theme, and then a code block to add the adjustments. Here's what you copy paste into the first code block:
@import url('https://azlen.github.io/roam-themes/zenith.css');
Here are the adjustments for getting the Gruvbox color theme. You can either use the Light or Dark theme. First, the code for the Light theme:
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
:root {
--header-font: "Fira Sans", "Inter", sans-serif;
--body-font: "Fira Sans", "Inter", sans-serif;
--bg-color: #ebdbb2;
--page-color: #fbf1c7;
--text-color: #3c3836;
--icon-color: #665c54; /* #5c7080 */
--bullet-color: rgba(214,93,14, 0.6);
--page-shadow: 0px 8px 14px rgba(0, 0, 0, 0.05);
--color-primary: 152,151,26;
--color-primary-contrast: #3c3836;
--color-secondary: 204,36,29;
/*--color-secondary: 255, 165, 0;*/
--color-secondary-contrast: #3c3836;
}
.rm-embed-container {
background-color: rgba(152,151,26, 0.3) !important;
}
And here is the code for the Gruvbox Dark Theme for Roam:
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
:root {
--header-font: "Fira Sans", "Inter", sans-serif;
--body-font: "Fira Sans", "Inter", sans-serif;
--bg-color: #282828;
--page-color: #3c3836;
--text-color: #fbf1c7;
--icon-color: #a89984; /* #5c7080 */
--bullet-color: rgba(131,165,152, 0.6);
--page-shadow: 0px 8px 14px rgba(0, 0, 0, 0.05);
--color-primary: 184,187,38; /* #ebdbb2*/
--color-primary-contrast: #fbf1c7;
--color-secondary: 254,128,25;
/*--color-secondary: 255, 165, 0;*/
--color-secondary-contrast: #8ec07c;
}
.rm-embed-container {
background-color: rgba(102,92,84, 0.5);
}