Theme Examples

Everforest Medium

/* Everforest Medium Palette */

:root {
    --vimium-text: #5c6a72;
    --vimium-hint: #8da101;
    --vimium-match: #35a77c;
    --vimium-title: #3a94c5;
    --vimium-title-match: #3382ac;
    --vimium-border: #e0dcc7;
    --vimium-input-selection: #eaedc8;
    --vimium-candidate-selection: #f0f1d2;
    --vimium-bg-base: #fdf6e3;
    --vimium-bg-input: #f4f0d9;
    --vimium-unimportant: #939f91;
    --vimium-shadow: 0 1px 3px rgba(255, 255, 255, 0.12), 0 1px 2px rgba(255, 255, 255, 0.24);
}

[data-vimium-theme="dark"] {
    --vimium-text: #d3c6aa;
    --vimium-hint: #a7c080;
    --vimium-match: #8faa60;
    --vimium-title: #7fbbb3;
    --vimium-title-match: #8dd0c7;
    --vimium-border: #4f585e;
    --vimium-input-selection: #543a48;
    --vimium-candidate-selection: #425047;
    --vimium-bg-base: #2d353b;
    --vimium-bg-input: #343f44;
    --vimium-unimportant: #9da9a0;
    --vimium-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

#vimiumHintMarkerContainer div.internalVimiumHintMarker,
#vimiumHintMarkerContainer div.vimiumHintMarker {
    padding: 3px 4px;
    background: var(--vimium-hint);
    border: 1px solid var(--vimium-border);
    box-shadow: var(--vimium-shadow);
}

#vimiumHintMarkerContainer div span {
    color: var(--vimium-border) !important;
    text-shadow: none;
}

#vimiumHintMarkerContainer div > .matchingCharacter {
    opacity: 1;
}

#vomnibar {
    background: var(--vimium-bg-base);
    border: 2px solid var(--vimium-title);
    max-height: calc(100vh - 70px);
    max-width: calc(100vw - 70px);
    overflow: auto;
}

#vomnibar input {
    color: var(--vimium-text);
    background: var(--vimium-bg-input);
    border: none;
    height: unset;
    padding: 12px 8px;
    border-bottom: 1px solid var(--vimium-border);
}

#vomnibar input::selection {
    background: var(--vimium-input-selection);
}

#vomnibar .vomnibarSearchArea {
    border: none;
    padding: unset;
    background: var(--vimium-bg-base);
}

#vomnibar ul {
    padding: 0;
    margin: 0;
    background: var(--vimium-bg-base);
    border-top: 1px solid var(--vimium-border);
}

#vomnibar li {
    padding: 10px;
    border-bottom: 1px solid var(--vimium-border);
}

#vomnibar li .vomnibarTopHalf,
#vomnibar li .vomnibarBottomHalf {
    padding: 3px 0;
}

#vomnibar li .vomnibarSource {
    color: var(--vimium-unimportant);
}

#vomnibar li em,
#vomnibar li .vomnibarTitle {
    color: var(--vimium-title);
}

#vomnibar li .vomnibarUrl {
    color: var(--vimium-text);
}

#vomnibar li .vomnibarMatch {
    color: var(--vimium-match);
    font-weight: bold;
}

#vomnibar li .vomnibarMatch:not(.vomnibarTitle .vomnibarMatch) {
    font-style: italic;
}

#vomnibar li .vomnibarTitle .vomnibarMatch {
    color: var(--vimium-title-match);
}

#vomnibar li.vomnibarSelected {
    background-color: var(--vimium-candidate-selection);
}

div.vimiumHUD {
    background: var(--vimium-bg-base);
    border: none;
    box-shadow: var(--vimium-shadow);
}

div.vimiumHUD span#hud-find-input,
div.vimiumHUD .vimiumHUDSearchAreaInner {
    color: var(--vimium-text);
}

div.vimiumHUD .hud-find {
    background-color: var(--vimium-bg-base);
    border: none;
}

div.vimiumHUD .vimiumHUDSearchArea {
    background-color: var(--vimium-bg-input);
}