Color Themes

How to install

Go to Surfingkeys' Options (right click its icon in Chrome), enable Advanced mode and add/replace settings.theme with the one you want.

The original style is at pages/frontend.css. Feel free to add your own below!

Themes

kanagawa

Kanagawa Preview

settings.theme = `
.sk_theme {
	background: #1F1F28;
	color: #DCD7BA;
}
.sk_theme tbody {
	color: #98BB6C;
}
.sk_theme input {
	color: #D9DCE0;
}
.sk_theme .url {
	color: #76946;
}
.sk_theme .annotation {
	color: #957FB8;
}
.sk_theme .omnibar_highlight {
	color: #333;
	background: #DCD7BA;
}
.sk_theme #sk_omnibarSearchResult ul>li:nth-child(odd) {
	background: #2D4F67;
}
.sk_theme #sk_omnibarSearchResult ul>li.focused {
	background: #938AA9;
}`;

Spacemacs

Spacemacs theme preview

settings.theme = `
.sk_theme {
	background: #100a14dd;
	color: #4f97d7;
}
.sk_theme tbody {
	color: #292d;
}
.sk_theme input {
	color: #d9dce0;
}
.sk_theme .url {
	color: #2d9574;
}
.sk_theme .annotation {
	color: #a31db1;
}
.sk_theme .omnibar_highlight {
	color: #333;
	background: #ffff00aa;
}
.sk_theme #sk_omnibarSearchResult ul li:nth-child(odd) {
	background: #5d4d7a55;
}
.sk_theme #sk_omnibarSearchResult ul li.focused {
	background: #5d4d7aaa;
}
.sk_theme #sk_omnibarSearchResult .omnibar_folder {
	color: #a31db1;
}
`;

gruvbox (Dark)

gruvbox-surfingkeys

/* set theme */
settings.theme = `
.sk_theme {
    font-family: Input Sans Condensed, Charcoal, sans-serif;
    font-size: 10pt;
    background: #282828;
    color: #ebdbb2;
}
.sk_theme tbody {
    color: #b8bb26;
}
.sk_theme input {
    color: #d9dce0;
}
.sk_theme .url {
    color: #98971a;
}
.sk_theme .annotation {
    color: #b16286;
}
.sk_theme .omnibar_highlight {
    color: #ebdbb2;
}
.sk_theme #sk_omnibarSearchResult ul li:nth-child(odd) {
    background: #282828;
}
.sk_theme #sk_omnibarSearchResult ul li.focused {
    background: #d3869b;
}
#sk_status, #sk_find {
    font-size: 20pt;
}`;

Solarized Dark

Solarized Dark Preview

settings.theme = `
.sk_theme {
  font-family: Input Sans Condensed, Charcoal, sans-serif;
  font-size: 10pt;
  background: #002B36;
  color: #93A1A1;
}
.sk_theme input {
  color: #93A1A1;
}
.sk_theme .url {
  color: #268BD2;
}
.sk_theme .annotation {
  color: #93A1A1;
}
.sk_theme kbd {
  background: #EEE8D5;
  color: #111;
}
.sk_theme .omnibar_highlight {
  color: #CB4B16;
}
.sk_theme .omnibar_folder {
  color: #2AA198;
}
.sk_theme .omnibar_timestamp {
  color: #657B83;
}
.sk_theme .omnibar_visitcount {
  color: #B58900;
}
.sk_theme .prompt, .sk_theme .resultPage {
  color: #93A1A1;
}
.sk_theme .feature_name {
  color: #859900;
}
.sk_theme .separator {
  color: #859900;
}
.sk_theme #sk_omnibarSearchResult ul li:nth-child(odd) {
  background: #002F3B;
}
.sk_theme #sk_omnibarSearchResult ul li.focused {
  background: #083D4A;
}
#sk_status, #sk_find {
  font-size: 12pt;
}
#sk_keystroke {
  background: #002B36;
}
.expandRichHints span.annotation {
  color: #93A1A1;
}`;

Tomorrow-Night / Nord / Doom One / Monokai

tomorrow_omni nord_omni doom_one monokai

Zenbonse

demo zenbonse

settings.theme = `
.sk_theme {
  font-family: SauceCodePro Nerd Font, Consolas, Menlo, monospace;
  font-size: 10pt;
  background: #f0edec;
  color: #2c363c;
}
.sk_theme tbody {
  color: #f0edec;
}
.sk_theme input {
  color: #2c363c;
}
.sk_theme .url {
  color: #1d5573;
}
.sk_theme .annotation {
  color: #2c363c;
}
.sk_theme .omnibar_highlight {
  color: #88507d;
}
.sk_theme #sk_omnibarSearchResult ul li:nth-child(odd) {
  background: #f0edec;
}
.sk_theme #sk_omnibarSearchResult ul li.focused {
  background: #cbd9e3;
}
#sk_status,
#sk_find {
  font-size: 10pt;
}
`;

demo zenbonse

const hintsCss =
  "font-size: 10pt; font-family: SauceCodePro Nerd Font, Consolas, Menlo, monospace; border: 0px; color:#2c363c; background: initial; background-color: #f0edec;";

api.Hints.style(hintsCss);
api.Hints.style(hintsCss, "text");

Github light

const hintsCss =
  "font-size: 12pt; font-family: JetBrains Mono NL, Cascadia Code, SauceCodePro Nerd Font, Consolas, Menlo, monospace; border: 0px; color: #0366d6; background: initial; background-color: #ffffff";

api.Hints.style(hintsCss);
api.Hints.style(hintsCss, "text");

settings.theme = `
.sk_theme {
  font-family: JetBrains Mono NL, Cascadia Code, SauceCodePro Nerd Font, Consolas, Menlo, monospace;
  font-size: 10pt;
  background: #ffffff;
  color: #24292f;
}
.sk_theme tbody {
  color: #ffffff;
}
.sk_theme input {
  color: #24292f;
}
.sk_theme .url {
  color: #24292f;
}
.sk_theme .annotation {
  color: #24292f;
}
.sk_theme .omnibar_highlight {
  color: #24292f;
}
.sk_theme #sk_omnibarSearchResult ul li:nth-child(odd) {
  background: #ffffff;
}
.sk_theme #sk_omnibarSearchResult ul li.focused {
  background: #0598bc;
}
#sk_status,
#sk_find {
  font-size: 10pt;
}
`;

Rosé Pine

Source code: https://github.com/rose-pine/surfingkeys

Rosé Pine

rose_pine1 rose_pine2 rose_pine3 rose_pine4 rose_pine5 rose_pine6 rose_pine7 rose_pine8 rose_pine9 rose_pine10 rose_pine11 rose_pine12

Rosé Pine Moon

rose_pine_moon_1 rose_pine_moon_2 rose_pine_moon_3 rose_pine_moon_4 rose_pine_moon_5 rose_pine_moon_6 rose_pine_moon_7 rose_pine_moon_8 rose_pine_moon_9 rose_pine_moon_10 rose_pine_moon_11 rose_pine_moon_12

Rosé Pine Dawn

rose_pine_dawn_1 rose_pine_dawn_2 rose_pine_dawn_3 rose_pine_dawn_4 rose_pine_dawn_5 rose_pine_dawn_6 rose_pine_dawn_7 rose_pine_dawn_8 rose_pine_dawn_9 rose_pine_dawn_10 rose_pine_dawn_11 rose_pine_dawn_12