Joplin custom css style

userchrome.css

/**
 * For styling the entire Joplin app (except the rendered Markdown, which is defined in `userstyle.css`)
 * /Users/[your-userName]/.config/joplin-desktop/userchrome.css
 *
 **/

:root {
    --general-font-size: 16px;
    --general-font-family: "JetBrains Mono", Monaco, monospace;
    --list-item-height: 32px;
    --note-item-height: 40px;
    --counter-font-size: 12px;
}

/* note-item-height & folder-item-height */
.list-item-container {
    height: var(--note-item-height) !important;
}

/* notebook-name-font */
.list-item {
    font-size: var(--general-font-size) !important;
    font-family: var(--general-font-family) !important;
}

/* note-counter */
.list-item div {
    font-size: var(--counter-font-size) !important;
}

/* note-tile font */
.list-item-container span {
    font-size: var(--general-font-size) !important;
    font-family: var(--general-font-family) !important;
}

/* top-bttons-searchbar */
.header span,
.header input {
    font-size: var(--general-font-size) !important;
    font-family: var(--general-font-family) !important;
}

here is the result.