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