Vimium-C TokyoNight Moon Theme [version 1.99.997 for FireFox]

tokyonight-moon.css

/* #ui */
* {
/*insertroot*/
  --font-size: 17px;
  --font-size-link: 12px;
  --font-weight: normal;
  --font: JetBrainsMono Nerd Font Mono, monospace;
  --padding: 0px;
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

  /* ----------  DAY THEME  ---------- */
  --bg: #e1e2e7;
  --fg: #3760bf;
  --accent-fg: #6172b0;
  --hover-bg: #c4c8da;
  --border: #587539;
  --title: #2e7de9;
  --title-accent: #007197;
  --link: #8c6c3e;
  --link-accent: #f52a65;
  
  /* ---------- NIGHT THEME ---------- */
  --nbg: #222436; /* bg */
  --nfg: #c8d3f5; /* fg */
  --naccent-fg: #c8d3f5; /* fg */
  --nhover-bg: #1e2030;
  --nborder: #c3e88d; /* green */
  --ntitle: #3e68d7; /* blue0 */
  --ntitle-accent: #65bcff; /* blue1 */
  --nlink: #4fd6be; /* green1 */
  --nlink-accent: #ff007c;

  

  font-family: var(--font);
  font-size: var(--font-size-link);
}

/* HUD */
.HUD {
  border-radius: 0;
  text-transform: lowercase;
  color: var(--title);
  max-width: 420px;
  min-width: unset;
  line-height: 20px;
  align-items: center;
  padding: 10px;
}

.HUD.D {
  color: var(--ntitle);
}

.HUD:after {
  background: var(--bg);
  border: var(--border);
}

.HUD.D:after {
  background: var(--nbg);
  border: var(--nborder);
}

.HUD.UI {
  min-width: 380px;
  align-items: unset;
}

/* HINTS */
.LH {
  color: var(--fg);
  border: 1px solid var(--border);
  background: var(--bg);
  box-shadow: var(--shadow);
}

.D .LH {
  color: var(--nfg);
  border: 1px solid var(--nborder);
  background: var(--nbg);
  box-shadow: var(--shadow);
}

.MC {
  color: var(--title);
}

.D .MC {
  color: var(--ntitle);
}


/* #omni */
* {
/*insertroot*/
  --font-size: 17px;
  --font-size-link: 12px;
  --font-weight: normal;
  --font: JetBrainsMono Nerd Font Mono, monospace;
  --padding: 0px;
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

  /* ----------  DAY THEME  ---------- */
  --bg: #e1e2e7;
  --fg: #3760bf;
  --accent-fg: #6172b0;
  --hover-bg: #c4c8da;
  --border: #587539;
  --title: #2e7de9;
  --title-accent: #007197;
  --link: #8c6c3e;
  --link-accent: #f52a65;
  
  /* ---------- NIGHT THEME ---------- */
  --nbg: #222436; /* bg */
  --nfg: #c8d3f5; /* fg */
  --naccent-fg: #c8d3f5; /* fg */
  --nhover-bg: #1e2030;
  --nborder: #c3e88d; /* green */
  --ntitle: #3e68d7; /* blue0 */
  --ntitle-accent: #65bcff; /* blue1 */
  --nlink: #4fd6be; /* green1 */
  --nlink-accent: #ff007c;



  font-family: var(--font);
  /*font-size: var(--font-size);*/
}

body {
  animation: show 200ms cubic-bezier(0, 0, 0.2, 1) forwards;
  box-shadow: var(--shadow);
  border-radius: 0;
}

body::after {
  border-radius: 0;
  border: none;
}

body.has-dark{

}

/* Animate Slide in */
@keyframes show {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

#toolbar {
  top: 10px;
  right: 14px;
  opacity: 0;
}

#toolbar:hover {
  opacity: 1;
}

#bar, #input, #list {
  background: var(--bg);
  font-weight: var(--font-weight);
}
.has-dark #bar, .has-dark #input, .has-dark #list {
  background: var(--nbg);
}

#bar{
  padding: 10px;
/*padding: var(--padding);*/
  border-bottom: none;
}

#bar::before{
/*for hint or content icon before typing*/
  content: "";
  position: absolute;
  top: 8px;
  left: 24px;
  z-index: 300;
  font-weight: bold;
  font-size: 30px;
  color: var(--fg);
}

.has-dark #bar::before{
  color: var(--nfg);
}

#input {
  padding: var(--padding) 38px;
  color: var(--title);
  border: none;
  box-shadow: none;
}

.has-dark #input {
  color: var(--ntitle);
}

.item {
  border-bottom: 0;
}

.item .icon {
  width: 24px;
  height: 24px;
  padding-right: unset;
  margin-right: 10px;
  margin-top: 5px;
  background-position: bottom right;
  fill: var(--accent-fg);
}

.has-dark .item .icon {
  fill: var(--naccent-fg);
}

.item .icon path {
  opacity: 0.45;
  position: absolute;
  z-index: -1;
  transform-origin: 0px 0px;
  transform: scale(0.75);
}

.item.s,
.item:hover {
  background-color: var(--hover-bg);
  border: 3px rgba(0, 0, 0, 0.02) solid;
  cursor: pointer;
}

.has-dark .item.s,
.has-dark .item:hover {
  background-color: var(--nhover-bg);
}

.item .top {
  color: var(--title);
  position: relative;
  height: 30px;
}

.has-dark .item .top {
  color: var(--ntitle);
}

.item .top .title {
  font-size: var(--font-size);
  line-height: 10px;
  margin-top: 2px;
}

.item .top .title match {
  color: var(--title-accent);
}

.has-dark .item .top .title match {
  color: var(--ntitle-accent);
}

.item .top .title:empty::after {
  content: "<blank>";
}

.item .bottom {
  margin-top: -14px;
  padding-left: 14px;
}

.item .bottom a {
  color: var(--link);
  font-size: var(--font-size-link);
}

.has-dark .item .bottom a {
  color: var(--nlink);
}

.item .bottom a match {
  color: var(--nlink-accent);
  text-decoration: none;
}

.has-dark .item .bottom a match {
  color: var(--nlink-accent);
}

/* #find */
* {
/*insertroot*/
  --font-size: 17px;
  --font-size-link: 12px;
  --font-weight: normal;
  --font: JetBrainsMono Nerd Font Mono, monospace;
  --padding: 0px;
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

  /* ----------  DAY THEME  ---------- */
  --bg: #e1e2e7;
  --fg: #3760bf;
  --accent-fg: #6172b0;
  --hover-bg: #c4c8da;
  --border: #587539;
  --title: #2e7de9;
  --title-accent: #007197;
  --link: #8c6c3e;
  --link-accent: #f52a65;
  
  /* ---------- NIGHT THEME ---------- */
  --nbg: #222436; /* bg */
  --nfg: #c8d3f5; /* fg */
  --naccent-fg: #c8d3f5; /* fg */
  --nhover-bg: #1e2030;
  --nborder: #c3e88d; /* green */
  --ntitle: #3e68d7; /* blue0 */
  --ntitle-accent: #65bcff; /* blue1 */
  --nlink: #4fd6be; /* green1 */
  --nlink-accent: #ff007c;



  font-family: var(--font);
  /*font-size: var(--font-size);*/
}


.r {
  color: var(--title-accent);
  background: var(--bg);
  border: none;
  box-shadow: none;
}

.r.D {
  color: var(--ntitle-accent);
  background: var(--nbg);
}

#i {
  color: var(--link-accent);
}

.D #i {
  color: var(--nlink-accent);
}


/* #find:host */


/* #find:selection */

Day Theme

Moon Theme

Hints

Search Bar

Recommended Font

"JetBrainsMono Nerd Font Mono", download from Nerd Fonts.
Just Install the font and restart the browser and it should work.