Joplin MacOS native theme (design mockup)

andrejilderda · 28 April 2021 18:05

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:

Here's the CSS

: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:

Screenshot is from the beta in which a few new wysiwyg-icons were added (highlight, etc.). This is causing the empty space in the toolbar.
There's no way to style the selected note yet (which is a huge miss, as the accent blue immediately gives it the macOS look). This is being discussed here.
Dark background-color when having a subfolder selected,
Scrolling through the note lists with a lot of notes results in wonky background-colors (because an :nth-child(even/odd) rule is used while the list is virtualized),
SASS variables need to be swapped with CSS custom properties, to make it easy to change certain variables (incl. colors, spacing), add dark mode, etc.
Some cleanup needs to be done.

Icons

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.

Topic		Replies	Views
New UI suggestions Development	3	1307	20 March 2022
Plugin: 🎨 macOS theme for Joplin Plugins	176	17408	15 March 2025
Joplin and New Design Features	3	1459	31 October 2021
更新2.9.17后各种卡死 Support	2	1454	20 January 2023
UI / logo polishing experiment (see the screenshots) Development	7	1330	2 March 2020

Joplin MacOS native theme (design mockup)

Icons

Related topics