From 1afbb95e057e779f28e473bc39af8a2e40e45dfb Mon Sep 17 00:00:00 2001
From: He4eT <He4eT@oddsquat.org>
Date: Thu, 25 May 2023 02:47:04 +0300
Subject: [PATCH] Themes: add Monkeytype themes

---
 src/components/Player/playerHandlers.js |    2 +-
 src/themes/_generator.js                |   27 +
 src/themes/themeList.js                 |  179 ++++
 src/themes/themes.css                   | 1154 ++++++++++++++++++++++-
 src/themes/themes.js                    |   15 +-
 5 files changed, 1353 insertions(+), 24 deletions(-)
 create mode 100644 src/themes/_generator.js
 create mode 100644 src/themes/themeList.js

diff --git a/src/components/Player/playerHandlers.js b/src/components/Player/playerHandlers.js
index 4adffa9..cef383f 100644
--- a/src/components/Player/playerHandlers.js
+++ b/src/components/Player/playerHandlers.js
@@ -54,7 +54,7 @@ export const unhandledRejectionHandler = (onExit) => (event) => {
   if (event.reason.name === 'ExitStatus' || event.reason.message === 'Program terminated with exit(0)') {
     onExit()
   } else {
-    console.error('Unhandled rejection (promise: ', event.promise, ', reason: ', event.reason, ').');
+    console.error('Unhandled rejection (promise: ', event.promise, ', reason: ', event.reason, ').')
   }
   event.preventDefault()
 }
diff --git a/src/themes/_generator.js b/src/themes/_generator.js
new file mode 100644
index 0000000..ac396db
--- /dev/null
+++ b/src/themes/_generator.js
@@ -0,0 +1,27 @@
+/* @see https://github.com/monkeytypegame/monkeytype/blob/master/frontend/static/themes/_list.json */
+const monkeyTypesThemes = [
+  /* Paste json here! */
+].map((theme) => theme)
+  .filter((theme) => ![
+    'dark', 'solarized_dark', 'solarized_light',
+  ].includes(theme.name))
+  .sort((a, b) => a.name.localeCompare(b.name))
+
+const names = monkeyTypesThemes
+  .map(({name}) => `'${name}',`).join('\n')
+
+const css = monkeyTypesThemes
+  .map((theme) => [
+    `.${theme.name} {`,
+    `  --bg-color: ${theme.bgColor};`,
+    `  --main-color: ${theme.textColor};`,
+    `  --accent-color: ${theme.mainColor};`,
+    `  --input-color: ${theme.subColor};`,
+    '}\n'].join('\n'))
+  .join('\n')
+
+console.log('/* List*/')
+console.log(names)
+
+console.log('/* CSS */')
+console.log(css)
diff --git a/src/themes/themeList.js b/src/themes/themeList.js
new file mode 100644
index 0000000..800d03e
--- /dev/null
+++ b/src/themes/themeList.js
@@ -0,0 +1,179 @@
+export const themes = [
+  'light',
+  'dim',
+  'dark',
+  /* Solarized */
+  'solarized-light',
+  'solarized-dark',
+  /* Original */
+  'emo',
+  'nord',
+  'redrum',
+  'toxin',
+  'valve',
+  'wasp',
+  /* Monkeytype */
+  /* @see https://github.com/monkeytypegame/monkeytype/blob/master/frontend/static/themes/_list.json */
+  'a8008',
+  'a80s_after_dark',
+  'a9009',
+  'aether',
+  'alduin',
+  'alpine',
+  'arch',
+  'aurora',
+  'beach',
+  'bento',
+  'bingsu',
+  'bliss',
+  'blue_dolphin',
+  'blueberry_dark',
+  'blueberry_light',
+  'botanical',
+  'bouquet',
+  'breeze',
+  'bushido',
+  'cafe',
+  'camping',
+  'carbon',
+  'catppuccin',
+  'chaos_theory',
+  'cheesecake',
+  'cherry_blossom',
+  'comfy',
+  'copper',
+  'creamsicle',
+  'cyberspace',
+  'dark_magic_girl',
+  'dark_note',
+  'darling',
+  'deku',
+  'desert_oasis',
+  'dev',
+  'diner',
+  'dino',
+  'dmg',
+  'dollar',
+  'dots',
+  'dracula',
+  'drowning',
+  'dualshot',
+  'earthsong',
+  'everblush',
+  'evil_eye',
+  'ez_mode',
+  'fire',
+  'fledgling',
+  'fleuriste',
+  'froyo',
+  'frozen_llama',
+  'fruit_chew',
+  'fundamentals',
+  'future_funk',
+  'godspeed',
+  'graen',
+  'grand_prix',
+  'gruvbox_dark',
+  'gruvbox_light',
+  'hammerhead',
+  'hanok',
+  'hedge',
+  'honey',
+  'horizon',
+  'husqy',
+  'iceberg_dark',
+  'iceberg_light',
+  'ishtar',
+  'iv_clover',
+  'iv_spade',
+  'joker',
+  'laser',
+  'lavender',
+  'leather',
+  'lil_dragon',
+  'lime',
+  'luna',
+  'magic_girl',
+  'mashu',
+  'matcha_moccha',
+  'material',
+  'matrix',
+  'menthol',
+  'metaverse',
+  'metropolis',
+  'mexican',
+  'miami',
+  'miami_nights',
+  'midnight',
+  'milkshake',
+  'mint',
+  'mizu',
+  'modern_dolch',
+  'modern_dolch_light',
+  'modern_ink',
+  'monokai',
+  'moonlight',
+  'mountain',
+  'mr_sleeves',
+  'ms_cupcakes',
+  'muted',
+  'nautilus',
+  'nebula',
+  'night_runner',
+  'nord_light',
+  'norse',
+  'oblivion',
+  'olive',
+  'olivia',
+  'onedark',
+  'our_theme',
+  'paper',
+  'passion_fruit',
+  'pastel',
+  'peach_blossom',
+  'peaches',
+  'pink_lemonade',
+  'pulse',
+  'purpurite',
+  'red_dragon',
+  'red_samurai',
+  'repose_dark',
+  'repose_light',
+  'retro',
+  'retrocast',
+  'rose_pine',
+  'rose_pine_dawn',
+  'rose_pine_moon',
+  'rudy',
+  'ryujinscales',
+  'serika',
+  'serika_dark',
+  'sewing_tin',
+  'sewing_tin_light',
+  'shadow',
+  'shoko',
+  'slambook',
+  'snes',
+  'soaring_skies',
+  'sonokai',
+  'stealth',
+  'strawberry',
+  'striker',
+  'superuser',
+  'sweden',
+  'taro',
+  'terminal',
+  'terra',
+  'terror_below',
+  'tiramisu',
+  'trackday',
+  'trance',
+  'tron_orange',
+  'vaporwave',
+  'viridescent',
+  'voc',
+  'vscode',
+  'watermelon',
+  'wavez',
+  'witch_girl',
+]
diff --git a/src/themes/themes.css b/src/themes/themes.css
index fd889ea..8f074ed 100644
--- a/src/themes/themes.css
+++ b/src/themes/themes.css
@@ -36,7 +36,7 @@ body {
   --input-color: hsl(0, 0%, 100%, 1);
 }
 
-/* solarized */
+/* Solarized */
 
 .solarized-light {
   --bg-color: #eee8d5;
@@ -52,7 +52,7 @@ body {
   --input-color: #2aa198;
 }
 
-/* named */
+/* Original */
 
 .emo {
   --bg-color: #4d4d4d;
@@ -61,13 +61,6 @@ body {
   --input-color: #ff77aa;
 }
 
-.nord {
-  --bg-color: #50586c;
-  --main-color: #dce2f0;
-  --accent-color: #dce2f0;
-  --input-color: #dce2f0;
-}
-
 .redrum {
   --bg-color: #000000;
   --main-color: #ff0000;
@@ -95,3 +88,1146 @@ body {
   --accent-color: #292826;
   --input-color: #292826;
 }
+
+/* Monkeytype */
+
+.a8008 {
+  --bg-color: #333a45;
+  --main-color: #e9ecf0;
+  --accent-color: #f44c7f;
+  --input-color: #939eae;
+}
+
+.a80s_after_dark {
+  --bg-color: #1b1d36;
+  --main-color: #e1e7ec;
+  --accent-color: #fca6d1;
+  --input-color: #99d6ea;
+}
+
+.a9009 {
+  --bg-color: #eeebe2;
+  --main-color: #080909;
+  --accent-color: #080909;
+  --input-color: #99947f;
+}
+
+.aether {
+  --bg-color: #101820;
+  --main-color: #eedaea;
+  --accent-color: #eedaea;
+  --input-color: #cf6bdd;
+}
+
+.alduin {
+  --bg-color: #1c1c1c;
+  --main-color: #f5f3ed;
+  --accent-color: #dfd7af;
+  --input-color: #444444;
+}
+
+.alpine {
+  --bg-color: #6c687f;
+  --main-color: #ffffff;
+  --accent-color: #ffffff;
+  --input-color: #9994b8;
+}
+
+.arch {
+  --bg-color: #0c0d11;
+  --main-color: #f6f5f5;
+  --accent-color: #7ebab5;
+  --input-color: #454864;
+}
+
+.aurora {
+  --bg-color: #011926;
+  --main-color: #fff;
+  --accent-color: #00e980;
+  --input-color: #245c69;
+}
+
+.beach {
+  --bg-color: #ffeead;
+  --main-color: #5b7869;
+  --accent-color: #96ceb4;
+  --input-color: #ffcc5c;
+}
+
+.bento {
+  --bg-color: #2d394d;
+  --main-color: #fffaf8;
+  --accent-color: #ff7a90;
+  --input-color: #4a768d;
+}
+
+.bingsu {
+  --bg-color: #b8a7aa;
+  --main-color: #ebe6ea;
+  --accent-color: #83616e;
+  --input-color: #48373d;
+}
+
+.bliss {
+  --bg-color: #262727;
+  --main-color: #fff;
+  --accent-color: #f0d3c9;
+  --input-color: #665957;
+}
+
+.blue_dolphin {
+  --bg-color: #003950;
+  --main-color: #82eaff;
+  --accent-color: #ffcefb;
+  --input-color: #00e4ff;
+}
+
+.blueberry_dark {
+  --bg-color: #212b42;
+  --main-color: #91b4d5;
+  --accent-color: #add7ff;
+  --input-color: #5c7da5;
+}
+
+.blueberry_light {
+  --bg-color: #dae0f5;
+  --main-color: #678198;
+  --accent-color: #506477;
+  --input-color: #92a4be;
+}
+
+.botanical {
+  --bg-color: #7b9c98;
+  --main-color: #eaf1f3;
+  --accent-color: #eaf1f3;
+  --input-color: #495755;
+}
+
+.bouquet {
+  --bg-color: #173f35;
+  --main-color: #e9e0d2;
+  --accent-color: #eaa09c;
+  --input-color: #408e7b;
+}
+
+.breeze {
+  --bg-color: #e8d5c4;
+  --main-color: #1b4c5e;
+  --accent-color: #7d67a9;
+  --input-color: #3a98b9;
+}
+
+.bushido {
+  --bg-color: #242933;
+  --main-color: #f6f0e9;
+  --accent-color: #ec4c56;
+  --input-color: #596172;
+}
+
+.cafe {
+  --bg-color: #ceb18d;
+  --main-color: #14120f;
+  --accent-color: #14120f;
+  --input-color: #d4d2d1;
+}
+
+.camping {
+  --bg-color: #faf1e4;
+  --main-color: #3c403b;
+  --accent-color: #618c56;
+  --input-color: #c2b8aa;
+}
+
+.carbon {
+  --bg-color: #313131;
+  --main-color: #f5e6c8;
+  --accent-color: #f66e0d;
+  --input-color: #616161;
+}
+
+.catppuccin {
+  --bg-color: #1e1e2e;
+  --main-color: #d9e0ee;
+  --accent-color: #abe9b3;
+  --input-color: #575268;
+}
+
+.chaos_theory {
+  --bg-color: #141221;
+  --main-color: #dde5ed;
+  --accent-color: #fd77d7;
+  --input-color: #676e8a;
+}
+
+.cheesecake {
+  --bg-color: #fdf0d5;
+  --main-color: #3a3335;
+  --accent-color: #8e2949;
+  --input-color: #d91c81;
+}
+
+.cherry_blossom {
+  --bg-color: #323437;
+  --main-color: #d1d0c5;
+  --accent-color: #d65ccc;
+  --input-color: #787d82;
+}
+
+.comfy {
+  --bg-color: #4a5b6e;
+  --main-color: #f5efee;
+  --accent-color: #f8cdc6;
+  --input-color: #9ec1cc;
+}
+
+.copper {
+  --bg-color: #442f29;
+  --main-color: #e7e0de;
+  --accent-color: #b46a55;
+  --input-color: #7ebab5;
+}
+
+.creamsicle {
+  --bg-color: #ff9869;
+  --main-color: #fcfcf8;
+  --accent-color: #fcfcf8;
+  --input-color: #ff661f;
+}
+
+.cyberspace {
+  --bg-color: #181c18;
+  --main-color: #c2fbe1;
+  --accent-color: #00ce7c;
+  --input-color: #9578d3;
+}
+
+.dark_magic_girl {
+  --bg-color: #091f2c;
+  --main-color: #a288d9;
+  --accent-color: #f5b1cc;
+  --input-color: #93e8d3;
+}
+
+.dark_note {
+  --bg-color: #1f1f1f;
+  --main-color: #d2dff4;
+  --accent-color: #f2c17b;
+  --input-color: #768f95;
+}
+
+.darling {
+  --bg-color: #fec8cd;
+  --main-color: #ffffff;
+  --accent-color: #ffffff;
+  --input-color: #a30000;
+}
+
+.deku {
+  --bg-color: #058b8c;
+  --main-color: #f7f2ea;
+  --accent-color: #b63530;
+  --input-color: #255458;
+}
+
+.desert_oasis {
+  --bg-color: #fff2d5;
+  --main-color: #332800;
+  --accent-color: #d19d01;
+  --input-color: #0061fe;
+}
+
+.dev {
+  --bg-color: #1b2028;
+  --main-color: #ccccb5;
+  --accent-color: #23a9d5;
+  --input-color: #4b5975;
+}
+
+.diner {
+  --bg-color: #537997;
+  --main-color: #dfdbc8;
+  --accent-color: #c3af5b;
+  --input-color: #445c7f;
+}
+
+.dino {
+  --bg-color: #ffffff;
+  --main-color: #1d221f;
+  --accent-color: #40d672;
+  --input-color: #d5d5d5;
+}
+
+.dmg {
+  --bg-color: #dadbdc;
+  --main-color: #414141;
+  --accent-color: #ae185e;
+  --input-color: #3846b1;
+}
+
+.dollar {
+  --bg-color: #e4e4d4;
+  --main-color: #555a56;
+  --accent-color: #6b886b;
+  --input-color: #8a9b69;
+}
+
+.dots {
+  --bg-color: #121520;
+  --main-color: #fff;
+  --accent-color: #fff;
+  --input-color: #676e8a;
+}
+
+.dracula {
+  --bg-color: #282a36;
+  --main-color: #f8f8f2;
+  --accent-color: #bd93f9;
+  --input-color: #6272a4;
+}
+
+.drowning {
+  --bg-color: #191826;
+  --main-color: #9393a7;
+  --accent-color: #4a6fb5;
+  --input-color: #50688c;
+}
+
+.dualshot {
+  --bg-color: #737373;
+  --main-color: #212222;
+  --accent-color: #212222;
+  --input-color: #aaaaaa;
+}
+
+.earthsong {
+  --bg-color: #292521;
+  --main-color: #e6c7a8;
+  --accent-color: #509452;
+  --input-color: #f5ae2d;
+}
+
+.everblush {
+  --bg-color: #141b1e;
+  --main-color: #dadada;
+  --accent-color: #8ccf7e;
+  --input-color: #838887;
+}
+
+.evil_eye {
+  --bg-color: #0084c2;
+  --main-color: #171718;
+  --accent-color: #f7f2ea;
+  --input-color: #01589f;
+}
+
+.ez_mode {
+  --bg-color: #0068c6;
+  --main-color: #ffffff;
+  --accent-color: #fa62d5;
+  --input-color: #138bf7;
+}
+
+.fire {
+  --bg-color: #0f0000;
+  --main-color: #ffffff;
+  --accent-color: #b31313;
+  --input-color: #683434;
+}
+
+.fledgling {
+  --bg-color: #3b363f;
+  --main-color: #e6d5d3;
+  --accent-color: #fc6e83;
+  --input-color: #8e5568;
+}
+
+.fleuriste {
+  --bg-color: #c6b294;
+  --main-color: #091914;
+  --accent-color: #405a52;
+  --input-color: #64374d;
+}
+
+.froyo {
+  --bg-color: #e1dacb;
+  --main-color: #7b7d7d;
+  --accent-color: #7b7d7d;
+  --input-color: #b29c5e;
+}
+
+.frozen_llama {
+  --bg-color: #9bf2ea;
+  --main-color: #ffffff;
+  --accent-color: #6d44a6;
+  --input-color: #b690fd;
+}
+
+.fruit_chew {
+  --bg-color: #d6d3d6;
+  --main-color: #282528;
+  --accent-color: #5c1e5f;
+  --input-color: #b49cb5;
+}
+
+.fundamentals {
+  --bg-color: #727474;
+  --main-color: #131313;
+  --accent-color: #7fa482;
+  --input-color: #cac4be;
+}
+
+.future_funk {
+  --bg-color: #2e1a47;
+  --main-color: #f7f2ea;
+  --accent-color: #f7f2ea;
+  --input-color: #c18fff;
+}
+
+.godspeed {
+  --bg-color: #eae4cf;
+  --main-color: #646669;
+  --accent-color: #9abbcd;
+  --input-color: #ada998;
+}
+
+.graen {
+  --bg-color: #303c36;
+  --main-color: #a59682;
+  --accent-color: #a59682;
+  --input-color: #181d1a;
+}
+
+.grand_prix {
+  --bg-color: #36475c;
+  --main-color: #c1c7d7;
+  --accent-color: #c0d036;
+  --input-color: #5c6c80;
+}
+
+.gruvbox_dark {
+  --bg-color: #282828;
+  --main-color: #ebdbb2;
+  --accent-color: #d79921;
+  --input-color: #665c54;
+}
+
+.gruvbox_light {
+  --bg-color: #fbf1c7;
+  --main-color: #3c3836;
+  --accent-color: #689d6a;
+  --input-color: #a89984;
+}
+
+.hammerhead {
+  --bg-color: #030613;
+  --main-color: #e2f1f5;
+  --accent-color: #4fcdb9;
+  --input-color: #213c53;
+}
+
+.hanok {
+  --bg-color: #d8d2c3;
+  --main-color: #393b3b;
+  --accent-color: #513a2a;
+  --input-color: #8b6f5c;
+}
+
+.hedge {
+  --bg-color: #415e31;
+  --main-color: #f7f1d6;
+  --accent-color: #6a994e;
+  --input-color: #ede5b4;
+}
+
+.honey {
+  --bg-color: #f2aa00;
+  --main-color: #f3eecb;
+  --accent-color: #fff546;
+  --input-color: #a66b00;
+}
+
+.horizon {
+  --bg-color: #1c1e26;
+  --main-color: #bbbbbb;
+  --accent-color: #c4a88a;
+  --input-color: #db886f;
+}
+
+.husqy {
+  --bg-color: #000000;
+  --main-color: #ebd7ff;
+  --accent-color: #c58aff;
+  --input-color: #972fff;
+}
+
+.iceberg_dark {
+  --bg-color: #161821;
+  --main-color: #c6c8d1;
+  --accent-color: #84a0c6;
+  --input-color: #595e76;
+}
+
+.iceberg_light {
+  --bg-color: #e8e9ec;
+  --main-color: #33374c;
+  --accent-color: #2d539e;
+  --input-color: #adb1c4;
+}
+
+.ishtar {
+  --bg-color: #202020;
+  --main-color: #fae1c3;
+  --accent-color: #91170c;
+  --input-color: #847869;
+}
+
+.iv_clover {
+  --bg-color: #a0a0a0;
+  --main-color: #3b2d3b;
+  --accent-color: #573e40;
+  --input-color: #353535;
+}
+
+.iv_spade {
+  --bg-color: #0c0c0c;
+  --main-color: #d3c2c3;
+  --accent-color: #b7976a;
+  --input-color: #404040;
+}
+
+.joker {
+  --bg-color: #1a0e25;
+  --main-color: #e9e2f5;
+  --accent-color: #99de1e;
+  --input-color: #7554a3;
+}
+
+.laser {
+  --bg-color: #221b44;
+  --main-color: #dbe7e8;
+  --accent-color: #009eaf;
+  --input-color: #b82356;
+}
+
+.lavender {
+  --bg-color: #ada6c2;
+  --main-color: #2f2a41;
+  --accent-color: #e4e3e9;
+  --input-color: #e4e3e9;
+}
+
+.leather {
+  --bg-color: #a86948;
+  --main-color: #ffe4bc;
+  --accent-color: #ffe4bc;
+  --input-color: #81482b;
+}
+
+.lil_dragon {
+  --bg-color: #ebe1ef;
+  --main-color: #212b43;
+  --accent-color: #8a5bd6;
+  --input-color: #a28db8;
+}
+
+.lime {
+  --bg-color: #7c878e;
+  --main-color: #bfcfdc;
+  --accent-color: #93c247;
+  --input-color: #4b5257;
+}
+
+.luna {
+  --bg-color: #221c35;
+  --main-color: #ffe3eb;
+  --accent-color: #f67599;
+  --input-color: #5a3a7e;
+}
+
+.magic_girl {
+  --bg-color: #ffffff;
+  --main-color: #00ac8c;
+  --accent-color: #f5b1cc;
+  --input-color: #93e8d3;
+}
+
+.mashu {
+  --bg-color: #2b2b2c;
+  --main-color: #f1e2e4;
+  --accent-color: #76689a;
+  --input-color: #d8a0a6;
+}
+
+.matcha_moccha {
+  --bg-color: #523525;
+  --main-color: #ecddcc;
+  --accent-color: #7ec160;
+  --input-color: #9e6749;
+}
+
+.material {
+  --bg-color: #263238;
+  --main-color: #e6edf3;
+  --accent-color: #80cbc4;
+  --input-color: #4c6772;
+}
+
+.matrix {
+  --bg-color: #000000;
+  --main-color: #d1ffcd;
+  --accent-color: #15ff00;
+  --input-color: #006500;
+}
+
+.menthol {
+  --bg-color: #00c18c;
+  --main-color: #ffffff;
+  --accent-color: #ffffff;
+  --input-color: #186544;
+}
+
+.metaverse {
+  --bg-color: #232323;
+  --main-color: #e8e8e8;
+  --accent-color: #d82934;
+  --input-color: #5e5e5e;
+}
+
+.metropolis {
+  --bg-color: #0f1f2c;
+  --main-color: #e4edf1;
+  --accent-color: #56c3b7;
+  --input-color: #326984;
+}
+
+.mexican {
+  --bg-color: #f8ad34;
+  --main-color: #eee;
+  --accent-color: #b12189;
+  --input-color: #333;
+}
+
+.miami {
+  --bg-color: #f35588;
+  --main-color: #f0e9ec;
+  --accent-color: #05dfd7;
+  --input-color: #94294c;
+}
+
+.miami_nights {
+  --bg-color: #18181a;
+  --main-color: #fff;
+  --accent-color: #e4609b;
+  --input-color: #47bac0;
+}
+
+.midnight {
+  --bg-color: #0b0e13;
+  --main-color: #9fadc6;
+  --accent-color: #60759f;
+  --input-color: #394760;
+}
+
+.milkshake {
+  --bg-color: #ffffff;
+  --main-color: #212b43;
+  --accent-color: #212b43;
+  --input-color: #62cfe6;
+}
+
+.mint {
+  --bg-color: #05385b;
+  --main-color: #edf5e1;
+  --accent-color: #5cdb95;
+  --input-color: #20688a;
+}
+
+.mizu {
+  --bg-color: #afcbdd;
+  --main-color: #1a2633;
+  --accent-color: #fcfbf6;
+  --input-color: #85a5bb;
+}
+
+.modern_dolch {
+  --bg-color: #2d2e30;
+  --main-color: #e3e6eb;
+  --accent-color: #7eddd3;
+  --input-color: #54585c;
+}
+
+.modern_dolch_light {
+  --bg-color: #dbdbdb;
+  --main-color: #454545;
+  --accent-color: #8fd1c3;
+  --input-color: #acacac;
+}
+
+.modern_ink {
+  --bg-color: #ffffff;
+  --main-color: #000000;
+  --accent-color: #ff360d;
+  --input-color: #b7b7b7;
+}
+
+.monokai {
+  --bg-color: #272822;
+  --main-color: #e2e2dc;
+  --accent-color: #a6e22e;
+  --input-color: #e6db74;
+}
+
+.moonlight {
+  --bg-color: #191f28;
+  --main-color: #ccccb5;
+  --accent-color: #c69f68;
+  --input-color: #4b5975;
+}
+
+.mountain {
+  --bg-color: #0f0f0f;
+  --main-color: #e7e7e7;
+  --accent-color: #e7e7e7;
+  --input-color: #4c4c4c;
+}
+
+.mr_sleeves {
+  --bg-color: #d1d7da;
+  --main-color: #1d1d1d;
+  --accent-color: #daa99b;
+  --input-color: #9a9fa1;
+}
+
+.ms_cupcakes {
+  --bg-color: #ffffff;
+  --main-color: #0a282f;
+  --accent-color: #5ed5f3;
+  --input-color: #d64090;
+}
+
+.muted {
+  --bg-color: #525252;
+  --main-color: #b1e4e3;
+  --accent-color: #c5b4e3;
+  --input-color: #939eae;
+}
+
+.nautilus {
+  --bg-color: #132237;
+  --main-color: #1cbaac;
+  --accent-color: #ebb723;
+  --input-color: #0b4c6c;
+}
+
+.nebula {
+  --bg-color: #212135;
+  --main-color: #838686;
+  --accent-color: #be3c88;
+  --input-color: #19b3b8;
+}
+
+.night_runner {
+  --bg-color: #212121;
+  --main-color: #e8e8e8;
+  --accent-color: #feff04;
+  --input-color: #5c4a9c;
+}
+
+.nord {
+  --bg-color: #242933;
+  --main-color: #d8dee9;
+  --accent-color: #d8dee9;
+  --input-color: #617b94;
+}
+
+.nord_light {
+  --bg-color: #eceff4;
+  --main-color: #8fbcbb;
+  --accent-color: #8fbcbb;
+  --input-color: #6a7791;
+}
+
+.norse {
+  --bg-color: #242425;
+  --main-color: #ccc2b1;
+  --accent-color: #2b5f6d;
+  --input-color: #505b5e;
+}
+
+.oblivion {
+  --bg-color: #313231;
+  --main-color: #f7f5f1;
+  --accent-color: #a5a096;
+  --input-color: #5d6263;
+}
+
+.olive {
+  --bg-color: #e9e5cc;
+  --main-color: #373731;
+  --accent-color: #92946f;
+  --input-color: #b7b39e;
+}
+
+.olivia {
+  --bg-color: #1c1b1d;
+  --main-color: #f2efed;
+  --accent-color: #deaf9d;
+  --input-color: #4e3e3e;
+}
+
+.onedark {
+  --bg-color: #2f343f;
+  --main-color: #98c379;
+  --accent-color: #61afef;
+  --input-color: #eceff4;
+}
+
+.our_theme {
+  --bg-color: #ce1226;
+  --main-color: #ffffff;
+  --accent-color: #fcd116;
+  --input-color: #6d0f19;
+}
+
+.paper {
+  --bg-color: #eeeeee;
+  --main-color: #444444;
+  --accent-color: #444444;
+  --input-color: #b2b2b2;
+}
+
+.passion_fruit {
+  --bg-color: #7c2142;
+  --main-color: #ffffff;
+  --accent-color: #f4a3b4;
+  --input-color: #9994b8;
+}
+
+.pastel {
+  --bg-color: #e0b2bd;
+  --main-color: #6d5c6f;
+  --accent-color: #fbf4b6;
+  --input-color: #b4e9ff;
+}
+
+.peach_blossom {
+  --bg-color: #292929;
+  --main-color: #fecea8;
+  --accent-color: #99b898;
+  --input-color: #616161;
+}
+
+.peaches {
+  --bg-color: #e0d7c1;
+  --main-color: #5f4c41;
+  --accent-color: #dd7a5f;
+  --input-color: #e7b28e;
+}
+
+.pink_lemonade {
+  --bg-color: #f6d992;
+  --main-color: #fcfcf8;
+  --accent-color: #f6a192;
+  --input-color: #f6b092;
+}
+
+.pulse {
+  --bg-color: #181818;
+  --main-color: #e5f4f4;
+  --accent-color: #17b8bd;
+  --input-color: #53565a;
+}
+
+.purpurite {
+  --bg-color: #1f2533;
+  --main-color: #9999ff;
+  --accent-color: #9999ff;
+  --input-color: #ccddff;
+}
+
+.red_dragon {
+  --bg-color: #1a0b0c;
+  --main-color: #4a4d4e;
+  --accent-color: #ff3a32;
+  --input-color: #e2a528;
+}
+
+.red_samurai {
+  --bg-color: #84202c;
+  --main-color: #e2dad0;
+  --accent-color: #c79e6e;
+  --input-color: #55131b;
+}
+
+.repose_dark {
+  --bg-color: #2f3338;
+  --main-color: #d6d2bc;
+  --accent-color: #d6d2bc;
+  --input-color: #8f8e84;
+}
+
+.repose_light {
+  --bg-color: #efead0;
+  --main-color: #333538;
+  --accent-color: #5f605e;
+  --input-color: #8f8e84;
+}
+
+.retro {
+  --bg-color: #dad3c1;
+  --main-color: #1d1b17;
+  --accent-color: #1d1b17;
+  --input-color: #918b7d;
+}
+
+.retrocast {
+  --bg-color: #07737a;
+  --main-color: #ffffff;
+  --accent-color: #88dbdf;
+  --input-color: #f3e03b;
+}
+
+.rose_pine {
+  --bg-color: #1f1d27;
+  --main-color: #e0def4;
+  --accent-color: #9ccfd8;
+  --input-color: #c4a7e7;
+}
+
+.rose_pine_dawn {
+  --bg-color: #fffaf3;
+  --main-color: #286983;
+  --accent-color: #56949f;
+  --input-color: #c4a7e7;
+}
+
+.rose_pine_moon {
+  --bg-color: #2a273f;
+  --main-color: #e0def4;
+  --accent-color: #9ccfd8;
+  --input-color: #c4a7e7;
+}
+
+.rudy {
+  --bg-color: #1a2b3e;
+  --main-color: #c9c8bf;
+  --accent-color: #af8f5c;
+  --input-color: #3a506c;
+}
+
+.ryujinscales {
+  --bg-color: #081426;
+  --main-color: #ffe4bc;
+  --accent-color: #f17754;
+  --input-color: #ffbc90;
+}
+
+.serika {
+  --bg-color: #e1e1e3;
+  --main-color: #323437;
+  --accent-color: #e2b714;
+  --input-color: #aaaeb3;
+}
+
+.serika_dark {
+  --bg-color: #323437;
+  --main-color: #d1d0c5;
+  --accent-color: #e2b714;
+  --input-color: #646669;
+}
+
+.sewing_tin {
+  --bg-color: #241963;
+  --main-color: #ffffff;
+  --accent-color: #f2ce83;
+  --input-color: #446ad5;
+}
+
+.sewing_tin_light {
+  --bg-color: #ffffff;
+  --main-color: #2d2076;
+  --accent-color: #2d2076;
+  --input-color: #385eca;
+}
+
+.shadow {
+  --bg-color: #000;
+  --main-color: #eee;
+  --accent-color: #eee;
+  --input-color: #444;
+}
+
+.shoko {
+  --bg-color: #ced7e0;
+  --main-color: #3b4c58;
+  --accent-color: #81c4dd;
+  --input-color: #7599b1;
+}
+
+.slambook {
+  --bg-color: #FFFDDE;
+  --main-color: #125d98;
+  --accent-color: #13005A;
+  --input-color: #1c82adc4;
+}
+
+.snes {
+  --bg-color: #bfbec2;
+  --main-color: #2e2e2e;
+  --accent-color: #553d94;
+  --input-color: #9f8ad4;
+}
+
+.soaring_skies {
+  --bg-color: #fff9f2;
+  --main-color: #1d1e1e;
+  --accent-color: #55c6f0;
+  --input-color: #1e107a;
+}
+
+.sonokai {
+  --bg-color: #2c2e34;
+  --main-color: #e2e2e3;
+  --accent-color: #9ed072;
+  --input-color: #e7c664;
+}
+
+.stealth {
+  --bg-color: #010203;
+  --main-color: #383e42;
+  --accent-color: #383e42;
+  --input-color: #5e676e;
+}
+
+.strawberry {
+  --bg-color: #f37f83;
+  --main-color: #fcfcf8;
+  --accent-color: #fcfcf8;
+  --input-color: #e53c58;
+}
+
+.striker {
+  --bg-color: #124883;
+  --main-color: #d6dbd9;
+  --accent-color: #d7dcda;
+  --input-color: #0f2d4e;
+}
+
+.superuser {
+  --bg-color: #262a33;
+  --main-color: #e5f7ef;
+  --accent-color: #43ffaf;
+  --input-color: #526777;
+}
+
+.sweden {
+  --bg-color: #0058a3;
+  --main-color: #ffffff;
+  --accent-color: #ffcc02;
+  --input-color: #57abdb;
+}
+
+.taro {
+  --bg-color: #b3baff;
+  --main-color: #130f1a;
+  --accent-color: #130f1a;
+  --input-color: #6f6c91;
+}
+
+.terminal {
+  --bg-color: #191a1b;
+  --main-color: #e7eae0;
+  --accent-color: #79a617;
+  --input-color: #48494b;
+}
+
+.terra {
+  --bg-color: #0c100e;
+  --main-color: #f0edd1;
+  --accent-color: #89c559;
+  --input-color: #436029;
+}
+
+.terror_below {
+  --bg-color: #0b1e1a;
+  --main-color: #dceae5;
+  --accent-color: #66ac92;
+  --input-color: #015c53;
+}
+
+.tiramisu {
+  --bg-color: #cfc6b9;
+  --main-color: #7d5448;
+  --accent-color: #c0976f;
+  --input-color: #c0976f;
+}
+
+.trackday {
+  --bg-color: #464d66;
+  --main-color: #cfcfcf;
+  --accent-color: #e0513e;
+  --input-color: #5c7eb9;
+}
+
+.trance {
+  --bg-color: #00021b;
+  --main-color: #fff;
+  --accent-color: #e51376;
+  --input-color: #3c4c79;
+}
+
+.tron_orange {
+  --bg-color: #0d1c1c;
+  --main-color: #ffffff;
+  --accent-color: #f0e800;
+  --input-color: #ff6600;
+}
+
+.vaporwave {
+  --bg-color: #a4a7ea;
+  --main-color: #f1ebf1;
+  --accent-color: #e368da;
+  --input-color: #7c7faf;
+}
+
+.viridescent {
+  --bg-color: #2c3333;
+  --main-color: #e9f5db;
+  --accent-color: #95d5b2;
+  --input-color: #84a98c;
+}
+
+.voc {
+  --bg-color: #190618;
+  --main-color: #eeeae4;
+  --accent-color: #e0caac;
+  --input-color: #4c1e48;
+}
+
+.vscode {
+  --bg-color: #1e1e1e;
+  --main-color: #d4d4d4;
+  --accent-color: #007acc;
+  --input-color: #4d4d4d;
+}
+
+.watermelon {
+  --bg-color: #1f4437;
+  --main-color: #cdc6bc;
+  --accent-color: #d6686f;
+  --input-color: #3e7a65;
+}
+
+.wavez {
+  --bg-color: #1c292f;
+  --main-color: #e9efe6;
+  --accent-color: #6bde3b;
+  --input-color: #1f5e6b;
+}
+
+.witch_girl {
+  --bg-color: #f3dbda;
+  --main-color: #56786a;
+  --accent-color: #56786a;
+  --input-color: #ddb4a7;
+}
diff --git a/src/themes/themes.js b/src/themes/themes.js
index 3957028..8671c99 100644
--- a/src/themes/themes.js
+++ b/src/themes/themes.js
@@ -1,21 +1,8 @@
 import { useState } from 'preact/hooks'
 
+import {themes} from './themeList.js'
 import './themes.css'
 
-const themes = [
-  'light',
-  'dim',
-  'dark',
-  'solarized-light',
-  'solarized-dark',
-  'emo',
-  'nord',
-  'redrum',
-  'toxin',
-  'valve',
-  'wasp',
-]
-
 const LS_THEME_KEY = 'elseifplayer/theme'
 const DEFAULT_THEME = themes[0]