Everforest Theme

I breath Everforest. Mochi is a delight to use as is, but when I discovered I could edit the theme, I went full on to implement my favorite. It's a bit of a mess right now but I did not want to wait any longer to share it. I'll eventually put it on GitHub. In the mean time, I'd appreciate your input.

How to use:

• Save the code below into a .css file.
• Go to Settings > Appearances > Custom CSS them.
• Click Add theme and select the theme file.

Notes:

• I modified some of the original Everforest colors per my personal taste.
• I tried using Mochi variables (defined with --mochi--*) as much as possible, but sometimes I had to target some elements directly. There are hundreds of these variables and I might have missed what I needed.
• I only targeted the most important and obvious aspects of the theme. There is much room for improvement. Things like hovers, buttons, input fields, etc.
• A theme guide from the incredible developer would be much appreciated.

:root {
  /* This affects all text wrapped in single or triple quotes */
  --fonts-monospace: "UbuntuMono Nerd Font Mono"
}

html:not(.dark) {
  --bg-dim: #f2efdf;
  --bg0: #fffbef;
  --bg1: #f8f5e4;
  --bg2: #f2efdf;
  --bg3: #edeada;
  --bg-blue: #ecf5ed;
  --bg0-alt: #fffdf6;
  --fg: #5c6a72;

  --mochi--card--background: var(--bg0-alt);
  --mochi--card-box--background: var(--bg0-alt);
  --mochi--button--background: var(--bg0-alt);
  --mochi--card--background-hover: var(--bg-blue);
  --mochi--side-bar--background: var(--bg-dim);
  --mochi--review-button--background: var(--bg-dim);
  --mochi--card--color: var(--fg);
  --mochi--button-hover--background: var(--bg-blue);
}

html.dark {
  --bg-dim: #232a2e;
  --bg0: #2d353b; /* med */
  --bg1: #2e383c; /* med */
  --bg2: #374145;
  --bg-blue: #384b55;

  --mochi--card--background: var(--bg2);
  --mochi--card-box--background: var(--bg2);
  --mochi--button--background: var(--bg2);
  --mochi--card--background-hover: var(--bg-blue);
  --mochi--side-bar--background: var(--bg-dim);
  --mochi--review-button--background: var(--bg-dim);
  --mochi--card--color: #e2d7bf;
  /* --mochi--card--color: #fffbef; */
  --mochi--button-hover--background: var(--bg-blue);
  --mochi----border-color: #414B50; /* dashboard fix */
}

html {
  --mochi--md-code--background: var(--bg1) !important; 
  --mochi--cloze-2--background-color: var(--mochi--side-bar--background) !important; 
  --mochi----background-color: var(--bg0) !important;
}

/* Main content background */
.memo_views_frame_frame-container {
  background-color: var(--bg0);
}

/* Fix dashbaord overview background incorrectly set to sidebar color. */
.memo_views_pages_layout_frame-content > div:nth-child(3) {
  background-color: initial !important;
}

/* Fix Show More gradient */
.dark .memo_views_atoms_card_tile-fade {
  /* This works, but still not quite right */
  background: linear-gradient(0deg, rgb(40 51 51), rgb(44 54 58) 33px, rgba(46, 47, 48,0));
}

.memo_views_atoms_card_tile-fade {
  /* Still couldn't figure out a suitable gradient, so for now the light variant is left at the default. */
  /* background: linear-gradient(0deg, rgb(255 251 239), rgb(255 251 239) 33px, rgba(255, 251, 239,0)); */
}

/* Fix editor background */
.memo_views_modal_card_editor-background {
  background-color: var(--bg0)
}

/* Change cards fonts to Avenir */
.memo_markdown_styles_markdown-class {
  font-family: Avenir !important;
}

/* Use monospace font for tags */
.memo_markdown_components_tag-link {
  font-family: var(--fonts-monospace);
  padding: 5px;
}

/* Fix filter menu text contrast in dark mode */
.dark .memo_views_atoms_menu_menu {
  color: rgba(255, 255, 255, 0.7);
}