Hi everyone 
I made a quick design mockup to give Joplin a more native MacOS look. I love Joplin, but every time I open the app the design reminds me it's an Electron app. Any thoughts on this so far?
Light sidebar
Dark sidebar
The wysiwyg icons are from Iconpark.
I've posted this in the development category, but I haven't start building yet... 
I think the designs look good but to get a better chance of going somewhere it's best not to move around or remove UI elements, or add features. Because that would require getting to a consensus on what should be changed and how, and then doing the development work and all that can take a lot of time (and often it means the whole thing is dropped before it gets somewhere).
Perhaps if you can get your macOS look working without changing functionalities it would be possible to integrate it as a theme of the main app, and have it selected by default on macOS.
It would be great to have this selected on Mac by default.
I will take into account your feedback about changing UI elements. I was actually thinking of creating an additional plugin to push the native MacOS look further without having to change the core.
@laurent I'm looking at how to approach this and found out the current theme system only allows me to change the color palette. Since that will not really cut it, shall I just start working on a custom stylesheet for now? Or do you have other ideas?
I guess we could add additional options to the themes, such as padding, margin, border radius, etc. which would make your theme possible, but there's not much bandwidth for this at the moment. If someone can figure out a pull request for this though, I would accept it.
In the meantime you best option is indeed custom CSS.
Alright, I will go the custom CSS route. 
Fyi, I'll be using CSS variables to make this easier to customise than the current themes. I'm thinking of colors, typography, density/spacing, etc. by specifying high-level tokens that can be overridden on a component level. This will also make it easier to adapt in case of any future changes to Joplin's theme implementation. I'm not too sure if adding all the design tokens you mention will be useful for anything else besides the desktop UI though.
Development started (slowly, but steady!):
Here's a small preview of the theme so far. Screenshot:
The styling is currently limited to the main UI. Settings, pop-ups, etc. still needs to be done.
If you want to take it for a spin:
:root {
--g-spacing-00: 0px;
--g-spacing-01: 0.2rem;
--g-spacing-02: 0.4rem;
--g-spacing-03: 0.8rem;
--g-spacing-04: 1.2rem;
--g-spacing-05: 1.6rem;
--g-spacing-06: 2.4rem;
--g-spacing-07: 3.2rem;
--g-spacing-08: 4.8rem;
--g-spacing-09: 6.4rem;
--g-spacing-10: 9.6rem;
--g-spacing-11: 12.8rem;
--g-spacing-12: 19.2rem;
--g-spacing-13: 25.6rem;
--g-spacing-14: 38.4rem;
--g-spacing-15: 51.2rem;
--g-spacing-16: 76.8rem;
--g-spacing-17: 102.4rem;
--g-spacing-18: 144rem;
--g-box-shadow-0: 0 0 #0000;
--g-box-shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--g-box-shadow-2: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
0 1px 2px 0 rgba(0, 0, 0, 0.06);
--g-box-shadow-3: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
--g-box-shadow-4: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
--g-box-shadow-5: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04);
--g-box-shadow-6: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
--g-box-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
--g-border-radius-0: 0px;
--g-border-radius-1: 0.2rem;
--g-border-radius-2: 0.4rem;
--g-border-radius-3: 0.8rem;
--g-border-radius-4: 1.2rem;
--g-border-radius-5: 1.6rem;
--g-border-radius-6: 2.4rem;
--g-border-radius-7: 3.2rem;
--g-border-radius-8: 4.8rem;
--g-border-radius-9: 6.4rem;
--g-border-radius-full: 9999px;
--g-border-width-0: 0px;
--g-border-width-1: 0.1rem;
--g-border-width-2: 0.2rem;
--g-border-width-3: 0.4rem;
--g-border-width-4: 0.8rem;
--g-border-width-5: 1.2rem;
--g-border-width-6: 1.6rem;
--g-font-family-system: -apple-system, 'SF Pro', BlinkMacSystemFont,
'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif;
--g-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
'Liberation Mono', 'Courier New', monospace;
--g-font-size--1: 1.1rem;
--g-font-size-0: 1.2rem;
--g-font-size-1: 1.4rem;
--g-font-size-2: 1.6rem;
--g-font-size-3: 1.8rem;
--g-font-size-4: 2rem;
--g-font-size-5: 2.4rem;
--g-font-size-6: 3rem;
--g-font-size-7: 3.6rem;
--g-font-size-8: 4.8rem;
--g-font-size-9: 6rem;
--g-font-size-10: 7.2rem;
--g-font-size-11: 9.6rem;
--g-font-size-12: 12.8rem;
--g-font-weight-thin: 100;
--g-font-weight-extralight: 200;
--g-font-weight-light: 300;
--g-font-weight-normal: 400;
--g-font-weight-medium: 500;
--g-font-weight-semibold: 600;
--g-font-weight-bold: 700;
--g-font-weight-extrabold: 800;
--g-font-weight-black: 900;
--g-line-height-0: 1.6rem;
--g-line-height-1: 2rem;
--g-line-height-2: 2.4rem;
--g-line-height-3: 2.8rem;
--g-line-height-4: 2.8rem;
--g-line-height-5: 3.2rem;
--g-line-height-6: 3.6rem;
--g-line-height-7: 4rem;
--g-line-height-8: 1;
--g-line-height-9: 1;
--g-line-height-10: 1;
--g-line-height-11: 1;
--g-line-height-12: 1; }
.fa-caret-right::before {
content: '๔'; }
.fa-caret-down::before {
content: '๔'; }
.fa-plus::before {
content: '๔'; }
/* 1rem = 10px */
html {
font-size: 62.5%; }
body {
/* default font-size set back to 16px */
font-size: 1.6rem; }
#react-root > div > div {
background: transparent; }
div,
span,
a,
* {
font-family: var(--g-font-family-system); }
.rli-editor > div > div {
background-color: transparent !important; }
.rli-editor > div > div > div input {
padding-top: 1.4rem;
font-weight: 700;
font-size: 2rem; }
.rli-editor .joplin-tinymce > div,
.rli-editor .editor-toolbar,
.rli-editor .tox-toolbar__group,
.rli-editor .tox-toolbar__primary {
background-color: transparent !important; }
.rli-editor .joplin-tinymce > div:first-child > a span:before,
.rli-editor .editor-toolbar > div:first-child > a span:before {
font-family: 'SF Pro';
-webkit-font-smoothing: antialiased; }
.rli-editor .joplin-tinymce > div:first-child > a:nth-of-type(1) span:before,
.rli-editor .editor-toolbar > div:first-child > a:nth-of-type(1) span:before {
content: '๔ฏถ'; }
.rli-editor .joplin-tinymce > div:first-child > a:nth-of-type(2) span:before,
.rli-editor .editor-toolbar > div:first-child > a:nth-of-type(2) span:before {
content: '๔ฏป'; }
.rli-editor .joplin-tinymce > div:first-child > a:nth-of-type(3) span:before,
.rli-editor .editor-toolbar > div:first-child > a:nth-of-type(3) span:before {
content: '๔ฎต'; }
.rli-editor .tox-toolbar__group:before {
content: '';
background-color: rgba(0, 0, 0, 0.098);
height: 100%;
width: 0.1rem;
margin: 0 0.25rem; }
.rli-editor .tox-toolbar__group button {
margin: 0 0.25rem; }
.rli-editor .tox-toolbar__group button:before {
font-family: 'SF Pro';
-webkit-font-smoothing: antialiased; }
.rli-editor .tox-toolbar__group button:hover {
background: rgba(0, 0, 0, 0.098); }
.rli-editor .tox-toolbar__group svg {
display: none; }
.rli-editor .tox-toolbar__group:nth-child(1) button:nth-child(1):before {
content: '๔
'; }
.rli-editor .tox-toolbar__group:nth-child(1) button:nth-child(2):before {
content: '๔
'; }
.rli-editor .tox-toolbar__group:nth-child(2) button:nth-child(1):before {
content: '๔ฃ'; }
.rli-editor .tox-toolbar__group:nth-child(2) button:nth-child(2):before {
content: '๔'; }
.rli-editor .tox-toolbar__group:nth-child(2) button:nth-child(3):before {
content: '๔ก
'; }
.rli-editor .tox-toolbar__group:nth-child(2) button:nth-child(4):before {
content: '๔ข'; }
.rli-editor .tox-toolbar__group:nth-child(3) button:nth-child(1):before {
content: '๔ฒ'; }
.rli-editor .tox-toolbar__group:nth-child(3) button:nth-child(2):before {
content: '๔ด'; }
.rli-editor .tox-toolbar__group:nth-child(3) button:nth-child(3):before {
content: '๔บ'; }
.rli-editor .tox-toolbar__group:nth-child(4) button:nth-child(1):before,
.rli-editor .tox-toolbar__group:nth-child(4) button:nth-child(2):before,
.rli-editor .tox-toolbar__group:nth-child(4) button:nth-child(3):before {
font-family: var(--g-font-family-system); }
.rli-editor .tox-toolbar__group:nth-child(4) .tox-tbtn__select-label {
display: none; }
.rli-editor .tox-toolbar__group:nth-child(4) button:nth-child(1):before {
content: 'H1'; }
.rli-editor .tox-toolbar__group:nth-child(4) button:nth-child(2):before {
content: 'H2'; }
.rli-editor .tox-toolbar__group:nth-child(4) button:nth-child(3):before {
content: 'H3'; }
.rli-editor .tox-toolbar__group:nth-child(4) button:nth-child(4):before {
content: '๔
ฝ'; }
.rli-editor .tox-toolbar__group:nth-child(4) button:nth-child(5):before {
content: '๔ฟ'; }
.rli-editor .tox-toolbar__group:nth-child(4) button:nth-child(6):before {
content: '๔ฅ'; }
.rli-editor .tox-toolbar__group:nth-child(4) button:nth-child(7):before {
content: '๔ซ'; }
.rli-editor .tox-editor-header:after {
content: '';
background-color: rgba(0, 0, 0, 0.098);
height: 0.1rem;
position: absolute;
left: -1.4rem;
right: -1.4rem; }
.rli-editor .tox-tinymce {
overflow: unset; }
.rli-noteList > div:first-child {
border-right: 1px solid #e6e6e6; }
.rli-noteList > div > div > div:first-child {
background-color: #fff;
overflow: hidden;
width: 100%; }
.rli-noteList input[type='text'] {
box-shadow: 0 0 0 16px rgba(0, 122, 255, 0);
border: 1px solid rgba(0, 0, 0, 0.098);
border-radius: 0.6rem;
font-size: 1.3rem;
height: 2.8rem;
padding: 0 2.5rem 0 3rem !important;
width: 100%;
flex: 1 0 100%; }
.rli-noteList input[type='text']:focus {
transition: 0.25s box-shadow cubic-bezier(0.61, 1, 0.88, 1);
transition-delay: 0.125s;
box-shadow: 0 0 0 0.35rem rgba(0, 122, 255, 0.5); }
.rli-noteList input[type='text']::placeholder {
color: rgba(0, 0, 0, 0.259); }
.rli-noteList input[type='text'] + button {
flex: 0;
position: unset;
padding: 0;
right: auto;
top: 1px; }
.rli-noteList input[type='text'] + button span::before {
position: absolute;
left: 0;
content: '๔ซ' !important;
color: rgba(0, 0, 0, 0.498);
font-size: 1.6rem;
font-family: var(--g-font-family-system);
font-weight: normal !important;
top: 0.5rem;
left: 0.8rem;
pointer-events: none; }
.rli-noteList .fa-times {
font-size: 13px;
font-weight: normal; }
.rli-noteList .fa-times::after {
display: block;
content: '๔ก';
position: absolute;
color: rgba(0, 0, 0, 0.498);
right: 0.7rem;
top: 0.7rem;
font-family: 'SF Pro' !important; }
.rli-noteList > div > div > div:first-child > div:nth-child(2) {
position: relative;
overflow: hidden;
width: auto;
max-height: 2.8rem;
flex: 1 0 auto; }
.rli-noteList > div > div > div:first-child > div:nth-child(2) button {
background: none;
border-radius: 0.6rem;
color: #fff;
margin-left: 0.6rem;
max-height: none;
max-width: none;
height: 2.6rem;
width: 2.6rem; }
.rli-noteList > div > div > div:first-child > div:nth-child(2) button + button {
margin-left: 0.1rem; }
.rli-noteList > div > div > div:first-child > div:nth-child(2) button span:before {
color: rgba(0, 0, 0, 0.498);
display: block;
font-family: 'SF Pro';
font-size: 16px;
font-weight: 500;
-webkit-font-smoothing: antialiased;
transform: translateY(0.05rem); }
.rli-noteList > div > div > div:first-child > div:nth-child(2) button:first-child span:before {
content: '๔ข'; }
.rli-noteList > div > div > div:first-child > div:nth-child(2) button:last-child span:before {
content: '๔'; }
.rli-noteList > div > div > div:first-child > div:nth-child(2) button:focus, .rli-noteList > div > div > div:first-child > div:nth-child(2) button:hover {
background: rgba(0, 0, 0, 0.098); }
.rli-noteList .note-list {
padding: 0 1rem 1rem; }
.rli-noteList .list-item-container {
border-radius: 4px;
height: 3.2rem; }
.rli-noteList .list-item-container:nth-child(odd) {
background: var(--note-list-item-odd); }
.rli-noteList .list-item-container:nth-child(even) {
background: var(--note-list-item-even); }
.rli-noteList .list-item-container a {
padding: 0 10px !important; }
.rli-noteList .list-item-container.ga-DjpS {
background: #0063e1 !important; }
.rli-noteList .list-item-container.ga-DjpS a {
color: white !important; }
.rli-noteList .list-item-container::before {
content: none; }
.rli-noteList .list-item-container > a > span {
overflow: hidden;
text-overflow: ellipsis; }
.rli-noteList > div > div > div:last-child {
background-color: #fff; }
.rli-noteList > div > div > div:last-child {
border-right: none; }
.rli-sideBar:first-child {
width: auto !important; }
.rli-sideBar > span > div {
z-index: 1; }
.sidebar {
background: var(--sidebar__BackgroundColor);
padding-top: 1rem; }
.sidebar > div > div button {
display: none;
margin-right: 1.5rem; }
.sidebar > div > div:hover button {
display: block; }
.sidebar > div > div:first-child span,
.sidebar > div .folders + div span {
text-transform: none;
color: rgba(0, 0, 0, 0.259);
font-size: var(--sidebar__label-FontSize);
font-weight: 700;
margin-left: 6px; }
.sidebar > div .folders > div:first-child {
background: none; }
.sidebar > div a {
color: var(--labelColor); }
.sidebar > div .list-item-container {
border-radius: 4px;
height: 2.8rem;
margin: 0 10px;
padding: 0; }
.sidebar > div .list-item-container:hover {
background: transparent; }
.sidebar > div .list-item-container.xOaMI {
background: gainsboro; }
.sidebar > div .list-item-container a:first-of-type {
opacity: 1;
margin-top: -3px;
padding-right: 0; }
.sidebar > div .list-item {
opacity: 1;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
line-height: 2.8rem; }
.sidebar > div .folders .list-item::before,
.sidebar > div .tags .list-item::before {
color: var(--accent-color);
margin-right: 0.7rem;
font-weight: 400;
font-size: 13px;
-webkit-font-smoothing: antialiased; }
.sidebar > div .folders .list-item::before {
content: '๔'; }
.sidebar > div .tags .list-item::before {
content: '๔ก'; }
.sidebar > div .list-item-depth-0 {
padding-left: 0.2rem; }
.sidebar > div .list-item-depth-1 {
padding-left: 1.8rem; }
.sidebar > div .list-item-depth-2 {
padding-left: 3.4rem; }
.sidebar > div .list-item-depth-3 {
padding-left: 5rem; }
.sidebar > div .list-item-depth-4 {
padding-left: 6.6rem; }
.sidebar > div .list-item-depth-5 {
padding-left: 8.2rem; }
.sidebar > div .list-item-depth-6 {
padding-left: 9.8rem; }
.sidebar > div .list-item-depth-7 {
padding-left: 11.4rem; }
.sidebar > div .list-item-depth-8 {
padding-left: 13rem; }
.sidebar > div .list-item-depth-9 {
padding-left: 14.6rem; }
.sidebar .fas {
opacity: 1 !important; }
.sidebar .fas::before {
font-family: 'SF Pro';
font-size: 9px;
font-weight: 700;
-webkit-font-smoothing: antialiased; }
.sidebar .fas.fa-caret-right::before {
color: rgba(0, 0, 0, 0.498); }
.sidebar .fas.fa-caret-down::before {
color: rgba(0, 0, 0, 0.498); }
.sidebar .fas.fa-plus::before {
color: rgba(0, 0, 0, 0.259);
font-weight: 500;
font-size: 14px;
-webkit-font-smoothing: unset; }
.sidebar .icon-notebooks,
.sidebar .icon-tags,
.sidebar .icon-notes {
display: none; }
.sidebar > div:last-child {
padding-bottom: .4rem !important; }
@keyframes tooltipTimeout {
0% {
opacity: 0; }
99% {
opacity: 0; }
100% {
opacity: 1; } }
.sidebar > div:last-child > div:first-child {
opacity: 0;
pointer-events: none;
background-color: gainsboro;
padding: .4rem;
position: absolute;
width: auto;
bottom: 20px;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2); }
.sidebar > div:last-child > div:first-child div {
color: black; }
.sidebar > div:last-child:hover > div:first-child {
animation: tooltipTimeout 1s;
opacity: 1; }
.sidebar > div:last-child button {
border: none;
justify-content: flex-start;
padding: 0;
text-align: left;
font-size: 1.3rem; }
.sidebar > div:last-child button span {
color: rgba(0, 0, 0, 0.498); }
.sidebar > div:last-child button:hover span {
color: rgba(0, 0, 0, 0.498); }
.sidebar > div:last-child button .icon-sync {
font-size: inherit;
transform-origin: 50% 55%; }
.sidebar > div:last-child button .icon-sync::before {
content: '๔ฏ';
font-family: 'SF Pro';
font-size: 1.2rem;
-webkit-font-smoothing: antialiased; }
#rendered-md {
font-size: 1.4rem;
line-height: 1.6;
padding: 2.8rem;
max-width: 75ch;
color: #454545;
-webkit-font-smoothing: antialiased; }
#rendered-md a {
color: var(--accent-color); }
#rendered-md > * {
margin: 0 0 1.4rem; }
#rendered-md h1,
#rendered-md h2,
#rendered-md h3,
#rendered-md h4,
#rendered-md h5 {
margin-bottom: 0 !important;
padding: 0; }
#rendered-md h1 {
font-size: 3.6rem;
border-bottom: none; }
#rendered-md img {
margin-top: 1.4rem; }
#rendered-md ul {
margin-left: 1.8rem; }
#rendered-md ul li {
margin-bottom: 0.35rem; }
#rendered-md table th {
background: #f4f5f5;
border-bottom-width: 0.1rem; }
#rendered-md table tr:nth-child(even) {
background: #f4f5f5; }
#rendered-md table tr:nth-child(odd) {
background: white; }
#rendered-md table th,
#rendered-md table td {
font-family: var(--g-global-font-family-system);
border-color: #e6e6e6; }
:root {
--accent-color: #007aff;
--note-list-item-odd: #f4f5f5;
--note-list-item-even: white;
--sidebar__BackgroundColor: #ececec;
--sidebar__label-FontSize: var(--g-font-size--1); }
@media (prefers-color-scheme: dark) {
--accent-color: #0a84ff;
--sidebar-color: #282828;
--note-list-item-odd: rgba(255, 255, 255, 0.047);
--note-list-item-even: #1e1e1e;
}
Please note, there are quite a few issues I still need to take care of:
:nth-child(even/odd) rule is used while the list is virtualized),I was surprised to see I could use the native macOS icons (At least, it works on my machineโข). Apparently SF Pro contains all icons and can also serve as an icon font. If it doesn't work for you, do let me know which macOS version you're using. Because of this, the icons only work on macOS.
This is cool, I'm interested in where this is heading. I am on Big Sur, and mine looks pretty different from your screenshot. It also doesn't seem like the icons are working for me.
Are you assuming a certain theme enabled? System dark or light mode? I tried a few different combinations but couldn't figure it out.
Hmmm... that's interesting 
. Can you share which version of Big Sur and Joplin you're using? Thanks for checking out!
Oh, and I haven't tested with any other themes except 'Light' before. Having this set to a different value indeed causes a few issues I now see.
Joplin 1.8.3 (prod, darwin)
MacOS 11.2.3
Here's what I see with Joplin Light Mode and MacOS in light mode:
I can confirm the same issue.
Joplin 1.7.11 (prod, darwin)
MacOS 11.3.1
There were a few specificity issues, due to the fact I'm injecting the CSS differently during development. Things should now look in line with the above screenshot. And hopefully the icons now work as expected also. 
Can you please re-check (with the Theme set to 'Light' in settings)?
@charset "UTF-8";
:root {
--g-spacing-00: 0px;
--g-spacing-01: 0.2rem;
--g-spacing-02: 0.4rem;
--g-spacing-03: 0.8rem;
--g-spacing-04: 1.2rem;
--g-spacing-05: 1.6rem;
--g-spacing-06: 2.4rem;
--g-spacing-07: 3.2rem;
--g-spacing-08: 4.8rem;
--g-spacing-09: 6.4rem;
--g-spacing-10: 9.6rem;
--g-spacing-11: 12.8rem;
--g-spacing-12: 19.2rem;
--g-spacing-13: 25.6rem;
--g-spacing-14: 38.4rem;
--g-spacing-15: 51.2rem;
--g-spacing-16: 76.8rem;
--g-spacing-17: 102.4rem;
--g-spacing-18: 144rem;
--g-box-shadow-0: 0 0 #0000;
--g-box-shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--g-box-shadow-2: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
0 1px 2px 0 rgba(0, 0, 0, 0.06);
--g-box-shadow-3: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
--g-box-shadow-4: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
--g-box-shadow-5: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04);
--g-box-shadow-6: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
--g-box-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
--g-border-radius-0: 0px;
--g-border-radius-1: 0.2rem;
--g-border-radius-2: 0.4rem;
--g-border-radius-3: 0.8rem;
--g-border-radius-4: 1.2rem;
--g-border-radius-5: 1.6rem;
--g-border-radius-6: 2.4rem;
--g-border-radius-7: 3.2rem;
--g-border-radius-8: 4.8rem;
--g-border-radius-9: 6.4rem;
--g-border-radius-full: 9999px;
--g-border-width-0: 0px;
--g-border-width-1: 0.1rem;
--g-border-width-2: 0.2rem;
--g-border-width-3: 0.4rem;
--g-border-width-4: 0.8rem;
--g-border-width-5: 1.2rem;
--g-border-width-6: 1.6rem;
--g-font-family-system: 'SF Pro', -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif;
--g-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
'Liberation Mono', 'Courier New', monospace;
--g-font-size--1: 1.1rem;
--g-font-size-0: 1.2rem;
--g-font-size-1: 1.4rem;
--g-font-size-2: 1.6rem;
--g-font-size-3: 1.8rem;
--g-font-size-4: 2rem;
--g-font-size-5: 2.4rem;
--g-font-size-6: 3rem;
--g-font-size-7: 3.6rem;
--g-font-size-8: 4.8rem;
--g-font-size-9: 6rem;
--g-font-size-10: 7.2rem;
--g-font-size-11: 9.6rem;
--g-font-size-12: 12.8rem;
--g-font-weight-thin: 100;
--g-font-weight-extralight: 200;
--g-font-weight-light: 300;
--g-font-weight-normal: 400;
--g-font-weight-medium: 500;
--g-font-weight-semibold: 600;
--g-font-weight-bold: 700;
--g-font-weight-extrabold: 800;
--g-font-weight-black: 900;
--g-line-height-0: 1.6rem;
--g-line-height-1: 2rem;
--g-line-height-2: 2.4rem;
--g-line-height-3: 2.8rem;
--g-line-height-4: 2.8rem;
--g-line-height-5: 3.2rem;
--g-line-height-6: 3.6rem;
--g-line-height-7: 4rem;
--g-line-height-8: 1;
--g-line-height-9: 1;
--g-line-height-10: 1;
--g-line-height-11: 1;
--g-line-height-12: 1; }
.fa-caret-right::before {
content: '๔'; }
.fa-caret-down::before {
content: '๔'; }
.fa-plus::before {
content: '๔'; }
/* 1rem = 10px */
html {
font-size: 62.5%; }
body {
font-family: var(--g-font-family-system);
/* default font-size set back to 16px */
font-size: 1.6rem; }
body div,
body span,
body a,
body input {
font-family: var(--g-font-family-system); }
#react-root > div > div {
background: transparent; }
*[style*='Roboto'] {
font-family: var(--g-font-family-system) !important; }
.rli-editor > div > div {
background-color: transparent !important; }
.rli-editor > div > div > div > div:first-child input {
padding-top: 1.4rem !important;
font-weight: 700 !important;
font-size: 2rem !important; }
.rli-editor > div > div > div > div:first-child > div > div > span {
color: rgba(0, 0, 0, 0.498) !important;
font-family: var(--g-font-family-system) !important;
font-size: 1.1rem; }
.rli-editor > div > div > div > div:first-child .editor-toolbar div:nth-child(2) a {
color: rgba(0, 0, 0, 0.498);
margin: 0 0.2rem;
font-family: var(--g-font-family-system);
line-height: 1; }
.rli-editor > div > div > div > div:first-child .editor-toolbar div:nth-child(2) a > * {
display: none; }
.rli-editor > div > div > div > div:first-child .editor-toolbar div:nth-child(2) a:hover {
background: rgba(0, 0, 0, 0.098); }
.rli-editor > div > div > div > div:first-child .editor-toolbar div:nth-child(2) a:nth-child(1):before {
content: '๔
ฐ'; }
.rli-editor > div > div > div > div:first-child .editor-toolbar div:nth-child(2) a:nth-child(2):before {
content: '๔ญ'; }
.rli-editor > div > div > div > div:first-child .editor-toolbar div:nth-child(2) a:nth-child(3):before {
content: '๔ '; }
.rli-editor > div > div > div > div:first-child .editor-toolbar div:nth-child(2) a:nth-child(4):before {
content: '๔
ด'; }
.rli-editor .joplin-tinymce > div,
.rli-editor .editor-toolbar,
.rli-editor .tox .tox-toolbar__group,
.rli-editor .tox .tox-toolbar__primary {
background-color: transparent !important; }
.rli-editor .joplin-tinymce > div:first-child {
padding-top: 0.3rem !important; }
.rli-editor .joplin-tinymce > div:first-child > a,
.rli-editor .editor-toolbar > div:first-child > a {
display: flex;
align-items: center;
justify-content: center; }
.rli-editor .joplin-tinymce > div:first-child > a span,
.rli-editor .editor-toolbar > div:first-child > a span {
display: block;
font-size: 1.4rem; }
.rli-editor .joplin-tinymce > div:first-child > a span:before,
.rli-editor .editor-toolbar > div:first-child > a span:before {
font-family: 'SF Pro';
font-size: 14px !important;
font-weight: normal !important;
-webkit-font-smoothing: antialiased;
color: rgba(0, 0, 0, 0.498); }
.rli-editor .joplin-tinymce > div:first-child > a:nth-of-type(1) span:before,
.rli-editor .editor-toolbar > div:first-child > a:nth-of-type(1) span:before {
content: '๔ฏถ'; }
.rli-editor .joplin-tinymce > div:first-child > a:nth-of-type(2) span:before,
.rli-editor .editor-toolbar > div:first-child > a:nth-of-type(2) span:before {
content: '๔ฏป'; }
.rli-editor .joplin-tinymce > div:first-child > a:nth-of-type(3) span:before,
.rli-editor .editor-toolbar > div:first-child > a:nth-of-type(3) span:before {
content: '๔ฎต'; }
.rli-editor .tox-toolbar__group {
padding-left: 0;
padding-right: 0;
padding-left: 0 !important;
padding-right: 0 !important; }
.rli-editor .tox-toolbar__group::before {
content: '';
background-color: rgba(0, 0, 0, 0.098);
height: 100%;
width: 0.1rem;
margin: 0 0.65rem; }
.rli-editor .tox-toolbar__group button,
.rli-editor .tox-toolbar__group button[aria-haspopup='true'] {
display: flex;
align-items: center;
margin: 0 0.25rem;
line-height: 1;
padding: 0 !important;
height: 2.6rem;
width: 2.6rem;
min-width: auto; }
.rli-editor .tox-toolbar__group button:focus, .rli-editor .tox-toolbar__group button:hover,
.rli-editor .tox-toolbar__group button[aria-haspopup='true']:focus,
.rli-editor .tox-toolbar__group button[aria-haspopup='true']:hover {
background: rgba(0, 0, 0, 0.098); }
.rli-editor .tox-toolbar__group button:before,
.rli-editor .tox-toolbar__group button[aria-haspopup='true']:before {
font-family: 'SF Pro';
font-size: 14px !important;
font-weight: normal !important;
-webkit-font-smoothing: antialiased;
color: rgba(0, 0, 0, 0.498); }
.rli-editor .tox-toolbar__group svg {
display: none !important; }
.rli-editor .tox-toolbar__group:nth-child(1) button:nth-child(1):before {
content: "๔
"; }
.rli-editor .tox-toolbar__group:nth-child(1) button:nth-child(2):before {
content: "๔
"; }
.rli-editor .tox-toolbar__group:nth-child(1) button:nth-child(3):before {
content: "๔ฆ"; }
.rli-editor .tox-toolbar__group:nth-child(1) button:nth-child(4):before {
content: "๔
"; }
.rli-editor .tox-toolbar__group:nth-child(1) button:nth-child(5) {
width: 2.6rem !important;
min-width: 0; }
.rli-editor .tox-toolbar__group:nth-child(1) button:nth-child(5):before {
content: "๔ "; }
.rli-editor .tox-toolbar__group:nth-child(2) button:nth-child(1):before {
content: "๔ฃ"; }
.rli-editor .tox-toolbar__group:nth-child(2) button:nth-child(2):before {
content: "๔"; }
.rli-editor .tox-toolbar__group:nth-child(2) button:nth-child(3):before {
content: "๔ก
"; }
.rli-editor .tox-toolbar__group:nth-child(2) button:nth-child(4):before {
content: "๔ข"; }
.rli-editor .tox-toolbar__group:nth-child(3) button:nth-child(1):before {
content: "๔ฒ"; }
.rli-editor .tox-toolbar__group:nth-child(3) button:nth-child(2):before {
content: "๔ด"; }
.rli-editor .tox-toolbar__group:nth-child(3) button:nth-child(3):before {
content: "๔บ"; }
.rli-editor .tox-toolbar__group:nth-child(4) button:nth-child(1):before,
.rli-editor .tox-toolbar__group:nth-child(4) button:nth-child(2):before,
.rli-editor .tox-toolbar__group:nth-child(4) button:nth-child(3):before {
font-family: var(--g-font-family-system); }
.rli-editor .tox-toolbar__group:nth-child(4) .tox-tbtn__select-label {
display: none; }
.rli-editor .tox-toolbar__group:nth-child(4) button:nth-child(1):before {
content: 'H1'; }
.rli-editor .tox-toolbar__group:nth-child(4) button:nth-child(2):before {
content: 'H2'; }
.rli-editor .tox-toolbar__group:nth-child(4) button:nth-child(3):before {
content: 'H3'; }
.rli-editor .tox-toolbar__group:nth-child(4) button:nth-child(4):before {
content: "๔
ฝ"; }
.rli-editor .tox-toolbar__group:nth-child(4) button:nth-child(5):before {
content: "๔ฟ"; }
.rli-editor .tox-toolbar__group:nth-child(4) button:nth-child(6):before {
content: "๔ฅ"; }
.rli-editor .tox-toolbar__group:nth-child(4) button:nth-child(7):before {
content: "๔ซ"; }
.rli-editor .tox-editor-header:after {
content: '';
background-color: rgba(0, 0, 0, 0.098);
height: 0.1rem;
position: absolute;
left: -1.4rem;
right: -1.4rem; }
.rli-editor .tox-tinymce {
overflow: unset; }
.rli-editor > div > div > div > div:not(:first-child) .editor-toolbar:after {
content: '';
background-color: rgba(0, 0, 0, 0.098);
height: 0.1rem;
position: absolute;
left: -1.4rem;
right: -1.4rem;
bottom: 0; }
.rli-editor > div > div > div > div:not(:first-child) .editor-toolbar div > span {
padding-left: 0 !important;
padding-right: 0 !important; }
.rli-editor > div > div > div > div:not(:first-child) .editor-toolbar div > span::before {
content: '';
background-color: rgba(0, 0, 0, 0.098);
height: 100%;
width: 0.1rem;
margin: 0 0.65rem; }
.rli-editor > div > div > div > div:not(:first-child) .editor-toolbar a.button {
display: flex;
align-items: center;
margin: 0 0.25rem;
line-height: 1;
padding: 0 !important;
height: 2.6rem;
width: 2.6rem;
min-width: auto; }
.rli-editor > div > div > div > div:not(:first-child) .editor-toolbar a.button:focus, .rli-editor > div > div > div > div:not(:first-child) .editor-toolbar a.button:hover {
background: rgba(0, 0, 0, 0.098); }
.rli-editor > div > div > div > div:not(:first-child) .editor-toolbar a.button span {
font-size: 0; }
.rli-editor > div > div > div > div:not(:first-child) .editor-toolbar a.button span::before,
.rli-editor > div > div > div > div:not(:first-child) .editor-toolbar a.button i::before {
font-family: 'SF Pro';
font-size: 14px !important;
font-weight: normal !important;
-webkit-font-smoothing: antialiased;
color: rgba(0, 0, 0, 0.498); }
.rli-editor > div > div > div > div:not(:first-child) .editor-toolbar a.button .icon-bold::before {
content: "๔
"; }
.rli-editor > div > div > div > div:not(:first-child) .editor-toolbar a.button .icon-italic::before {
content: "๔
"; }
.rli-editor > div > div > div > div:not(:first-child) .editor-toolbar a.button .icon-link::before {
content: "๔ฃ"; }
.rli-editor > div > div > div > div:not(:first-child) .editor-toolbar a.button .icon-code::before {
content: "๔"; }
.rli-editor > div > div > div > div:not(:first-child) .editor-toolbar a.button .icon-attachment::before {
content: "๔ข"; }
.rli-editor > div > div > div > div:not(:first-child) .editor-toolbar a.button .icon-bulleted-list::before {
content: "๔ฒ"; }
.rli-editor > div > div > div > div:not(:first-child) .editor-toolbar a.button .icon-numbered-list::before {
content: "๔ด"; }
.rli-editor > div > div > div > div:not(:first-child) .editor-toolbar a.button .icon-to-do-list::before {
content: "๔บ"; }
.rli-editor > div > div > div > div:not(:first-child) .editor-toolbar a.button .icon-heading::before {
content: 'H2'; }
.rli-editor > div > div > div > div:not(:first-child) .editor-toolbar a.button .fa-ellipsis-h::before {
content: "๔
ฝ"; }
.rli-editor > div > div > div > div:not(:first-child) .editor-toolbar a.button .icon-add-date::before {
content: "๔ง"; }
.tox .tox-toolbar__overflow.tox-toolbar__overflow {
background: #ececec !important;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
max-width: none !important;
padding: 0.5rem !important; }
.tox .tox-toolbar__overflow.tox-toolbar__overflow .tox-toolbar__group {
align-items: flex-start;
display: flex;
flex-direction: column;
justify-content: stretch;
padding: 0; }
.tox .tox-toolbar__overflow.tox-toolbar__overflow .tox-toolbar__group:focus-within:hover button:focus:not(:hover) {
background-color: transparent;
border-radius: 0.4rem;
color: black !important;
font-size: 1.3rem !important;
line-height: 1;
min-height: 2.2rem;
height: 2.2rem;
padding: 0 1rem !important; }
.tox .tox-toolbar__overflow.tox-toolbar__overflow .tox-toolbar__group button {
background-color: transparent;
border-radius: 0.4rem;
color: black !important;
font-size: 1.3rem !important;
line-height: 1;
min-height: 2.2rem;
height: 2.2rem;
padding: 0 1rem !important;
justify-content: flex-start;
flex: 1;
text-align: left;
width: calc(100% - 2rem); }
.tox .tox-toolbar__overflow.tox-toolbar__overflow .tox-toolbar__group button:focus, .tox .tox-toolbar__overflow.tox-toolbar__overflow .tox-toolbar__group button:hover {
background: #007aff;
color: #fff !important; }
.tox .tox-toolbar__overflow.tox-toolbar__overflow .tox-toolbar__group button:after {
color: inherit;
content: attr(aria-label);
text-align: left; }
.tox .tox-toolbar__overflow.tox-toolbar__overflow .tox-toolbar__group span {
display: none; }
.tox-menu {
background: #ececec !important;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
max-width: none !important;
padding: 0.5rem !important; }
.tox-menu .tox-collection__group {
border: none !important;
padding: 0 !important; }
.tox-menu .tox-collection__group + *:before {
content: '';
display: block;
height: 0.1rem;
margin: 0.5rem 0.8rem !important;
background-color: rgba(0, 0, 0, 0.098); }
.tox-menu .tox-collection:focus-within:hover__item:focus:not(:hover) {
background-color: transparent;
border-radius: 0.4rem;
color: black !important;
font-size: 1.3rem !important;
line-height: 1;
min-height: 2.2rem;
height: 2.2rem;
padding: 0 1rem !important; }
.tox-menu .tox-collection__item {
background-color: transparent;
border-radius: 0.4rem;
color: black !important;
font-size: 1.3rem !important;
line-height: 1;
min-height: 2.2rem;
height: 2.2rem;
padding: 0 1rem !important; }
.tox-menu .tox-collection__item:focus, .tox-menu .tox-collection__item:hover {
background: #007aff;
color: #fff !important; }
.tox-menu .tox-collection__item-icon {
display: none; }
.tox-menu .tox-collection__item-label {
font-size: inherit;
margin-left: 0 !important; }
.rli-noteList > div:first-child {
border-right: 1px solid #e6e6e6; }
.rli-noteList > div > div > div:first-child {
background-color: #fff;
overflow: hidden;
width: 100%; }
.rli-noteList input[type='text'] {
box-shadow: 0 0 0 16px rgba(0, 122, 255, 0);
border: 1px solid rgba(0, 0, 0, 0.098);
border-radius: 0.6rem;
font-size: 1.3rem;
height: 2.8rem;
padding: 0 2.5rem 0 3rem !important;
width: 100%;
flex: 1 0 100%; }
.rli-noteList input[type='text']:focus {
transition: 0.25s box-shadow cubic-bezier(0.61, 1, 0.88, 1);
transition-delay: 0.125s;
box-shadow: 0 0 0 0.35rem rgba(0, 122, 255, 0.5); }
.rli-noteList input[type='text']::placeholder {
color: rgba(0, 0, 0, 0.259); }
.rli-noteList input[type='text'] + button {
flex: 0;
position: unset;
padding: 0;
right: auto;
top: 1px; }
.rli-noteList input[type='text'] + button span::before {
position: absolute;
left: 0;
content: '๔ซ' !important;
color: rgba(0, 0, 0, 0.498);
font-size: 1.6rem;
font-family: var(--g-font-family-system);
font-weight: normal !important;
top: 0.5rem;
left: 0.8rem;
pointer-events: none; }
.rli-noteList .fa-times {
font-size: 13px;
font-weight: normal; }
.rli-noteList .fa-times::after {
display: block;
content: '๔ก';
position: absolute;
color: rgba(0, 0, 0, 0.498);
right: 0.7rem;
top: 0.7rem;
font-family: 'SF Pro' !important; }
.rli-noteList > div > div > div:first-child > div:nth-child(2) {
position: relative;
overflow: hidden;
width: auto;
max-height: 2.8rem;
flex: 1 0 auto; }
.rli-noteList > div > div > div:first-child > div:nth-child(2) button {
background: none;
border-radius: 0.6rem;
color: #fff;
margin-left: 0.6rem;
max-height: none;
max-width: none;
height: 2.6rem;
width: 2.6rem; }
.rli-noteList > div > div > div:first-child > div:nth-child(2) button + button {
margin-left: 0.1rem; }
.rli-noteList > div > div > div:first-child > div:nth-child(2) button span:before {
color: rgba(0, 0, 0, 0.498);
display: block;
font-family: 'SF Pro';
font-size: 16px;
font-weight: 500;
-webkit-font-smoothing: antialiased;
transform: translateY(0.05rem); }
.rli-noteList > div > div > div:first-child > div:nth-child(2) button:first-child span:before {
content: '๔ข'; }
.rli-noteList > div > div > div:first-child > div:nth-child(2) button:last-child span:before {
content: '๔'; }
.rli-noteList > div > div > div:first-child > div:nth-child(2) button:focus, .rli-noteList > div > div > div:first-child > div:nth-child(2) button:hover {
background: rgba(0, 0, 0, 0.098); }
.rli-noteList .note-list {
padding: 0 1rem 1rem; }
.rli-noteList .list-item-container {
border-radius: 4px;
height: 3.2rem; }
.rli-noteList .list-item-container:nth-child(odd) {
background: var(--note-list-item-odd); }
.rli-noteList .list-item-container:nth-child(even) {
background: var(--note-list-item-even); }
.rli-noteList .list-item-container a {
padding: 0 10px !important; }
.rli-noteList .list-item-container.ga-DjpS {
background: #0063e1 !important; }
.rli-noteList .list-item-container.ga-DjpS a {
color: white !important; }
.rli-noteList .list-item-container::before {
content: none; }
.rli-noteList .list-item-container > a > span {
overflow: hidden;
text-overflow: ellipsis; }
.rli-noteList > div > div > div:last-child {
background-color: #fff; }
.rli-noteList > div > div > div:last-child {
border-right: none; }
.rli-sideBar:first-child {
width: auto !important; }
.rli-sideBar > span > div {
z-index: 1; }
.sidebar.sidebar {
background: var(--sidebar__BackgroundColor);
padding-top: 1rem; }
.sidebar.sidebar * {
font-family: var(--g-font-family-system) !important; }
.sidebar.sidebar > div > div button {
display: none;
margin-right: 1.5rem; }
.sidebar.sidebar > div > div button span::before {
content: '๔'; }
.sidebar.sidebar > div > div:hover button {
display: block; }
.sidebar.sidebar > div > div:first-child span,
.sidebar.sidebar > div .folders + div span {
text-transform: none;
color: rgba(0, 0, 0, 0.259);
font-size: var(--sidebar__label-FontSize);
font-weight: 700;
margin-left: 6px;
letter-spacing: -0.025em; }
.sidebar.sidebar > div .folders > div:first-child {
background: none; }
.sidebar.sidebar > div a {
color: var(--labelColor); }
.sidebar.sidebar > div .list-item-container {
border-radius: 4px;
height: 2.8rem;
margin: 0 10px;
padding: 0; }
.sidebar.sidebar > div .list-item-container:hover {
background: transparent; }
.sidebar.sidebar > div .list-item-container.xOaMI {
background: gainsboro; }
.sidebar.sidebar > div .list-item-container a:first-of-type {
opacity: 1;
margin-top: -3px;
padding-right: 0; }
.sidebar.sidebar > div .list-item {
opacity: 1;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
line-height: 2.8rem; }
.sidebar.sidebar > div .folders .list-item::before,
.sidebar.sidebar > div .tags .list-item::before {
color: var(--accent-color);
margin-right: 0.7rem;
font-weight: 400;
font-size: 13px;
-webkit-font-smoothing: antialiased; }
.sidebar.sidebar > div .folders .list-item::before {
content: '๔'; }
.sidebar.sidebar > div .tags .list-item::before {
content: '๔ก'; }
.sidebar.sidebar > div .list-item-depth-0 {
padding-left: 0.2rem; }
.sidebar.sidebar > div .list-item-depth-1 {
padding-left: 1.8rem; }
.sidebar.sidebar > div .list-item-depth-2 {
padding-left: 3.4rem; }
.sidebar.sidebar > div .list-item-depth-3 {
padding-left: 5rem; }
.sidebar.sidebar > div .list-item-depth-4 {
padding-left: 6.6rem; }
.sidebar.sidebar > div .list-item-depth-5 {
padding-left: 8.2rem; }
.sidebar.sidebar > div .list-item-depth-6 {
padding-left: 9.8rem; }
.sidebar.sidebar > div .list-item-depth-7 {
padding-left: 11.4rem; }
.sidebar.sidebar > div .list-item-depth-8 {
padding-left: 13rem; }
.sidebar.sidebar > div .list-item-depth-9 {
padding-left: 14.6rem; }
.sidebar.sidebar .fas {
opacity: 1 !important; }
.sidebar.sidebar .fas::before {
font-family: var(--g-font-family-system);
font-size: 9px;
font-weight: 700;
-webkit-font-smoothing: antialiased; }
.sidebar.sidebar .fas.fa-caret-right::before {
color: rgba(0, 0, 0, 0.498);
content: '๔ฏป'; }
.sidebar.sidebar .fas.fa-caret-down::before {
content: '๔';
color: rgba(0, 0, 0, 0.498); }
.sidebar.sidebar .fas.fa-plus::before {
color: rgba(0, 0, 0, 0.259);
font-weight: 500;
font-size: 14px;
-webkit-font-smoothing: unset; }
.sidebar.sidebar .icon-notebooks,
.sidebar.sidebar .icon-tags,
.sidebar.sidebar .icon-notes {
display: none; }
.sidebar.sidebar > div:last-child {
padding-bottom: 0.4rem !important; }
@keyframes tooltipTimeout {
0% {
opacity: 0; }
99% {
opacity: 0; }
100% {
opacity: 1; } }
.sidebar.sidebar > div:last-child > div:first-child {
opacity: 0;
pointer-events: none;
background-color: gainsboro;
padding: 0.4rem;
position: absolute;
width: auto;
bottom: 20px;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2); }
.sidebar.sidebar > div:last-child > div:first-child div {
color: black; }
.sidebar.sidebar > div:last-child:hover > div:first-child {
animation: tooltipTimeout 1s;
opacity: 1; }
.sidebar.sidebar > div:last-child button {
border: none;
justify-content: flex-start;
padding: 0;
text-align: left;
font-size: 1.3rem; }
.sidebar.sidebar > div:last-child button span {
color: rgba(0, 0, 0, 0.498); }
.sidebar.sidebar > div:last-child button:hover span {
color: rgba(0, 0, 0, 0.498); }
.sidebar.sidebar > div:last-child button .icon-sync {
font-size: inherit;
transform-origin: 50% 55%; }
.sidebar.sidebar > div:last-child button .icon-sync::before {
content: '๔ฏ';
font-family: var(--g-font-family-system);
font-size: 1.2rem;
-webkit-font-smoothing: antialiased; }
#rendered-md {
font-size: 1.4rem;
line-height: 1.6;
padding: 2.8rem;
max-width: 75ch;
color: #454545;
-webkit-font-smoothing: antialiased; }
#rendered-md a {
color: var(--accent-color); }
#rendered-md > * {
margin: 0 0 1.4rem; }
#rendered-md h1,
#rendered-md h2,
#rendered-md h3,
#rendered-md h4,
#rendered-md h5 {
margin-bottom: 0 !important;
padding: 0; }
#rendered-md h1 {
font-size: 3.6rem;
border-bottom: none; }
#rendered-md img {
margin-top: 1.4rem; }
#rendered-md ul {
margin-left: 1.8rem; }
#rendered-md ul li {
margin-bottom: 0.35rem; }
#rendered-md table th {
background: #f4f5f5;
border-bottom-width: 0.1rem; }
#rendered-md table tr:nth-child(even) {
background: #f4f5f5; }
#rendered-md table tr:nth-child(odd) {
background: white; }
#rendered-md table th,
#rendered-md table td {
font-family: var(--g-global-font-family-system);
border-color: #e6e6e6; }
:root {
--accent-color: #007aff;
--note-list-item-odd: #f4f5f5;
--note-list-item-even: white;
--sidebar__BackgroundColor: #ececec;
--sidebar__label-FontSize: var(--g-font-size--1); }
@media (prefers-color-scheme: dark) {
--accent-color: #0a84ff;
--sidebar-color: #282828;
--note-list-item-odd: rgba(255, 255, 255, 0.047);
--note-list-item-even: #1e1e1e; }
For now I'm waiting for this PR to get merged so that I can style the last few things.
Closer but still seeing some issues and unfortunately the icons aren't working. Do you have a specific font set within the app preferences that I need to change?
Again, thanks for checking! I found why it was only working for me. I had a hidden installation of SF Pro in /Library/fonts (I usually only check ~/Library/fonts 
). Without this font installed there's no way to use the SF Symbols as Apple doesn't expose them (which I actually expected). Luckily you can download SF Pro for free here:
The alternative, inlining the icons as SVG's, is quite a lot of work. So (at least for now) there's a requirement of having SF Pro installed.
Edit:
There are indeed still a few issues (like the black subfolder active color) that I can only solve when this PR is merged.
Hi, I finally got around to trying this with the correct font installed, and it works.
Looks really nice and clean!
Couple of minor things from a UX perspective
โ having the notes in the list styled even-odd makes it a little confusing. I usually think of even-odd as being helpful for reading across a table, and I noticed that Finder only uses that style in table view.
โ the new todo icon being round threw me off since the checkbox in the list is square and the new note one looks like a checkbox. It made me want the todo's to have round checkmarks like the Reminders app 
Great job on this, I hacked with colors a bit and got a dark mode (on top of Atrium Dark) and really happy to have a new daily driver. Can't wait to see an "official" dark mode :-). Thank you!!
Super nice dark mode you've got there already. Looks really good! 
Iโve just updated the classnames PR which hopefully gets merged soon so that I can tweak the last few things.
I don't know much about CSS but I want to use this theme. How do I install it?
Next week I'll make some time to wrap up the final things and release it. I'll also write some notes on how to install the theme.
