Themes: add Monkeytype themes

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()
 }

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)

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',
+]

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]