Obsidian Roam Theme Remix

@nickmilo between @death.au’s Andy V1 and V2 and your code re borders and no titles for embedded file I lost track a bit.

I have Andy V2. Embedded notes are now shown with a border (which I prefer after all), and no note titles, which I also prefer. The only thing I don’t like is a scroll bar on a long embedded note. You mention to lizardmenfromspace that your code “shows the whole note instead of having a scroll bar.”

I cannot spot the no-scroll-bar bit, so could you repost that for me?

1 Like

@javierignacior in your vault create a file title “obsidian.css”, then paste this in that file. Also turn on “custom CSS” option in Settings --> Plugins.

.theme-light {
    --code-font-family: 'Hack';
    --link-color: #106ba3;
    --text-color: #202b33;
    --brackets-color: #a7b6c2;
    --side-dock-bg: #182026;
    --side-dock-bg-hover: #202b33;
    --side-dock-active: #202b33;
}

html, body, h5, h6 {
    line-height: 21px !important;
    text-size-adjust: 100% !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 15px !important;
}

h1, h2, h3, h4 {
    font-weight: 600;
}

/*Insert [[ ]] around links to make it look like roam*/
.internal-link::before{
	content: "[[";
	color: var(--brackets-color);
}

.internal-link::after{
	content: "]]";
	color: var(--brackets-color);
}

/*Side dock*/
.side-dock-title {
	font-size: 20px;
	color: var(--brackets-color);
}

.side-dock-plugin-panel.mod-file-explorer,
.side-dock-plugin-panel.mod-starred,
.side-dock-ribbon-tab.is-after-active,
.side-dock-ribbon-before.is-before-active,
.side-dock-ribbon-after.is-before-active {
   background-color: var(--side-dock-bg);
}

/*Make folder title uppercase*/
.nav-folder-title {
	text-transform: uppercase;
	font-size: 14px;
	font-weight: bold;
}

/* hover actions on sidebar*/
.side-dock-ribbon-tab:hover,
.side-dock-ribbon-tab-inner:hover,
.side-dock-ribbon-action:hover,
.side-dock-ribbon-action.is-active:hover,
.nav-action-button:hover,
.side-dock-collapse-btn:hover,
.side-dock-ribbon-tab.is-after-active:hover
{
  color: #ffffff;
  background-color: var(--side-dock-bg-hover);
}

.nav-file-title, .nav-folder.mod-root > .nav-folder-title, .side-dock-title, .nav-folder-title, .nav-file-title-content.is-being-renamed {
	color: #5c7080;
	filter: contrast(0.9);
}

/*Non hover actions*/
.nav-file.is-active > .nav-file-title,
.nav-file.is-active > .nav-folder-title,
.nav-file.is-active > .nav-folder-collapse-indicator,
.nav-folder.is-active > .nav-file-title,
.nav-folder.is-active > .nav-folder-title,
.nav-folder.is-active > .nav-folder-collapse-indicator,
.side-dock-ribbon-tab.is-active {
    background-color: var(--side-dock-active);
    color: #ffffff;
}

/* color and background of titles hovered over in side bars */
body:not(.is-grabbing) .nav-file-title:hover,
body:not(.is-grabbing) .nav-folder-title:hover,
body:not(.is-grabbing) .nav-file-title:hover .nav-folder-collapse-indicator,
body:not(.is-grabbing) .nav-folder-title:hover .nav-folder-collapse-indicator
{
	background-color: var(--side-dock-bg-hover);
    color: #ffffff;
}

/*side dock end*/


/* Backlinks */

/*Make backlink panel white*/
.side-dock-plugin-panel.mod-backlinks {
	background-color: #ffffff;
}

.search-result-file-title {
	font-size: 16px;
	color: #337ab7
}

.search-result-file-title:hover {
	background-color: #ffffff;
}

.search-result-file-match, .search-result-file-match:hover{
	background-color: #f5f8fa;
}

.obsidian-search-match-highlight {
    background-color: #c2dbec;
}

.search-result-file-matched-text {
	background-color: #dfe9f0;
}

/*Backlinks end*/

.view-header-title {
    font-size: 28px;
    font-weight: 500;
}

.view-header-title-container {
    height: 44px;
}

.markdown-source-view, .markdown-preview-view{
    color: #202b33
}

.cm-s-obsidian pre.HyperMD-codeblock  {
	font-family: var(--code-font-family)
}

/* Code in markdown preview */
.markdown-preview-view code {
    font-size: 1em;
    font-family: var(--code-font-family)
}

/*change the color of text for links in editor */
.cm-s-obsidian span.cm-link, .cm-s-obsidian span.cm-hmd-internal-link {
    color:  #106ba3 !important;
    text-decoration: none;
}

/* when you hover over an internal link it gets slightly darker */
.cm-s-obsidian span.cm-link:hover, .cm-s-obsidian span.cm-hmd-internal-link:hover {
 color:  #337ab7;
}

a {
  color: var(--link-color) !important;
}

.markdown-preview-view .internal-link {
  text-decoration: none;
}

.markdown-preview-view .internal-link:hover {
  text-decoration: underline;
}

/* Highlight colors */
.markdown-preview-view mark {
    background-color: rgba(0, 231, 255, 0.29);
}

.cm-s-obsidian span.cm-formatting-highlight, .cm-s-obsidian span.cm-highlight {
    background-color: rgba(0, 231, 255, 0.29);
}

/* References section */
.search-result-file-matches {
	color: #202b33;
	font-size: 14px;
}

/*Border on header*/
.workspace-leaf.mod-active .view-header {
  border-right: 2px solid #106BA3 !important;
	border-bottom-style: None
}


ul {
    list-style-type: disc;
}

ul li {
    margin: 0 0 5px 0;
}

/*-------------- START OF MY CODE -------------------------*/

/* Changed text highlight to yellow */

.markdown-preview-view mark, .cm-s-obsidian span.cm-formatting-highlight, .cm-s-obsidian span.cm-highlight {
    background-color: #FEEBc8 !important;
}

/* Changed side bars to dark grey when collapsed*/
.app-container.is-left-sidedock-collapsed .side-dock.mod-left .side-dock-ribbon, .app-container.is-right-sidedock-collapsed .side-dock.mod-right .side-dock-ribbon {
    background-color: #182026;
}

.app-container.is-left-sidedock-collapsed .side-dock-ribbon-tab, .app-container.is-left-sidedock-collapsed .side-dock-ribbon-action  {
    color: white !important;
}

.side-dock-ribbon-tab, .side-dock-ribbon-before, .side-dock-ribbon-after, .side-dock-ribbon-tab-inner {
  transition: unset !important;
}

/* When you hover over a side bar icon while its collapsed*/
.app-container.is-left-sidedock-collapsed .side-dock-ribbon-tab-inner:hover, .app-container.is-left-sidedock-collapsed .side-dock-ribbon-action:hover {
  background-color: #182026 !important;
  color: #337AB7 !important;
}

/* ------------------- WHEN SIDEBAR IS OPEN ------------------------------------*/

.side-dock-ribbon-tab, .side-dock-ribbon-action {
color: #182026 !important;
}

.side-dock-ribbon-tab.is-active {
  color: white !important;
  background-color: #182026;
}

.side-dock-ribbon-tab-inner:hover, .side-dock-ribbon-action:hover {
  color: #337AB7 !important;
  background-color: #E3E5E8;
}

.side-dock-ribbon-tab.is-active .side-dock-ribbon-tab-inner:hover {
  color: #337AB7 !important;
  background-color: #182026;
}

/*--------- Getting rid of Transition Effects -------------*/
.side-dock-ribbon {
  transition: unset !important;
}

/*-------- Changing Color of Search Bar ------------------*/

.side-dock-panels-container {
  background-color: #182026 !important;
}

/*------- Changing color of Icons --------------*/

.app-container.is-right-sidedock-collapsed .side-dock.mod-right .side-dock-ribbon-tab-inner {
  color: white;
}

.app-container.is-right-sidedock-collapsed .side-dock.mod-right .side-dock-ribbon-tab-inner:hover {
  background-color: #182026 !important;
}

/* ----------- Changing Color of Backlinks Pane ---------*/

.side-dock-plugin-panel.mod-backlinks, .side-dock-title {
  background-color: #182026 !important;
  color: white;
  filter: unset !important;
}

/* when you hover over a backlink*/
.search-result:hover, .search-result-file-match:hover, .search-result-file-title:hover  {
  background-color: #182026;

}

.search-result-file-matched-text {
    background-color: #182026;
    color: #337AB7 !important;
}

/* How the results from back pane appear */

.search-result-file-match {
  background-color: #182026 !important;
  color: white !important;
}

/* when you hover over a backlink title */

.search-result:hover, .search-result-file-title:hover {
  background-color: #182026 !important;
  color: #337AB7 !important;
}
/* border around search results when you hover over them */
.search-result:hover {
  border: 1px dashed #337AB7;
}

/*insert a backlink button */

.search-result-file-match-replace-button {
    color: white;
    background-color: #337ab7;
}

.search-result-file-match-replace-button:hover {
    color: #A32121;
    background-color: white;
}

/*-------- TAG PANE -----------------*/

.tag-pane-tag:hover {
  background-color: #182026 !important;
  color: #337AB7 !important;
}

/*---------  PREVIEW WINDOW CHANGES ------------*/

/* changing the color of tags*/
a.tag {
  color: #003557 !important;
}

/* when you hover over a link make it bold */
a:hover {
  font-weight: 600 !important;
}

/* when you HOVER over a TAG change colors*/
a.tag:hover {
  color: #A32121 !important;
}

/* Removing the brackets from links in preview mode */

.internal-link::before, .internal-link::after  {
  content: none !important;
}

/* Adjusting the Code Look */

.markdown-preview-view code {

color: #A32121 !important;
background-color: white !important;
font-size: 16px !important;
bottom: -0.1px !important;

}

/* Adjusting Popovers */

.popover hr, .popover .footnotes {
  display: none;
}
.popover {
  font-size: 16px;
  box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.25);
}
.popover mark {
  background-color: #FEEBC8;
}

/*---------------  EMBEDS  ----------------------*/

/* Naked Embeds */
.markdown-embed-title {
  display:none !important;
}
.markdown-preview-view .markdown-embed {
  border:none; padding:0; margin:0;
}
.markdown-preview-view .markdown-embed-content {
  max-height: unset;
}
.markdown-preview-view .markdown-embed-content>:first-child { margin-top: 0;
 }
.markdown-preview-view .markdown-embed-content>:last-child { margin-bottom: 0;
 }

/* changing color of link to embeds */
.markdown-embed-link {
color: rgb(16, 107, 163) !important;
right: -8px !important;
}

/* changing color of link to embeds on hover */
.markdown-embed-link:hover {
color: #A32121 !important;
}

.markdown-embed .footnotes-list {
  display: none !important;
}

/* -------- NOTE HEADER BAR ---------*/

/* default color of icons in note header*/
.view-action {
color: #182026 !important;
}
/* hover color of icons in note header*/
.view-action:hover {
  color: #337AB7 !important;
}

/* ------------------- GRAPH VIEW --------------*/

/* changes color of inner circles in graph view*/
.graph-view.color-fill {
  color: #182026;
}
/*changes border color of circles*/
.graph-view.color-circle {
  color: #003557;
}
.graph-view.color-line {
  color: var(--background-modifier-border);
}
.graph-view.color-text {
  color: var(--text-normal);
}
.graph-view.color-fill-highlight {
  color: #337AB7;
}
.graph-view.color-line-highlight {
  color: #337AB7;
}

/* ---------------------------------------- Andy Matuschak mode! V2! --------------------------------------------------- */

.workspace-split.mod-vertical { overflow-x:auto; }
.workspace-leaf, .workspace-split > .workspace-split { min-width: 650px; min-height: 500px; }
.workspace-split.mod-horizontal { overflow-y: auto; }

.workspace-split.mod-vertical > * {
    flex-direction: row;
    display: flex;
    box-shadow: 0px 0px 20px 20px rgba(0,0,0,0.25);
}

.workspace-leaf {
    position: sticky;
    --stick-left: 40px;
    left:0;
}

.workspace-leaf:nth-child(10n-8) { left: calc(var(--stick-left) * 0); }
.workspace-leaf:nth-child(10n-7) { left: calc(var(--stick-left) * 1); }
.workspace-leaf:nth-child(10n-6) { left: calc(var(--stick-left) * 2); }
.workspace-leaf:nth-child(10n-5) { left: calc(var(--stick-left) * 3); }
.workspace-leaf:nth-child(10n-4) { left: calc(var(--stick-left) * 4); }
.workspace-leaf:nth-child(10n-3) { left: calc(var(--stick-left) * 5); }
.workspace-leaf:nth-child(10n-2) { left: calc(var(--stick-left) * 6); }
.workspace-leaf:nth-child(10n-1) { left: calc(var(--stick-left) * 7); }
.workspace-leaf:nth-child(10n+0) { left: calc(var(--stick-left) * 8); }
.workspace-leaf:nth-child(10n+1) { left: calc(var(--stick-left) * 9); }

.workspace-leaf-content {
    display: flex;
    padding-right: 0;
}

.view-header {
    writing-mode: vertical-lr;
    border-right: 1px solid var(--background-secondary-alt);
    border-left: 2px solid var(--background-secondary-alt);
    border-top: none;
    border-bottom: none;
    height: auto;
}

.view-header-title-container {
    width: 40px;
    height: unset;
    padding-left: unset;
    padding-top: 20px;
}

.workspace-leaf.mod-active .view-header {
    border-right: 2px solid var(--interactive-accent);
    border-bottom: none;
}

.view-actions {
    padding: 10px 5px;
}

.view-header-title-container:after {
    width: 100%;
    height: 30px;
    top:unset;
    bottom: 0;
    background: linear-gradient(to bottom, transparent, var(--background-secondary));
}

.workspace-leaf.mod-active .view-header-title-container:after {
    background: linear-gradient(to bottom, transparent, var(--background-primary-alt));
}

.view-action {
    margin: 8px 0;
    top: 0;
}

.view-content {
    height: 100%;
}

/*Note Headers that are active */
.workspace-leaf.mod-active .view-header-title {
    font-size: 22px;
    color: #A32121 !important;
}

/* Note Headers that aren't active */
.view-header-title {
  font-size: 22px;
  color: rgba(35,43,61);
}

.markdown-embed h3, .markdown-embed h2, .markdown-embed h1 {
  display:none !important;
}

.markdown-embed hr {
  display: none !important;
}

/* Footnote Adjust */

.footnote-ref {
  position: relative;
  bottom: -5px;
  line-height: 12px !important;
}

Thanks!
Will be trying it!!

I follows your instructions but it didn’t change.

@javierignacior are you able to make other changes and see them happen in your file. For example do this test

body {
color: red !important;
}

Add this to your CSS file and save it. Does the text in your notes turn red?

Anyone using the same system/workflow as I am, here are the code adjustments for update

.markdown-preview-view .file-embed {
display: none !important;
}

.popover .file-embed {
display: none !important;
}

When will this included into the community theme?

@Blahab When I get a dark theme to go along with it done. Slow because I am bad at designing a dark theme because I am a light theme person.

1 Like

Join forces with @nickmilo — he is dark theme person and both of your themes have similar features :slight_smile:

2 Likes

That what I am thinking of doing, but I am not sure if it is possible

A screenshot please, to see how it looks.

@Blahab @rsdimitrov @mcx you can now find full theme at Theme: Lizardmen Zettelkasten (Light/Dark), should be added to the community themes soon.

2 Likes

Amazing Theme. Tried it out.
I have a few queries

  1. If you could show me how I could set the sidepanes to autohide, please.
  2. How can I change the file name text to be displayed bottom to top?

@krishnanunnihm

.app-container.is-right-sidedock-collapsed .side-dock.mod-right:not(:hover) {
  width: 0px !important;
}

.app-container.is-left-sidedock-collapsed .side-dock.mod-left:not(:hover) {
 width: 0px !important;
 padding-right: 0px !important;
} 
  1. I’m not sure, try asking in CSS forum or ask @death.au who created the script for andy mode
1 Like

I LOVE this theme. thanks for the hard work putting it together!

I found some code you’ve posted in other threads to show relationship lines but I can’t get it to work in this theme - any ideas?

There is a plugin that handles this now GitHub - mgmeyers/obsidian-indentation-guides check it out.

2 Likes

Worked like a charm - thank you!

Doesn’t show lines in Live Preview though? At least not in minimal theme. Haven’t found anything that does that consistently yet.

You might need to update Minimal. I use that theme and I’m able to use the indentation-guides plugin on LP

Updating and restarting seems to have done the trick. Thanks for your help.