Small improvement over Minimal theme (dim unfocused editor, more obvious sync button)

Custom CSS & Theme Design
1

Just sharing some of my small css quality of life improvement over Minimal theme

gist

/* better contrast for status-bar */
.status-bar{
    color: var(--text-muted);
}

/* better contrast for status bar (sync button) */
:is(.theme-light, .theme-dark) :is(.sync-status-icon.mod-success, .sync-status-icon.mod-working) {
    color: var(--text-muted);
}

/* add nice rotating animation when syncing */
:is(.theme-light, .theme-dark) .sync-status-icon.mod-working {
    animation: rotation 1s infinite linear;
}

/* use red color for failed sync */
:is(.theme-light, .theme-dark) .sync-status-icon.mod-error {
    color: var(--color-red);
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* dim editor that is not in focus useful for multiple tabs/panes */
:is(.theme-light, .theme-dark):has(.cm-focused) .cm-editor:not(.cm-focused) {
    background-color: var(--bg2);
    --active-line-bg: rgba(0,0,0,0.0);
    transition: background-color 0.2s;
}

Essentially it does the following

  1. use better contrast for sync button (use text-muted instead of text-faint)
  2. add rotating animation when sync is working
  3. sync button will be shown in red if there is any error
  4. when splitting editor to multiple panel, unfocused editor will have slight dim

theme

2

Minor update for the syncing icon. Turns out rotating doesn’t work well in mobile, it just looks weird, so I replace it with blinking highlight animation instead

/* better contrast for status-bar */
.status-bar{
    color: var(--text-muted);
}

/* better contrast for status bar (sync button) */
:is(.theme-light, .theme-dark) :is(.sync-status-icon.mod-success, .sync-status-icon.mod-working) {
    color: var(--text-muted);
}

/* add a blinking highlight animation when syncing */
:is(.theme-light, .theme-dark) .sync-status-icon.mod-working {
    animation: color 0.5s infinite linear alternate;
}

/* use red color for failed sync */
:is(.theme-light, .theme-dark) .sync-status-icon.mod-error {
    color: var(--color-red);
}

@keyframes color {
    from {
        color: var(--text-muted);
    }
    to {
        color: var(--ui3);
        filter: 
            drop-shadow(0 0 0.25px var(--ui3));
    }
}

/* dim editor that is not in focus useful for multiple tabs/panes */
:is(.theme-light, .theme-dark):has(.cm-focused) .cm-editor:not(.cm-focused) {
    background-color: var(--bg2);
    --active-line-bg: rgba(0,0,0,0.0);
    transition: background-color 0.2s;
}
3

great, the dimming is just what i looked for, thanks!

4

More update, this one fixes the issue where it doesn’t handle Live Preview + Table properly. Managed to find a much simpler selector

/* better contrast for status-bar */
.status-bar {
    color: var(--tx2);
}

/* better contrast for status bar (sync button) */
:is(.theme-light, .theme-dark) :is(.sync-status-icon.mod-success, .sync-status-icon.mod-working) {
    color: var(--tx2);
}

/* add a blinking highlight animation when syncing */
:is(.theme-light, .theme-dark) .sync-status-icon.mod-working {
    animation: color 0.25s infinite linear alternate;
}

/* use red color for failed sync */
:is(.theme-light, .theme-dark) .sync-status-icon.mod-error {
    color: var(--color-red);
}

@keyframes color {
    from {
        color: var(--tx2);
    }

    to {
        color: var(--ui3);
        filter: drop-shadow(0 0 0.2px var(--ui3));
    }
}

/* dim editor that is not in focus useful for multiple tabs/panes */
.workspace-leaf:not(.mod-active) .cm-editor {
    background-color: color-mix(in srgb, var(--bg3) 30%, var(--bg1) 70%);
    --active-line-bg: rgba(0, 0, 0, 0);
    transition: background-color 0.1s;
}

/* specific for my use case - make image to be block display and always centered */
.internal-embed img:not([width]),
.internal-embed audio,
.internal-embed video {
    display: block;
    margin: auto;
}