Code.Movie

Blog / New built-in themes available in 0.0.22

The release of @codemovie/code-movie 0.0.22 adds two new built-in themes, as well as several new styling options. A very minor breaking change is very unlikely to affect anyone who previously used Code.Movie, so you can probably update to the latest version right away.

Feature: Monokai Dark and Monokai Light themes, new styling options

This release ships with two additional built-in themes. Both Monokai Dark and Monokai Light are quite different from the default theme (which is still the default) in that they use several new features to render a lot more than just text:

The new light theme, rendering a bit of JavaScript

The new light theme, rendering a bit of JavaScript

The two new themes would not be possible without a massive upgrade to the options for styling animations. New HTML hooks and CSS variables make drawing complex backgrounds as demonstrated by the new themes a (comparative) breeze, provided you are a low-level CSS wizard. If you are not, don't fret: you can also configure the new themes with just a few CSS variables. Check out the changelog for more details.

Theme objects written for previous versions are not compatible to 0.0.22 and will need to be ported manually.

Website revamp, ecosystem updates

The Code.Movie website has, once again, been turned inside out. It now supports light and dark modes, and the playground has been expanded to support most of the new theme features at least somewhat. In terms of the wider ecosystem, @codemovie/code-movie-runtime gained a new CSS API and the ability to display arbitrary content synced up with your animation.

Other changes and bugfixes

  • New CSS variable --cm-animate-height can control whether the animation's container element animates its actual height
  • Fix bugs related to measuring flags, heart emoji and wide characters while improving performance
  • Fix styling omissions in ECMAScript syntax related to JSX and advanced TypeScript features
  • Fix a very specific off-by-one error that lead to invalidly-sized text decorations that ran to the end of the second-to-last line, making the affected decorations invisible

What's next?

No idea. If you have any requests for languages or features, open an issue or contact me via email or Mastodon.