Add learner-defined custom themes to the EPUB reader

[rtibbles]

Summary

Brings the EPUB reader's custom themes feature — originally a GSoC contribution — to merge-readiness on the current codebase. Alongside the six fixed themes, learners can create, edit, and delete their own themes (background, text, and link colors), picked via a color picker and persisted per-device in localStorage.

The feature was functional in the GSoC branch; this branch modernises and hardens it.

State	Screenshot
Add / edit theme modal
Color picker
Custom theme applied (My themes list)
Dark fixed theme — accessible link color

References

Continues the custom-themes work from the GSoC-era epub-custom-themes branch (merge base ~July 2023). No tracking issue was filed for the original work.

Reviewer guidance

How to test: Open any EPUB and open the reader settings (sliders icon). Under Themes, switch the six fixed themes — check link contrast on the dark ones (Black / Grey / Yellow). Under My themes (signed in), add a theme: name it, pick background/text/link colors, save; confirm it applies, appears in the list, and that rename/edit and delete work.

Deliberate convention departure: the six fixed themes are hardcoded hex in EpubConstants.js rather than $themeTokens/$themePalette, so EPUB reading palettes don't shift with Kolibri's app theme. Intentional, but it diverges from the "use theme tokens" guideline and is worth a deliberate decision.

Two maintenance notes:

• The alwan accessibility patch in ColorPickerModal.vue keys off the library's internal class/attribute names, so an alwan upgrade could silently turn it into a no-op.
• The focus-restore calls in SettingsSideBar.vue use $refs.<button>.$el.focus(). KButton gained a public focus() method in KDS 5.8.0, which internally just calls this.$el.focus(); we're pinned to 5.7.0, so we focus $el directly for now. Switch these to the public focus() when KDS is upgraded.

AI usage

Used Claude Code throughout. It reviewed the GSoC-derived branch and, under my direction, modernised and hardened it — converting the components from Options (and mixed) API to Composition API, extracting persistence into the useCustomThemes composable, and adding stable theme ids, accessible link colors, CSS-ellipsis names, an alwan accessibility patch, and the test suite — then drove a headless browser to verify rendering and run axe audits on the new UI. I made the design decisions (theme identity, hardcoded vs token colors, auditing color-picker alternatives before keeping alwan) and critically reviewed and revised its output.

[github-actions]

Build Artifacts

Asset type	Download link
PEX file	kolibri-0.19.5.dev225_g0a5350df9.d20260622.pex
Windows Installer (EXE)	kolibri-0.19.5.dev225+g0a5350df9.d20260622-windows-setup-unsigned.exe
Debian Package	kolibri_0.19.5.dev225+g0a5350df9-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.19.5.dev225+g0a5350df9.d20260622.dmg
Android Package (APK)	kolibri-0.19.5.dev225+g0a5350df9-0.2.0-debug.apk
Raspberry Pi Image	kolibri-pi-image-0.19.5.dev225+g0a5350df9.zip
TAR file	kolibri-0.19.5.dev225+g0a5350df9.d20260622.tar.gz
WHL file	kolibri-0.19.5.dev225+g0a5350df9.d20260622-py3-none-any.whl

Smoke test screenshot

Download screenshot