Skip to content

Instantly share code, notes, and snippets.

@mauromotion
Last active January 26, 2025 23:39
Show Gist options
  • Select an option

  • Save mauromotion/1c0da54322b36c9b79d1b779e7431258 to your computer and use it in GitHub Desktop.

Select an option

Save mauromotion/1c0da54322b36c9b79d1b779e7431258 to your computer and use it in GitHub Desktop.
Vimium theme using the Poimandres color scheme
/* Poimandres Palette */
:root {
--vimium-pink: #fcc5e9;
--vimium-red: #d0679d;
--vimium-green: #5de4c7;
--vimium-blue: #89ddff;
--vimium-yellow: #fffac2;
--vimium-text: #e4f0fb;
--vimium-surface2: #a6accd;
--vimium-surface0: #767c9d;
--vimium-base: #1b1e28;
--vimium-mantle: #1e1e2e;
--vimium-crust: #1a1b26;
}
#vimiumHintMarkerContainer div.internalVimiumHintMarker,
#vimiumHintMarkerContainer div.vimiumHintMarker {
padding: 3px 4px;
background: var(--vimium-yellow);
border: 1;
border-color: var(--vimium-mantle);
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.12),
0 1px 2px rgba(0, 0, 0, 0.24);
}
#vimiumHintMarkerContainer div span {
color: var(--vimium-mantle) !important;
text-shadow: none;
}
#vimiumHintMarkerContainer div > .matchingCharacter {
opacity: 1;
}
#vimiumHintMarkerContainer div > .matchingCharacter ~ span {
color: var(--vimium-surface2);
}
#vomnibar {
background: var(--vimium-base);
border: 2px solid var(--vimium-green);
animation: show 200ms cubic-bezier(0, 0, 0.2, 1) forwards;
max-height: calc(100vh - 70px);
overflow: hidden;
}
@keyframes show {
0% {
transform: translateY(50px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
#vomnibar input {
color: var(--vimium-text);
background: var(--vimium-base);
border: none;
height: unset;
padding: 16px 30px;
}
#vomnibar .vomnibarSearchArea {
border: none;
padding: unset;
background: var(--vimium-base);
}
#vomnibar ul {
padding: 0;
margin: 0;
background: var(--vimium-base);
border-top: 1px solid var(--vimium-surface0);
}
#vomnibar li {
padding: 10px;
border-bottom: 1px solid var(--vimium-surface0);
}
#vomnibar li .vomnibarTopHalf,
#vomnibar li .vomnibarBottomHalf {
padding: 3px 0;
}
#vomnibar li .vomnibarSource {
color: var(--vimium-yellow);
}
#vomnibar li em,
#vomnibar li .vomnibarTitle {
color: var(--vimium-text);
font-weight: bold;
}
#vomnibar li .vomnibarUrl {
color: var(--vimium-blue);
}
#vomnibar li .vomnibarMatch {
color: var(--vimium-green);
font-weight: bold;
}
#vomnibar li .vomnibarTitle .vomnibarMatch {
color: var(--vimium-blue);
}
#vomnibar li.vomnibarSelected {
background-color: var(--vimium-surface0);
}
div.vimiumHUD {
background: var(--vimium-base);
border: none;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.12),
0 1px 2px rgba(0, 0, 0, 0.24);
}
div.vimiumHUD span#hud-find-input,
div.vimiumHUD .vimiumHUDSearchAreaInner {
color: var(--vimium-text);
}
div.vimiumHUD .hud-find {
background-color: var(--vimium-base);
border: none;
}
div.vimiumHUD .vimiumHUDSearchArea {
background-color: var(--vimium-base);
}
body.vimiumBody,
.vimiumBody {
background-color: var(--vimium-base) !important;
}
.vimiumBody #footerWrapper,
#userDefinedLinkHintCss,
#scrollStepSize,
#linkHintNumbers,
#newTabUrl,
#nextPatterns,
#previousPatterns,
#searchUrl,
#linkHintCharacters,
#searchEngines,
#keyMappings,
#uploadBackup {
color: var(--vimium-text) !important;
background-color: var(--vimium-mantle);
}
.vimiumBody #footer,
.vimiumBody .remove,
input[name="pattern"],
input[name="passKeys"],
#uploadBackup {
background-color: var(--vimium-mantle) !important;
color: var(--vimium-text) !important;
}
body.vimiumBody input {
border-color: var(--vimium-crust);
}
body.vimiumBody a {
color: var(--vimium-yellow);
}
body.vimiumBody .exclusionHeaderText,
body.vimiumBody .example,
body.vimiumBody .caption,
body.vimiumBody header,
body.vimiumBody textarea,
body.vimiumBody input,
body.vimiumBody label {
color: var(--vimium-text) !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment