Obsidian Roam Theme Remix

Share & showcase
1

6/9/2020 Update - The theme in full can now be found at Theme: Lizardmen Zettelkasten (Light/Dark)

A Remix of Obsidian Roam Theme, taking neo_4nderson and altering some elements while adding some new ones.

Screenshot 2020-05-26 10.40.35
Screenshot 2020-05-26 10.40.351920×1080 293 KB

Additional 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;
}

Backlinks

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 Changes

.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 {
  display: none;
}
.popover {
  font-size: 16px;
  box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.25);
}
.popover mark {
  background-color: #FEEBC8;
}

Embeds

from @death.au

Naked Embeds

    .markdown-embed-title { display:none; }
    .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: 2px !important;
}

Changing color of link to embeds on hover

.markdown-embed-link:hover {
color: #A32121 !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 lines

.graph-view.color-line {
  color: var(--background-modifier-border);
}

graph view text

.graph-view.color-text {
  color: var(--text-normal);
}

when you hover over in graph view

.graph-view.color-fill-highlight {
  color: #337AB7;
}
.graph-view.color-line-highlight {
  color: #337AB7;
}

Andy Matuschak mode! V2!

created by @death.au

.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);
}

Adjustments that I’ve forgotten what they do exactly

from @nickmilo

.markdown-embed-title { display:none; }
.markdown-preview-view .markdown-embed { border:1px solid var(--blockquote-border); 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; }
.markdown-preview-view .markdown-embed-content>:first-child { margin-top: 0; }
.markdown-preview-view .markdown-embed-content>:last-child { margin-bottom: 0; }
4 Likes
2

All the Added Code Together

/* 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 {
  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; }
.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: 2px !important;
}

/* changing color of link to embeds on hover */
.markdown-embed-link:hover {
color: #A32121 !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-title { display:none; }
.markdown-preview-view .markdown-embed { border:1px solid var(--blockquote-border); 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; }
.markdown-preview-view .markdown-embed-content>:first-child { margin-top: 0; }
.markdown-preview-view .markdown-embed-content>:last-child { margin-bottom: 0; }
3

You can probably remove my code, it’s just to re-add a border to a non-naked embed. It might have some minor nuanced differences, but it’s probably just noise, please feel free to remove it, you won’t hurt my feelings!

4

I might actually like that. I thought it was adjustments for for the andy mode not embed.

What I was trying to do earlier for embeds was just have a top border and bottom border for the embed. But when I added border-top and border-bottom it looked really funny. My ideas was you can have a chain of embeds and each embed is obvious without needing the whole border. I ended up just manually adding a line break. Not sure how different that was from what you were going for?

Do you have a screenshot of the effect from what your code adjusts? (curious)

5

That’s right, it was to go along with Andy Mode if you didn’t want naked embeds. Here’s an example:

Screen Shot 2020-05-26 at 11.26.45 AM
Screen Shot 2020-05-26 at 11.26.45 AM1101×1023 132 KB

6

I see now. It adds the border back in. The only thing I’m confused about is what embeds have to do with Andy Mode? I thought Andy mode was just having vertical titles that are collapsible? (Don’t understand how embeds tie into it)

7

I figured out it… With V1 death_au also wrote code to delete the note title in the transclusion, but I don’t think that was in his v2. So my code hides the note title while still having a border. Oh, and I guess it shows the whole note instead of having a scroll bar. Here’s really how it’s supposed to look:

Screen Shot 2020-05-26 at 12.00.30 PM
Screen Shot 2020-05-26 at 12.00.30 PM1206×1024 141 KB

8

This is awesome. Would it be possible to have a night mode aswell ? to have a complete theme

9

@Blahab it took me awhile so I need a CSS break, but I’ll eventually create a night theme as well. I will @ you when it is done.

@greasemonkey, you can either copy the individual sections you are interested in and paste them at the bottom of your obsidian.css file. Or you can can copy all the code and paste it at the bottom of your CSS file.

1 Like
10

Sorry, I’m tremendously ignorant when it comes to this type of work.
How do I install your design?

Thanks!

11

@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
12

@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;
}
13

Thanks!
Will be trying it!!

14

I follows your instructions but it didn’t change.

image
image830×596 36.9 KB

15

@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?

16

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;
}
17

When will this included into the community theme?

18

@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
19

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

2 Likes
20

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