munshkr / flok

Web-based P2P collaborative editor for live coding sounds and images
https://flok.cc
GNU General Public License v3.0
261 stars 39 forks source link

Custom Font / Theme #282

Closed Bubobubobubobubo closed 5 months ago

Bubobubobubobubo commented 6 months ago

I would like to start working on an option to choose a different font / theme. There are a few nice options here for fonts (https://www.nerdfonts.com/font-downloads), we could also include weird glyphs just for fun.

Proposed plan:

I already have something working on my personal branch. I just need a bit more help to tame the React-based fancy submenu :)

Bubobubobubobubo commented 6 months ago

https://github.com/munshkr/flok/assets/45191785/93c08839-ec57-4e6e-98c3-150171dc6682

Got this working. Will probably need help testing / theming stuff :)

munshkr commented 6 months ago

OMG Thank you!! I've been wanting to add these UI settings for a long time! :)

Bubobubobubobubo commented 6 months ago

A small update on my future PR.

Fonts

I have added a small font collection with font preview in the menu. It is a mix of popular and more niche fonts. JGS and Steps Mono were crafted by french live coders Adel Faure and Raphaël Bastide and released on Velvetyne (https://velvetyne.fr/).

Capture d’écran 2024-05-05 à 18 29 22

Themes

I don't really like working on themes. It is an highly subjective/divise topic and no matter what you do, people will always complain :) Anyway, I have added a few themes that are readable and vanilla-flavoured. There is still a bit of work to do to tame the TypeScript compiler and to arrange the themes so they look nice and don't suddenly break with ugly colors. It would be nice to have some help on that matter, I really don't like frontend work.

Capture d’écran 2024-05-05 à 18 34 22

igormpc commented 6 months ago

great work Bubobubobubobubo !! maybe add also gruvbox / gruvbox-dark themes?? really waiting anxious for vim mode/edit :D !! thx in advance !!

Bubobubobubobubo commented 6 months ago

great work Bubobubobubobubo !! maybe add also gruvbox / gruvbox-dark themes?? really waiting anxious for vim mode/edit :D !! thx in advance !!

I have refactored my work and replaced weird themes by well known ones. I also added GruvBox Dark. The light version was not rendering beautifully so I scraped it 🧑‍🔧 Note that you can already build/try my fork if you want to try it!

Bubobubobubobubo commented 5 months ago

I am closing this issue since work is underway with #283.