I managed to change the font using the custom css file, but I’d like to use a different font for the title and another font for the actual notes. is there a way to do this ?
I’d also like to change the color of the title at the top if possible.
any help would be greatly appreciated !
just like it,
/* text */
.block-content {
font:
color:
}
/* title */
.cp__sidebar-main-content h1.title {
font:
color
}
Wow, thank you so much for the speedy reply, I got it to work exactly how I want it.
Hi @semilla,
could you share the CSS code you exactly used? I tried it with the mentioned code but unfortunately it doesn´t seem to work. It´s basically not doing anything 
Hi @analoguevibez, while waiting for others to share the code to adjust the headings, you can try out my CSS. I’m a noob and I gathered the CSS code from many places and put them together into a mess that work for me (only in dark mode). Mine also highlight the header to make them more distinguishable instead of changing the color of the headers.
To try it, just copy the code below into your css file, and turn on dark mode to see how it’s like. If you want to change some aspect of a theme, use Ctrl+Shift+I to open the developer console, choose this
Another advice if you’re a noob like me is to download https://code.visualstudio.com/ (free and open source) and use it to edit your CSS file instead of using the Notepad on Windows.
If you want to only tweak the title, search for “h1”, “h2”, “h3”, etc. If you want to tweak it further you’ll have to do it yourself (because I’m likely just as blind as you are lol). You can also get help from the custom theme chanel on Discord Discord
Another reference point is the github repo of the themes available on the Marketplace and look at there CSS file.
.dark-theme,
html[data-theme=dark] {
--ls-primary-background-color: rgb(0, 0, 0);
--ls-secondary-background-color: rgb(18, 18, 18);
--ls-tertiary-background-color: rgb(25, 25, 25);
--ls-quaternary-background-color: rgb(33, 33, 33);
--ls-block-properties-background-color: #111415c2;
--ls-page-properties-background-color: #111415c2;
--ls-search-background-color: #000000;
--ls-border-color: #323232;
--ls-menu-hover-color: #1c3444;
--ls-primary-text-color: rgb(205,205,205);
--ls-secondary-text-color: #c7c7c7;
--ls-title-text-color: #72d5fc;
--ls-link-text-color: rgb(9, 176, 0);
--ls-link-text-hover-color: var(--orange);
--ls-link-ref-text-color: rgb(114, 213, 252);
--ls-link-ref-text-hover-color: var(--ls-link-text-hover-color);
--ls-tag-text-color: var(--ls-link-text-color);
--ls-tag-text-hover-color: var(--ls-link-text-hover-color);
--ls-block-bullet-border-color: #57a3dad9;
--ls-block-bullet-color: #8abbbb;
--ls-block-highlight-color: #202e3a;
--ls-page-checkbox-color: #8abbbb;
--ls-page-checkbox-border-color: #8abbbb;
--ls-page-blockquote-color: var(--ls-primary-text-color);
--ls-page-blockquote-bg-color: var(--ls-secondary-background-color);
--ls-page-blockquote-border-color: var(--ls-secondary-text-color);
--ls-page-inline-code-color: rgb(255,0,255);
--ls-page-inline-code-bg-color: #403b21;
--ls-page-title-size: 35px;
--ls-scrollbar-color: #000;
--ls-scrollbar-thumb-hover-color: #1d5062;
--ls-scrollbar-thumb-color: var(--ls-secondary-background-color);
--ls-head-text-color: var(--ls-link-text-color);
/* Uncomment these to override default variables and change color of header icons */
/* --ls-icon-color: #F56A02; */
/* --ls-search-icon-color: #F56A02; */
--ls-a-chosen-bg: #172a36;
--ls-right-sidebar-code-bg-color: #04303c;
--ls-active-primary-color: #37638a;
--ls-active-secondary-color: #5fa2df;
--tagpills-bg: #202a35;
--tagpills-text: #5e99c9;
--tagpills-border: #254f63;
--tagpills-border-radius: 4px;
--accent-bgcolor: #16364a;
--marker-switch-bgcolor: #39180deb;
--marker-switch-color: #ee4325;
--marker-switch-opa: 0.7;
--datepicker-active-bgcolor: #650707;
--datepicker-active-bordercolor: #fff;
--datepicker-active-bordersize: 0px;
--datepicker-active-color: white;
/* --datepicker-available-hovercolor: #F56A02; */
--datepicker-available-hoverbgcolor: #192731;
--text-accent: #789eb0;
--text-accent-light: #789eb038;
--highlight-light: #0b0a0bf0;
--ls-block-ref-link-text-color: #74ced8;
--admo-text-important: #fa4320;
--admo-bg-important: #171717;
--background: #282a36;
--light-background: #343746;
--lighter-background: #424450;
--dark-background: #21222c;
--darker-background: #191a21;
--foreground: #fff;
--current-line: #44475a;
--comment: #777;
--white: #fff;
--red: #f55;
--orange: #F56A02;
--yellow: #e9ad5f;
--yellow-light: #e9ad5f3b;
--green: #8fd876;
--purple: #519fea;
/* --purple-hover: #bf93f988; */
--cyan: #71c0e4;
--cyan-hover: #8be9fd88;
--gray-light: #d4d4d4;
/* --pink-hover: #ff79c688; */
--gray: #a9a9a9;
--logo-fill: #F56A02;
--path: #FFF;
--selection: #8be9fd88;
--selection-code: var(--dark-background);
--code-current-line: var(--dark-background);
--text-code: var(--ls-primary-text-color);
--color-level-1: var(--ls-secondary-background-color);
--color-level-2: var(--ls-tertiary-background-color);
--color-level-3: var(--ls-quaternary-background-color);
--color-level-4: rgb(42, 42, 42);
--color-level-5: var(--ls-quaternary-background-color);
--color-level-6: var(--ls-tertiary-background-color);
--bold: #ebebeb;
--italic: #ebebeb;
--ls-table-tr-even-background-color: rgb(23 23 23);
}
a.page-ref {
color: rgb(114, 213, 252);
}
a.page-title {
color: rgb(114, 213, 252);
}
/* === Headings === */
/* === Headings === đưa mọi heading về background xám
h1,
h2,
h3,
h4,
h5,
h6 {
background-color: rgb(41, 41, 41);
padding-left: .5em;
border-radius: 3px;
border: none !important;
reserved color :rgba(238, 255, 0, 0.3)
}
*/
h1 {
background-color: rgb(41, 41, 41);
padding-left: .5em;
border-radius: 3px;
border: none !important;
}
h2 {
background-color: rgba(255, 0, 0, 0.3);
padding-left: .5em;
border-radius: 3px;
border: none !important;
}
h3 {
background-color: rgba(64, 255, 0, 0.3);
padding-left: .5em;
border-radius: 3px;
border: none !important;
}
h4 {
background-color: rgba(106, 0, 255, 0.55);
padding-left: .5em;
border-radius: 3px;
border: none !important;
}
h5 {
background-color: rgba(0, 221, 255, 0.3);
padding-left: .5em;
border-radius: 3px;
border: none !important;
}
h6 {
background-color: rgba(247, 0, 255, 0.3);
padding-left: .5em;
border-radius: 3px;
border: none !important;
}
h1 {
margin: 0em 0 0em 0 !important;
color: var(--ls-link-text-color);
}
h2 {
margin: 0em 0 0em 0 !important;
color: var(--ls-link-text-color);
}
h3 {
margin: 0em 0 0em 0 !important;
color: var(--ls-link-text-color);
}
h4 {
margin: 0em 0 0em 0 !important;
color: var(--ls-link-text-color);
}
h5 {
margin: 0em 0 0em 0 !important;
color: var(--ls-link-text-color);
}
h6 {
margin: 0em 0 0em 0 !important;
color: var(--ls-link-text-color);
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: rgb(190,190,190);
}
h1.title {
color: rgb(114, 213, 252);
font-size: var(--ls-page-title-size);
line-height: 3rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
width: 95%;
}
/* Inspired by https://github.com/pengx17/logseq-dev-theme */
.ls-block h1::after {
content: "h1";
background-color: var(--ls-secondary-background-color);
border-radius: 3px;
padding: 4px;
width: 2em;
text-align: center;
font-size: 14px;
color: var(--ls-primary-text-color);
font-weight: normal;
vertical-align: middle;
float: right;
display: table-cell;
/* margin: auto;
position: relative;
right: 0; */
/* Push to right */
position: absolute;
right: 20px;
top: 0px;
}
.ls-block h2::after {
content: "h2";
background-color: var(--ls-secondary-background-color);
border-radius: 3px;
padding: 4px;
width: 2em;
text-align: center;
font-size: 14px;
color: var(--ls-primary-text-color);
font-weight: normal;
vertical-align: middle;
float: right;
display: table-cell;
/* Push to right */
position: absolute;
right: 20px;
top: 0px;
}
.ls-block h3::after {
content: "h3";
background-color: var(--ls-secondary-background-color);
border-radius: 3px;
padding: 4px;
width: 2em;
text-align: center;
font-size: 14px;
color: var(--ls-primary-text-color);
font-weight: normal;
vertical-align: middle;
float: right;
display: table-cell;
/* Push to right */
position: absolute;
right: 20px;
top: 0px;
}
.ls-block h4::after {
content: "h4";
background-color: var(--ls-secondary-background-color);
border-radius: 3px;
padding: 4px;
width: 2em;
text-align: center;
font-size: 14px;
color: var(--ls-primary-text-color);
font-weight: normal;
vertical-align: middle;
float: right;
display: table-cell;
/* Push to right */
position: absolute;
right: 20px;
top: 0px;
}
.ls-block h5::after {
content: "h5";
background-color: var(--ls-secondary-background-color);
border-radius: 3px;
padding: 4px;
width: 2em;
text-align: center;
font-size: 14px;
color: var(--ls-primary-text-color);
font-weight: normal;
vertical-align: middle;
float: right;
display: table-cell;
/* Push to right */
position: absolute;
right: 20px;
top: 0px;
}
.ls-block h6::after {
content: "h6";
background-color: var(--ls-secondary-background-color);
border-radius: 3px;
padding: 4px;
width: 2em;
text-align: center;
font-size: 14px;
color: var(--ls-primary-text-color);
font-weight: normal;
vertical-align: middle;
float: right;
display: table-cell;
/* Push to right */
position: absolute;
right: 20px;
top: 0px;
}
.ls-block h1 {
font-size: 1.6em !important;
font-weight: bold;
}
.ls-block h2 {
font-size: 1.4m !important;
font-weight: bold;
}
.ls-block h3 {
font-size: 1.2em;
font-weight: bold;
}
.ls-block h4 {
font-size: 1 em;
font-weight: bold;
}
.ls-block h5 {
font-size: 1em;
font-weight: bold;
}
.ls-block h6 {
font-size: 1em;
font-weight: bold;
}
/* === PATH by pengx17 === */
:root {
--ls-block-bullet-active-color: rgb(114, 213, 252);
--ls-block-bullet-threading-width: 1.75px;
}
.block-control {
z-index: 1;
}
.block-children {
border-left-color: var(--ls-guideline-color);
border-left-width: var(--ls-block-bullet-threading-width) !important;
}
.block-children-container {
position: relative;
}
.block-children-left-border {
z-index: 1;
position: absolute;
height: 100%;
width: 4px;
padding-right: 0px;
border-radius: 2px;
background-color: transparent;
left: -1px;
transition: background-color 0.2s;
}
.block-children-left-border:hover {
background-color: var(--ls-block-bullet-active-color);
}
.block-content-wrapper {
position: relative;
overflow-x: visible !important;
/* Fixme: overflow? */
}
.block-content-wrapper > div:first-child {
padding: 1px;
margin: -1px;
overflow-x: auto;
}
.bullet-container {
height: 14px !important;
width: 14px !important;
position: relative;
transform: translate(1px, -1px);
}
/* Block bullet path should only show in a nested block */
.ls-block {
/* Fix for headings like h1, h2 etc */
/* Basic "curve" */
/* Fix multi-line blocks with children */
}
.ls-block .bullet {
background-color: var(--ls-block-bullet-active-color);
box-shadow: 0 0 0 1px var(--ls-block-bullet-active-color);
}
.ls-block div.items-center {
position: relative;
height: 26px !important;
}
.ls-block > .items-baseline {
align-items: initial;
}
.ls-block:not(:hover) .bullet {
background-color: var(--ls-block-bullet-color);
transform: scale(1);
box-shadow: none;
}
.ls-block:not(:hover) > .items-baseline {
align-items: baseline;
}
.ls-block .ls-block > div > div.items-center::before {
pointer-events: none;
content: "";
left: calc(var(--ls-block-bullet-threading-width) * -1);
right: 6px;
top: calc(-50% + var(--ls-block-bullet-threading-width) * 0.5 - 1px);
bottom: 50%;
/* shift left 1px for border */
position: absolute;
border-left: var(--ls-block-bullet-threading-width) solid transparent;
border-bottom: var(--ls-block-bullet-threading-width) solid transparent;
border-bottom-left-radius: 10px;
}
.ls-block .ls-block:hover > div > div.items-center::before {
border-color: var(--ls-block-bullet-active-color);
}
.ls-block .block-children > .ls-block::before {
pointer-events: none;
content: "";
top: -1rem;
bottom: 0;
border-left: var(--ls-block-bullet-threading-width) solid transparent;
left: calc(var(--ls-block-bullet-threading-width) * -1);
position: absolute;
}
.ls-block .block-children:hover > .ls-block:not(:hover)::before {
border-color: var(--ls-block-bullet-active-color);
}
.ls-block .block-children:hover > .ls-block:hover ~ .ls-block::before {
border-color: transparent;
}
.ls-block[haschild] > div > .block-content-wrapper::before {
pointer-events: none;
content: "";
top: 12px;
bottom: 0;
left: -15px;
position: absolute;
border-left: var(--ls-block-bullet-threading-width) solid transparent;
}
.ls-block[haschild]:hover > div > .block-content-wrapper::before {
border-color: var(--ls-block-bullet-active-color);
}
:is(.embed-block > div, .embed-page) > div > div > div > div.ls-block > div > div.items-center::before {
border-color: transparent !important;
}
@media (max-width: 640px) {
.ls-block[haschild=true] > div > .block-content-wrapper::before {
left: -11px;
}
}
/* Disable for doc mode */
.doc-mode div.items-center::before,
.doc-mode div.items-center::after,
.doc-mode .ls-block::before,
.doc-mode .ls-block::after {
display: none;
}
.doc-mode .block-children {
border-left-width: 0px !important;
}
/* === Bullets === */
.bullet-container .bullet {
border-radius: 50%;
/* Nested bullets look distorted if changing size */
/* width: 5px;
height: 5px; */
background-color: rgb(114, 213, 252);
}
.bullet-container.bullet-closed {
background-color: #f2f2ef00;
border: 2px solid rgb(114, 213, 252);
}
/* === Bold and Italic text === */
/* Emphasize bold text more */
.dark-theme .inline b {
color: rgb(215, 215, 215);
}
/* Emphasize italic text more */
.dark-theme .inline i {
color: rgb(235,235,235);
}
/* === Highlighted text (via ===) === */
mark {
background: rgb(201, 112, 0);
padding: 1px 4px;
border-radius: 3px;
/* font-weight: bold; */
}
/* === Journals === */
.journal-item.content .title .title {
width: calc(var(--ls-main-content-max-width) - 160px);
}
#journals .title h1:before {
content: "📅 ";
font-size: 24px;
padding-right: 1em;
}
/* === Tags === */
a.tag {
opacity: 1;
color: var(--ls-primary-text-color);
background-color: var(--tagpills-border);
/* background-color: var(--tagpills-bg); */
/* border: 1px solid var(--tagpills-border); */
font-size: 13px;
padding: 0px 6px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
border-radius: var(--tagpills-border-radius);
/* text-transform: uppercase; */
*/float:right;*/
}
/* === Page references === */
.dark-theme .page-reference .bracket {
color: rgb(114, 213, 252) !important;
}
/* === Block references == */
.block-ref {
color: rgba(255, 128, 0, 0.9);
border-bottom: 0px;
cursor: alias;
}
.block-ref:after {
content: "^";
/* width: 21px; */
/* height: 16px; */
color: #d1d1d1;
/* background: transparent 50% 200%/54% url('https://svgshare.com/i/SWJ.svg') no-repeat; */
/* filter: invert(3%) sepia(100%) saturate(1920%) hue-rotate(0deg) brightness(1419%) contrast(249%); */
}
/* === Color to distinguish external links === */
a.external-link {
color: rgb(51,102,187);
border-bottom: 0px;
}
/* Background color for image without background (same color as sephia in pdf reader) */
img.rounded-sm.shadow-xl.relative {
background-color: rgba(249,241,225,255);
}
/*Solid line between pdf view and main middle window*/
.extensions__pdf-resizer {
background-color: #696565;
}
/* Adjustments for pdf view*/
/* Adjustments for light theme*/
#pdf-layout-container[data-theme=light]{background-color: #000000}
#pdf-layout-container[data-theme=light] .textLayer{background-color: #7a7a7a}
#pdf-layout-container[data-theme=light] .extensions__pdf-hls-area-region{mix-blend-mode:revert;opacity:.4}
#pdf-layout-container[data-theme=light] .extensions__pdf-toolbar{background:transparent}
/* Adjustments for warm theme*/
#pdf-layout-container[data-theme=warm] .extensions__pdf-toolbar{background:transparent}
/* Adjustments for dark theme*/
#pdf-layout-container[data-theme=dark]{background-color: #000000}
#pdf-layout-container[data-theme=dark] .pdfViewer{-webkit-filter:invert(100%);filter:invert(100%);background:0 0}
#pdf-layout-container[data-theme=dark] .textLayer{background-color: #242424;-webkit-filter:invert(100%);filter:invert(100%)}
#pdf-layout-container[data-theme=dark] .extensions__pdf-toolbar{background:transparent}
/* block reference Use to adjust the size between lines in blocks, and to have space after a reference to click to edit */
.block-ref {
display: inline;
font-size: inherit;
}
.block-ref div {
display: inline;
}
/* enlarge LaTeX equation, left-align, and inline display for in block reference*/
.katex-display {
display: inline-block;
/*text-align: left;*/ /*apparently there is no need for this as of 2022-06-27. Adding it or change to "center" doesn't do anything*/
/* font size adjusted here only affect the $$x$$ if it stand alone by itself in the block */
/* limitation: block start with $$x$$ and then has text follow will break line (however when make block reference line is not broken */
}
.katex {
font: normal 1.4em KaTeX_Main;
/*font-size: large;*/ /*can also use this command to adjust font size*/
}
/* vertical style of sidebar */
/* so that the main area is not pushed too far left */
/*.ls-right-sidebar-open #main-container {padding-left: 64px !important;*/
/* horizontal stacking */
.sidebar-item-list.flex {
display: flex;
padding-bottom: 0;
flex-direction: row;
}
.sidebar-item.content {
min-width: 33vw;
overflow-y: scroll;
}
/* adjusting zoom level*/
#main-content-container, .left-sidebar-inner .nav-content-item, .sidebar-item.content {zoom: 0.9}