Some fixes and ideas added

[tmhglnd]

• A fix for the full background of all the themes that was in the way, by removing all default theme backgrounds and replacing it by the semi-transparant black background rgba(0,0,0,0.7) that is not full editor size but fit-content but only where the text is.

• I included some extra themes that I think look nice: Andromeda, Bespin, Console Dark, Xcode Dark, Solarized Dark, Monakai, Github Dark (all installed from: https://uiwjs.github.io/react-codemirror/#/theme/home). Themes are installed with themeInit({ settings: { background: none }}); to make sure they also have an empty background for Hydra.

• I've made the fonts a bit better visible how it was in previous Flok. Making the default font-weight 600.

• I normalized the font sizes in the @font-face with size-adjust: so there's less differences in font size when you change between them.

• I've added the One Dark theme back in. (used this one: https://github.com/codemirror/theme-one-dark/tree/main)

• I added a preview of the changes when you hover over the Font or Theme with onMouseEnter => {}. So you can see in the background already what it looks like before you click.

  • Would be nice if this also worked when scrolling through the list with arrow-keys, but i'm not sure what on... event to use for that, I tried onKeyDown and onKeyUp but that doesn't work.

• I included some extra fonts from Google Fonts: Fira Code, Ubuntu Mono, Roboto Mono, Syne Mono, VT323 (from https://fonts.google.com/, converted to woff and woff2 with: https://transfonter.org/)

• I didn't put word-wrap on by default yet, because it seems there is still a bit strange behaviour when the editor is zoomed in further then 100%. Words/characters randomly wrap when you move with the cursor through the code...