Skip to content

Instantly share code, notes, and snippets.

@nerdius
Last active September 28, 2023 20:19
Show Gist options
  • Save nerdius/63d99e826a63689d6182130bae299eb0 to your computer and use it in GitHub Desktop.
Save nerdius/63d99e826a63689d6182130bae299eb0 to your computer and use it in GitHub Desktop.
Arc Dark theme for styling Vimium link hints
/*
Arc Dark theme for styling Vimium link hints
By Giorgi Gzirishvili (@giogziro95). This code is in the public domain.
To use:
1. Copy the code.
2. Go to the Vimium options.
3. Click Show Advanced Options.
4. Under Advanced Options, scroll down to CSS for link hints.
5. Paste the code in the text field.
6. Click Save Changes.
7. Go to the website of your choice (or, if you have it open already, reload it) and check out the results.
*/
/* Arc Dark theme */
/* Link hint boxes */
div > .vimiumHintMarker {
background: #383c4a;
font-size: 12px;
border: 0.25em solid #383c4a;
border-radius: 0.68em;
box-shadow: 0em 0.1em 0.6em 0.1em rgba(0, 0, 0, 0.4);
}
/* Link hint text */
div > .vimiumHintMarker span {
color: #e2e3e7;
font-size: inherit;
text-shadow: none;
}
/* Link hint matching characters */
div > .vimiumHintMarker > .matchingCharacter {
color: #5294e2;
}
@nerdius
Copy link
Author

nerdius commented Jul 18, 2017

Preview

Vimium link hints

Vimium link hints matching

@shibumi
Copy link

shibumi commented Mar 26, 2019

Hi, do you have the same color scheme for the vimium omnibox?

@nerdius
Copy link
Author

nerdius commented May 22, 2019

@shibumi, I don't have one, sorry. I didn't even know that the omnibox was themeable.

@shibumi
Copy link

shibumi commented May 22, 2019

@giogziro95

Here is my configuration. It has color changes for the vomnibox as well:

/* Arc Dark theme */

/* Link hint boxes */
div > .vimiumHintMarker {
  background: #383c4a;
  font-size: 12px;
  border: 0.25em solid #383c4a;
  border-radius: 0.68em;
  box-shadow: 0em 0.1em 0.6em 0.1em rgba(0, 0, 0, 0.4);
}

/* Link hint text */
div > .vimiumHintMarker span {
  color: #e2e3e7;
  font-size: inherit;
  text-shadow: none;
}

/* Link hint matching characters */
div > .vimiumHintMarker > .matchingCharacter {
  color: #5294e2;
}

input#vomnibarInput.vimiumReset {
	color: #FFF !important;
  background-color: #111 !important;
}

#vomnibar {
   border-color: black;
   background-color: black;
}

#vomnibar .vomnibarSearchArea {
   background-color: #222;
   border-bottom: #3f3f3f;
}

#vomnibar input {
   border-color: #393939;
}

#vomnibar ul {
    background-color: #222;
}

#vomnibar li {
   border-bottom: #3f3f3f;
}

#vomnibar li .vomnibarUrl {
   color: #5294e2;
}

#vomnibar li .vomnibarMatch {
   color: white;
}

#vomnibar li.vomnibarSelected {
    background-color: #181D24;
}

#vomnibar li em .vomnibarMatch, #vomnibar li .vomnibarTitle .vomnibarMatch {
   color: white;
}

#vomnibar li em, #vomnibar li .vomnibarTitle {
   color: #ddd;
}

@nerdius
Copy link
Author

nerdius commented May 28, 2019

@shibumi, thanks! I'll consider supplementing my gist as well.

@allmeta
Copy link

allmeta commented Sep 8, 2019

It's a bit bugged with iframes, I'm sure you've noticed.
Probably hard to fix though
image

@nerdius
Copy link
Author

nerdius commented Sep 9, 2019

@allmeta, yeah, I'm aware; however, I can't fix it at the style-level. You should consider reporting it to Vimium maintainers instead. (Just search through the known issues beforehand to make sure it's not already reported so you don't create a duplicate.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment