Here's a theme for Ableton's user manuals! Sticky sidebar navigation + dark mode.

[ninevolt]

Recently I've been diving deeper into the Live manual and wanted to improve the experience, so I decided to code up a browser theme! Sharing here with y'all in case anyone finds it useful.

Here's how it looks (with dark option enabled):



Current features (all optional):

• Table of contents sticks to the side at all times (and becomes scrollable) for easier navigation.
• Option to hide the website's header and footer for a cleaner look, letting you just focus on the manual.
• Option to auto-enable dark mode following your computer's system theme, have the dark mode always enabled, or use the default light theme.
• Works on the Live, Push, Move, and Note manuals, for all languages.

For fun, I matched the colours to the default colours of Live's UI in dark mode

All you need is the Stylus browser extension (for Chrome- or Firefox-based browsers), simple instructions to install here (GitHub link).

You can also find the theme on UserStyles.world.

Hope you find this useful! Always open to any suggestions, just let me know and if it's doable I'm happy to update the theme.

Now go and RTFM

[dontfret]

+1

Dark Mode Forever.

Brand continuity + accessibility improvement.

Why can't this just be the default for all ableton websites?

[ninevolt]

Glad you like it! The dark mode has been saving my eyes at night for sure haha.

I wonder if there are any plans to use the Ableton Sans font on their online material, such as the user manuals, instead of Futura. It's a great font and would further contribute to the brand continuity.

[dontfret]

Yes dark mode saves your eyes at night but a lot of folks have trouble seeing without it.

Ableton Sans is pretty sweet. If I'm gonna be a font nerd though I think it could use some tweaking (like differentiating letter O and number 0). A sprinkle of Atkinson Hyperlegible wouldn't hurt.

I found this document when working out ideal color pairings for night mode and light sensitivity that you might find interesting:
https://designsystem.digital.gov/design ... pairings-2

Peace