Skip to content

theme transition#944

Merged
hatemhosny merged 4 commits intodevelopfrom
theme-transition
Feb 14, 2026
Merged

theme transition#944
hatemhosny merged 4 commits intodevelopfrom
theme-transition

Conversation

@hatemhosny
Copy link
Collaborator

@hatemhosny hatemhosny commented Feb 14, 2026

use transition animation when changing theme

Screenshot (405) Screenshot (406)

Summary by CodeRabbit

  • New Features

    • Theme switching now uses coordinated view transitions tied to the active element for smoother, polished theme changes.
  • Style

    • Light theme gains view-transition animations with a circular reveal centered on the active element.
    • Sass loading updated to module-style loading for style assets.
  • Chores

    • Development tooling and linter packages upgraded; linter now ignores additional docs paths.

@netlify
Copy link

netlify bot commented Feb 14, 2026

Deploy Preview for livecodes ready!

Name Link
🔨 Latest commit cb1ca63
🔍 Latest deploy log https://app.netlify.com/projects/livecodes/deploys/699012745de2630008f8852c
😎 Deploy Preview https://deploy-preview-944--livecodes.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@github-actions
Copy link
Contributor

github-actions bot commented Feb 14, 2026

Size Change: +575 B (+0.06%)

Total Size: 1.02 MB

Filename Size Change
./build/livecodes/app.js 112 kB +329 B (+0.29%)
ℹ️ View Unchanged
Filename Size Change
./build/404.html 1 kB 0 B
./build/app.html 250 B 0 B
./build/index.html 2.46 kB +2 B (+0.08%)
./build/livecodes/app.css 22.6 kB +98 B (+0.44%)
./build/livecodes/assets.js 8.64 kB 0 B
./build/livecodes/assets/noop.js 18 B 0 B
./build/livecodes/assets/templates/diagrams-starter.html 2.19 kB 0 B
./build/livecodes/backup.js 3.73 kB +3 B (+0.08%)
./build/livecodes/blockly.js 13.4 kB 0 B
./build/livecodes/broadcast.js 1.19 kB -1 B (-0.08%)
./build/livecodes/bundle-types.js 4.36 kB 0 B
./build/livecodes/code-to-image.js 9.1 kB +6 B (+0.07%)
./build/livecodes/codejar.js 17.6 kB 0 B
./build/livecodes/codemirror.js 6.29 kB 0 B
./build/livecodes/compile.page.js 2.4 kB 0 B
./build/livecodes/compile.worker.js 14.5 kB 0 B
./build/livecodes/compiler-utils.js 3.16 kB 0 B
./build/livecodes/custom-editor-utils.js 198 B 0 B
./build/livecodes/deploy.js 6.87 kB +1 B (+0.01%)
./build/livecodes/editor-settings.js 17.7 kB +6 B (+0.03%)
./build/livecodes/embed-ui.js 5.55 kB -6 B (-0.11%)
./build/livecodes/embed.js 90.1 kB +36 B (+0.04%)
./build/livecodes/export.js 3.89 kB 0 B
./build/livecodes/firebase.js 22.7 kB 0 B
./build/livecodes/format.worker.js 13.5 kB 0 B
./build/livecodes/google-fonts.js 7.12 kB 0 B
./build/livecodes/headless.js 78.6 kB +93 B (+0.12%)
./build/livecodes/i18n-ar-language-info.json 5.34 kB 0 B
./build/livecodes/i18n-ar-translation.json 9.32 kB 0 B
./build/livecodes/i18n-bn-language-info.json 5.76 kB 0 B
./build/livecodes/i18n-bn-translation.json 9.66 kB 0 B
./build/livecodes/i18n-de-language-info.json 5.4 kB 0 B
./build/livecodes/i18n-de-translation.json 9.45 kB 0 B
./build/livecodes/i18n-en-language-info.json 4.63 kB 0 B
./build/livecodes/i18n-en-translation.json 8.04 kB 0 B
./build/livecodes/i18n-es-language-info.json 5.12 kB 0 B
./build/livecodes/i18n-es-translation.json 9.18 kB 0 B
./build/livecodes/i18n-fa-language-info.json 5.52 kB 0 B
./build/livecodes/i18n-fa-translation.json 9.47 kB 0 B
./build/livecodes/i18n-fr-language-info.json 5.31 kB 0 B
./build/livecodes/i18n-fr-translation.json 9.42 kB 0 B
./build/livecodes/i18n-hi-language-info.json 5.93 kB 0 B
./build/livecodes/i18n-hi-translation.json 9.97 kB 0 B
./build/livecodes/i18n-id-language-info.json 4.87 kB 0 B
./build/livecodes/i18n-id-translation.json 8.7 kB 0 B
./build/livecodes/i18n-it-language-info.json 5.17 kB 0 B
./build/livecodes/i18n-it-translation.json 9.25 kB 0 B
./build/livecodes/i18n-ja-language-info.json 5.72 kB 0 B
./build/livecodes/i18n-ja-translation.json 9.62 kB 0 B
./build/livecodes/i18n-nl-language-info.json 5.07 kB 0 B
./build/livecodes/i18n-nl-translation.json 8.9 kB 0 B
./build/livecodes/i18n-pt-language-info.json 5.16 kB 0 B
./build/livecodes/i18n-pt-translation.json 9.37 kB 0 B
./build/livecodes/i18n-ru-language-info.json 5.7 kB 0 B
./build/livecodes/i18n-ru-translation.json 10.3 kB 0 B
./build/livecodes/i18n-tr-language-info.json 5.3 kB 0 B
./build/livecodes/i18n-tr-translation.json 9.27 kB 0 B
./build/livecodes/i18n-ur-language-info.json 5.97 kB 0 B
./build/livecodes/i18n-ur-translation.json 9.8 kB 0 B
./build/livecodes/i18n-zh-CN-language-info.json 5.01 kB 0 B
./build/livecodes/i18n-zh-CN-translation.json 8.66 kB 0 B
./build/livecodes/i18n.js 20.4 kB -19 B (-0.09%)
./build/livecodes/import-src.js 16.2 kB 0 B
./build/livecodes/import.js 14.6 kB +61 B (+0.42%)
./build/livecodes/index.js 5.35 kB -21 B (-0.39%)
./build/livecodes/lang-art-template-compiler.js 1.65 kB 0 B
./build/livecodes/lang-assemblyscript-compiler.js 290 B 0 B
./build/livecodes/lang-assemblyscript-script.js 386 B 0 B
./build/livecodes/lang-astro-compiler.js 2.34 kB 0 B
./build/livecodes/lang-clio-compiler.js 1.55 kB 0 B
./build/livecodes/lang-commonlisp-script.js 123 B 0 B
./build/livecodes/lang-cpp-script.js 1.74 kB 0 B
./build/livecodes/lang-cpp-wasm-script.js 2.84 kB 0 B
./build/livecodes/lang-csharp-wasm-script.js 2.18 kB 0 B
./build/livecodes/lang-diagrams-compiler-esm.js 5.09 kB 0 B
./build/livecodes/lang-dot-compiler.js 1.66 kB 0 B
./build/livecodes/lang-ejs-compiler.js 1.63 kB 0 B
./build/livecodes/lang-eta-compiler.js 1.65 kB 0 B
./build/livecodes/lang-fennel-compiler.js 1.61 kB 0 B
./build/livecodes/lang-gleam-compiler.js 3.09 kB 0 B
./build/livecodes/lang-go-wasm-script.js 3.25 kB 0 B
./build/livecodes/lang-haml-compiler.js 1.65 kB 0 B
./build/livecodes/lang-handlebars-compiler.js 1.95 kB 0 B
./build/livecodes/lang-imba-compiler.js 147 B 0 B
./build/livecodes/lang-java-script.js 4.05 kB 0 B
./build/livecodes/lang-jinja-compiler.js 1.65 kB 0 B
./build/livecodes/lang-julia-script.js 3.31 kB 0 B
./build/livecodes/lang-liquid-compiler.js 1.68 kB 0 B
./build/livecodes/lang-lua-wasm-script.js 205 B 0 B
./build/livecodes/lang-malina-compiler.js 2.96 kB 0 B
./build/livecodes/lang-minizinc-script.js 2.06 kB 0 B
./build/livecodes/lang-mustache-compiler.js 1.65 kB 0 B
./build/livecodes/lang-nunjucks-compiler.js 1.96 kB 0 B
./build/livecodes/lang-perl-script.js 268 B 0 B
./build/livecodes/lang-php-wasm-script.js 347 B 0 B
./build/livecodes/lang-postgresql-compiler-esm.js 1.73 kB 0 B
./build/livecodes/lang-prolog-script.js 204 B 0 B
./build/livecodes/lang-pug-compiler.js 371 B 0 B
./build/livecodes/lang-python-wasm-script.js 1.86 kB 0 B
./build/livecodes/lang-r-script-esm.js 2.44 kB 0 B
./build/livecodes/lang-rescript-compiler-esm.js 2.16 kB 0 B
./build/livecodes/lang-rescript-formatter.js 1.52 kB 0 B
./build/livecodes/lang-riot-compiler.js 2.81 kB 0 B
./build/livecodes/lang-ruby-wasm-script.js 1.71 kB 0 B
./build/livecodes/lang-scss-compiler.js 1.71 kB 0 B
./build/livecodes/lang-solid-compiler.js 263 B 0 B
./build/livecodes/lang-sql-compiler.js 1.64 kB 0 B
./build/livecodes/lang-sql-script.js 1.95 kB 0 B
./build/livecodes/lang-svelte-compiler.js 4.69 kB 0 B
./build/livecodes/lang-tcl-script.js 1.82 kB 0 B
./build/livecodes/lang-teal-compiler.js 1.72 kB 0 B
./build/livecodes/lang-twig-compiler.js 1.64 kB 0 B
./build/livecodes/lang-vento-compiler.js 1.68 kB 0 B
./build/livecodes/lang-vue-compiler.js 6.09 kB 0 B
./build/livecodes/lang-vue2-compiler.js 3.48 kB 0 B
./build/livecodes/lang-wat-compiler.js 348 B 0 B
./build/livecodes/lang-wat-script.js 1.58 kB 0 B
./build/livecodes/language-info.js 7.92 kB -6 B (-0.08%)
./build/livecodes/monaco-lang-astro.js 947 B 0 B
./build/livecodes/monaco-lang-clio.js 639 B 0 B
./build/livecodes/monaco-lang-imba.js 7.35 kB 0 B
./build/livecodes/monaco-lang-minizinc.js 1.74 kB 0 B
./build/livecodes/monaco-lang-prolog.js 580 B 0 B
./build/livecodes/monaco-lang-wat.js 2.46 kB 0 B
./build/livecodes/monaco.js 10.1 kB 0 B
./build/livecodes/open.js 6.21 kB -7 B (-0.11%)
./build/livecodes/processor-lightningcss-compiler.js 1.88 kB 0 B
./build/livecodes/processor-postcss-compiler.js 2.02 kB 0 B
./build/livecodes/processor-tailwindcss-compiler.js 5.24 kB 0 B
./build/livecodes/processor-unocss-compiler.js 355 B 0 B
./build/livecodes/processor-windicss-compiler.js 450 B 0 B
./build/livecodes/quill.css 697 B 0 B
./build/livecodes/quill.js 5.8 kB 0 B
./build/livecodes/resources.js 3.43 kB 0 B
./build/livecodes/result-utils.js 1.17 kB 0 B
./build/livecodes/share.js 3.81 kB +2 B (+0.05%)
./build/livecodes/snippets.js 6.04 kB -3 B (-0.05%)
./build/livecodes/sync-ui.js 3.25 kB +1 B (+0.03%)
./build/livecodes/sync.js 3.54 kB 0 B
./build/livecodes/sync.worker.js 29.7 kB 0 B
./build/livecodes/templates.js 26.6 kB 0 B
./build/sdk/livecodes.js 3.95 kB 0 B
./build/sdk/livecodes.umd.js 4.02 kB 0 B
./build/sdk/package.json 292 B 0 B
./build/sdk/react.js 4.24 kB 0 B
./build/sdk/vue.js 4.36 kB 0 B

compressed-size-action

@coderabbitai
Copy link

coderabbitai bot commented Feb 14, 2026

Walkthrough

Adds view-transition-aware theme switching: runViewTransition(fn) and transitionTheme(theme, editorTheme) capture the active element position, set CSS variables, and apply theme changes inside document.startViewTransition when available; updates styles and Sass loading to support the transition.

Changes

Cohort / File(s) Summary
Theme transition implementation
src/livecodes/core.ts
Adds runViewTransition(fn) and transitionTheme(theme, editorTheme) which capture active element coordinates, set CSS variables (--active-x, --active-y), and run theme/editor changes inside document.startViewTransition when available; replaces direct setTheme(...) calls to use transitionTheme(...).
Light theme view-transition styles
src/livecodes/styles/inc-light.scss
Adds ::view-transition-old(root) and ::view-transition-new(root) rules and an @keyframes circle-in animation that uses the active-element CSS vars to create a circular reveal during theme changes.
Sass module loading changes
src/livecodes/styles/app.scss
Replaces several @import calls with @use 'sass:meta'; and @include meta.load-css('inc-...') to load Sass partials via the module loader.
Stylelint ignore update
.stylelintrc.json
Adds docs/docs/api/**/* to ignoreFiles so stylelint ignores additional generated documentation files.
Dev dependency bumps
package.json
Updates development dependency versions for postcss, postcss-cli, sass, stylelint, and stylelint-config-sass-guidelines (no script changes).

Sequence Diagram(s)

mermaid
sequenceDiagram
participant UI as Active Element / DOM
participant Core as core.ts
participant Browser as document / ViewTransition
participant CSS as Stylesheet
UI->>Core: trigger theme change
Core->>UI: read active element position
Core->>CSS: set --active-x, --active-y
Core->>Browser: runViewTransition(fn)
Browser-->>Core: start view transition (if supported)
Core->>Core: apply theme and editor config changes
Browser->>CSS: apply ::view-transition-old / ::view-transition-new animations
CSS-->>UI: animate theme transition

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'theme transition' directly and accurately summarizes the main objective of the pull request: implementing theme transition animations to prevent style flicker when switching themes.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Merge Conflict Detection ✅ Passed ✅ No merge conflicts detected when merging into develop

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch theme-transition

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments
src/livecodes/core.ts (2)

2037-2040: Hardcoded cleanup delay should be a named constant or match the CSS transition duration.

The 1000ms timeout for removing CSS variables is a magic number. If the CSS transition duration changes, this value could get out of sync, potentially clipping the animation or leaving stale properties. Consider extracting it as a constant or deriving it from the same source as the CSS animation duration.


4071-4088: transitionTheme fires a view transition for every editor setting change, not just theme changes.

changeEditorSettings is called for font size, tab size, editor type, word wrap, etc. The view transition animation will trigger for all of these, producing a potentially distracting visual effect when the theme hasn't actually changed. Consider guarding the transition:

♻️ Suggested guard
   setUserConfig(newConfig);
   const updatedConfig = getConfig();
-  transitionTheme(updatedConfig.theme, updatedConfig.editorTheme);
+  if (newConfig.theme != null || newConfig.editorTheme != null) {
+    transitionTheme(updatedConfig.theme, updatedConfig.editorTheme);
+  } else {
+    setTheme(updatedConfig.theme, updatedConfig.editorTheme);
+  }

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In `@src/livecodes/core.ts`:
- Around line 1984-1992: The error comes from using document.startViewTransition
which isn't in TS DOM types; update runViewTransition to use a safe type
assertion or add a declaration so TS knows about startViewTransition. Either:
add a global interface Document declaration that defines startViewTransition?:
(cb: () => void | Promise<void>) => unknown in a .d.ts file, or change the check
in runViewTransition to cast document as any or as unknown as {
startViewTransition?: Function } before accessing startViewTransition, keeping
the existing logic in runViewTransition(fn: () => void | Promise<void>).
🧹 Nitpick comments (1)
src/livecodes/core.ts (1)

4066-4083: transitionTheme runs on every editor settings change, even when theme hasn't changed.

changeEditorSettings handles changes like font family, editor type, etc. The view transition animation will fire even when only non-theme settings change, which adds unnecessary visual flicker. Consider guarding:

♻️ Suggested guard
   setUserConfig(newConfig);
   const updatedConfig = getConfig();
-  transitionTheme(updatedConfig.theme, updatedConfig.editorTheme);
+  if (newConfig.theme != null || newConfig.editorTheme != null) {
+    transitionTheme(updatedConfig.theme, updatedConfig.editorTheme);
+  } else {
+    setTheme(updatedConfig.theme, updatedConfig.editorTheme);
+  }

@cloudflare-workers-and-pages
Copy link

cloudflare-workers-and-pages bot commented Feb 14, 2026

Deploying livecodes with  Cloudflare Pages  Cloudflare Pages

Latest commit: cb1ca63
Status: ✅  Deploy successful!
Preview URL: https://f4f9a69e.livecodes.pages.dev
Branch Preview URL: https://theme-transition.livecodes.pages.dev

View logs

@sonarqubecloud
Copy link

@hatemhosny hatemhosny merged commit d267635 into develop Feb 14, 2026
18 checks passed
@hatemhosny hatemhosny deleted the theme-transition branch February 14, 2026 10:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant