Comfort Coda - Theme

For a smooth experience, simultaneously muted yet expressive, reach for the the gentle touch of “Comfort Coda”…

This is my preferred day to day theme. It’s inspired from the header colors of “Niko” and the grey backgrounds of “Comfort Color Dark”—with hints of “CyberDynalSynth” (my true love, which is being rebooted as “Cyber Tron” or something like that.)

Notables:

  • cool checkboxes (thanks @death.au)
  • Dark mode only
  • Andy Mode v2 (thanks @death.au)
  • Bold has its own color
  • Italics has its own color

Every color has a purpose, but they are muted to lightly direct—not distract—the working experience. Of course your mileage will vary.

Download at the github link: https://github.com/nickmilo/Comfort-Coda

Enjoy!

11 Likes

This is brilliant!

@nickmilo use it for one day, very good theme, well done. Two suggestion:

  • it seems the background of the graph view is transparent which is distracted by the layer below it:
  • the vertical banners where hold the note titles are too thick for me. I am not sure if I like it occupy so much width of my screen. I guess this is just the taste of different people. If you give me a hint on the relevant variables, I can customise one for myself locally.

Anyway, great job!

Love this, I think it will become my new day-to-day!

The only change I have made was to update Andy Matuschak mode for version .7 to fix an issue where the sidebar icons and search are messed up. It also cleans up the title bars a little too.

/* Andy Matuschak mode! V2! for 0.7.0! (so... 2.7?) */

/* everything under .mod-root now. Don't want Andy messing with sidebars */
/* also, Andy only makes sense for vertical splits, at the root level, right? */
.mod-root.workspace-split.mod-vertical { 
  overflow-x:auto; 
  --header-width: 36px; /* <- 36px is the header height in the default theme */
}
.mod-root.workspace-split.mod-vertical > div { 
  min-width: calc(700px + var(--header-width)); /* <-- 700px is the default theme's "readable" max-width */
  box-shadow: 0px 0px 20px 20px rgba(0,0,0,0.25);
  position:sticky;
  left:0;
}

/* shift sticky position, so titles will stack up to the left */
/* This will currently stack to a maximum of 10 before resetting */
.mod-root.workspace-split.mod-vertical > div:nth-child(10n-8) { left: calc(var(--header-width) * 0); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n-7) { left: calc(var(--header-width) * 1); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n-6) { left: calc(var(--header-width) * 2); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n-5) { left: calc(var(--header-width) * 3); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n-4) { left: calc(var(--header-width) * 4); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n-3) { left: calc(var(--header-width) * 5); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n-2) { left: calc(var(--header-width) * 6); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n-1) { left: calc(var(--header-width) * 7); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n+0) { left: calc(var(--header-width) * 8); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n+1) { left: calc(var(--header-width) * 9); }

/* now it's time for the fancy vertical titles */

/* first we'll add a bit of gap for the title to sit inside of */
.workspace-leaf-content {
  padding-left: var(--header-width);
  position: relative;
}

/* this is where the magic happens */
.view-header {
  writing-mode: vertical-lr;
  border-right: 1px solid var(--background-secondary-alt);
  border-left: 2px solid var(--background-secondary-alt);
  border-top: none;
  border-bottom: none;
  height: auto;
  width: var(--header-width);
  position: absolute;
  left:0;
  top:0;
  bottom:0;
}

/* active titles have different border colours */
.workspace-leaf.mod-active .view-header {
  border-right: 2px solid var(--interactive-accent);
  border-bottom: none;
}

/* unset the title container height and swap padding */
.view-header-title-container {
  height: unset;
  padding-left: unset;
  padding-top: 5px;
}

/* fix the long-title-obscuring shadows */
.view-header-title-container:after {
  width: 100%;
  height: 30px;
  top:unset;
  bottom: 0;
  background: linear-gradient(to bottom, transparent, var(--background-secondary));
}
.workspace-leaf.mod-active .view-header-title-container:after {
  background: linear-gradient(to bottom, transparent, var(--background-primary-alt));
}

/* swap the padding/margin around for the header and actions icons */
.view-header-icon, .view-actions {
  padding: 10px 5px;
}
.view-action {
  margin: 8px 0;
}

/* get rid of the gap left by the now-missing horizontal title */
.view-content {
  height: 100%;
}

/* make the fake drop target overlay have a background so you can see it. */
/* TODO: figure out how the fake target overlay works so we can put the title back, too */
.workspace-fake-target-overlay {
  background-color: var(--background-primary);
}

Many thanks to @death.au for the above code.

1 Like

Also, just wanted to say. The way your code is written, with everything labelled up, is super helpful to a css noob like me!

2 Likes

@andybyers Thank you. I forgot to update this theme. I’ll update the github link with the latest Andy/Ward Mode (I’m wanting to give Ward Cunningham a potential shoutout).

And I can’t take any credit for the layout, I used an early version that @insanum put together for his gruvbox theme (I think).

Also loving it. Would you post after you’ve updated the Andy/Ward mode? And thanks.

And the github link is now updated for Obsidian version 0.7 !

1 Like

Thanks for the “fix” – loving this style. Kind on the eyes (aging as mine are!) and nice use of color for differentiation. Appreciate the thought and effort you - and others savvy in CSS - put into these themes and then the generosity in making them available and updating them.

1 Like