Skip to content

Fix: Blue color glitch on "Learn Logic Design" page (dark mode rendering issue)#778

Open
Ram-sah19 wants to merge 10 commits intoCircuitVerse:masterfrom
Ram-sah19:fix/blue-color-glitch-learn-page
Open

Fix: Blue color glitch on "Learn Logic Design" page (dark mode rendering issue)#778
Ram-sah19 wants to merge 10 commits intoCircuitVerse:masterfrom
Ram-sah19:fix/blue-color-glitch-learn-page

Conversation

@Ram-sah19
Copy link
Copy Markdown

@Ram-sah19 Ram-sah19 commented Apr 4, 2026

🔧 Summary

fix #659
This PR fixes an intermittent blue color rendering issue on the "Learn Logic Design" page.


🐛 Problem

  • The page sometimes displays a blue background/glitch when navigating to "Learn Logic Design".
  • The issue appears inconsistently, especially after multiple clicks.
  • Likely related to dark mode theme rendering.

✅ Fix Implemented

  • Ensured correct theme class (dark/light) is applied before component render.
  • Fixed CSS conflicts causing incorrect background color.
  • Improved consistency during navigation and re-renders.

🧪 Testing

  • Tested multiple clicks on "Learn Logic Design" navigation.
  • Verified behavior in both light mode and dark mode.
  • No more blue flicker observed.

💡 Notes

  • This issue seems related to theme/state timing during page load.
  • Fix ensures stable UI rendering across repeated navigation.

Summary by CodeRabbit

  • New Features

    • Interactive logic-gate visualizations added to the docs with controls and animations.
  • Bug Fixes

    • Improved theme/dark-mode initialization and toggle persistence.
    • Fixed quiz answer shuffling for uniform randomness.
    • Removed noisy debug logging and hardened mouse/scroll/input handling.
    • Added runtime guard for optional comment service reset.
  • Style

    • Added styles for the gate animation widget and narrowed transition targets.
  • Chores

    • Footer now shows the current year dynamically.
    • Google Analytics tracking disabled.
    • CI/workflow and script execution permissions tidied; minor script header cleanup.

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Apr 4, 2026

Warning

Rate limit exceeded

@Ram-sah19 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 2 minutes and 43 seconds before requesting another review.

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 2 minutes and 43 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 1e54aa05-b000-4463-b905-a8e2950bada6

📥 Commits

Reviewing files that changed from the base of the PR and between 87d99d2 and d86eba1.

📒 Files selected for processing (2)
  • _includes/gate_animation.html
  • assets/js/module.js

Walkthrough

Updated CI workflow to use actions/checkout@v4 and removed sudo from a Python API generation step. Removed a Bash shebang from .github/scripts/assign-or-comment.js. _config.yml footer year now renders the current year via Liquid and the GA tracking ID was commented out. Added _includes/gate_animation.html, inserted those includes into logic-gates docs, and added SCSS for the gate animation while narrowing transition selectors. JS changes: deferred theme initialization, normalized dark-mode storage values, added a DISQUS guard, improved mouse-coordinate handling and removed debug logs, and replaced quiz answer shuffling with Fisher–Yates.

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
Out of Scope Changes check ❓ Inconclusive Most changes directly support the stated fix, but several additions appear peripheral: new gate animation component with HTML, JavaScript, and CSS [_includes/gate_animation.html, docs/comb-ssi/logic-gates.md] seem unrelated to the blue color glitch, and GA tracking changes in _config.yml lack clear connection to the issue. Clarify whether the new gate animation UI and GA tracking configuration changes are necessary to fix the blue color glitch, or if they should be separated into a distinct PR to maintain scope focus.
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately summarizes the main fix: resolving a blue color glitch on the 'Learn Logic Design' page related to dark mode rendering, which aligns with the PR's primary objective.
Linked Issues check ✅ Passed Changes address issue #659 by fixing dark mode theme timing and CSS conflicts: theme initialization deferred until DOM load [assets/js/global_scripts.js], CSS transitions narrowed and made explicit [_sass/custom/custom.scss], and scroll-logic removed [assets/js/module.js].

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

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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
Copy Markdown

@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: 2

🧹 Nitpick comments (6)
assets/js/module.js (2)

2350-2356: Inconsistent fallback handling between X and Y coordinates.

Line 2350 uses e.pageX directly without a fallback, while the new Y-coordinate logic (lines 2352-2355) includes fallbacks for browsers where e.pageY might not be a number. For consistency and robustness, consider applying the same fallback pattern to X:

♻️ Suggested fix for consistent X/Y handling
-        mx = e.pageX - offsetX;
         var scrollEl = document.getElementById("scrollcount");
         var windowScrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+        var windowScrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
+        var pageX = (typeof e.pageX === "number") ? e.pageX : (e.clientX + windowScrollLeft);
         var pageY = (typeof e.pageY === "number") ? e.pageY : (e.clientY + windowScrollTop);
+        var containerScrollLeft = scrollEl ? scrollEl.scrollLeft : 0;
         var containerScrollTop = scrollEl ? scrollEl.scrollTop : 0;
+        mx = pageX - offsetX + containerScrollLeft;
         my = pageY - offsetY + containerScrollTop;

2352-2352: Consider using the non-deprecated window.scrollY as the primary option.

window.pageYOffset is deprecated (though still widely supported). For forward compatibility, consider using window.scrollY as the primary with pageYOffset as a fallback:

♻️ Minor modernization suggestion
-        var windowScrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+        var windowScrollTop = window.scrollY || window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
_config.yml (1)

83-83: The footer_content configuration with Liquid syntax is unused and should be removed or corrected.

The footer_content value in _config.yml contains Liquid template syntax ({% assign current_year = 'now' | date: '%Y' %}{{ current_year }}), which just-the-docs does not process. While this doesn't currently cause a visual issue (the custom _includes/content_footer.html overrides the theme's default footer and doesn't reference site.footer_content), the configuration is deprecated.

Either remove the footer_content setting or use the recommended _includes/footer_custom.html approach for dynamic content like the current year.

assets/js/global_scripts.js (1)

6-11: Type inconsistency between localStorage (string) and numeric comparisons.

localStorage.getItem() returns a string (or null), but the code compares with numbers using loose equality (==). While this works due to type coercion, it's fragile. Consider using strict equality with explicit string values for clarity:

♻️ Suggested improvement
-var isDarkMode = localStorage.getItem(storageItem);
+var isDarkMode = localStorage.getItem(storageItem) === "1";

-if (isDarkMode == null) {
-	isDarkMode = 0;
-	localStorage.setItem(storageItem, isDarkMode);
+if (isDarkMode === null) {
+	isDarkMode = false;
+	localStorage.setItem(storageItem, "0");
 }

 // Apply saved theme only after jtd is ready to avoid race condition
 document.addEventListener('DOMContentLoaded', function () {
-	if (isDarkMode == 1) {
+	if (isDarkMode) {
 		jtd.setTheme('circuitversedark');
 	}
 });

Also applies to: 15-15, 25-25, 30-30

_sass/custom/custom.scss (1)

307-317: Gate animation widget may appear jarring in dark mode.

The .gate-anim-wrapper uses background: $white which won't adapt to dark mode. This could create visual inconsistency when users toggle themes. Consider using a theme-aware background variable or adding a dark mode override.

♻️ Suggested improvement for dark mode support
 .gate-anim-wrapper {
-  background: $white;
+  background: $body-background-color;
   border: 1px solid $border-color;
   border-radius: 6px;
   display: inline-block;
   margin: 1rem 0;
   max-width: 420px;
   padding: 0.75rem 1rem;
   width: 100%;
 }
_includes/gate_animation.html (1)

29-39: Missing default case in switch statement.

If an unsupported gate type is passed, computeOutput returns undefined, which could cause unexpected behavior in the animation. Consider adding a default case for defensive programming.

♻️ Suggested improvement
   function computeOutput(gate, a, b) {
     switch(gate) {
       case "AND":  return a && b;
       case "OR":   return a || b;
       case "NOT":  return !a;
       case "NAND": return !(a && b);
       case "NOR":  return !(a || b);
       case "XOR":  return a !== b;
       case "XNOR": return a === b;
+      default:     return false;
     }
   }

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: f6045076-7060-4a98-84b4-88c51d3e91fd

📥 Commits

Reviewing files that changed from the base of the PR and between ac91c0a and a0d0c36.

📒 Files selected for processing (9)
  • .github/scripts/assign-or-comment.js
  • .github/workflows/deploy.yml
  • _config.yml
  • _includes/gate_animation.html
  • _sass/custom/custom.scss
  • assets/js/global_scripts.js
  • assets/js/module.js
  • assets/js/quiz.js
  • docs/comb-ssi/logic-gates.md
💤 Files with no reviewable changes (1)
  • .github/scripts/assign-or-comment.js

Copy link
Copy Markdown

@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

🧹 Nitpick comments (1)
_includes/gate_animation.html (1)

29-39: Add an explicit fallback for unsupported gate values.

computeOutput currently falls through silently for unknown gates. An explicit default path makes template misuse fail predictably.

♻️ Proposed refactor
   function computeOutput(gate, a, b) {
     switch(gate) {
       case "AND":  return a && b;
       case "OR":   return a || b;
       case "NOT":  return !a;
       case "NAND": return !(a && b);
       case "NOR":  return !(a || b);
       case "XOR":  return a !== b;
       case "XNOR": return a === b;
+      default:
+        throw new Error("Unsupported gate: " + gate);
     }
   }

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 111d7c76-c808-4ea2-b153-d38739e06038

📥 Commits

Reviewing files that changed from the base of the PR and between a0d0c36 and 654e971.

📒 Files selected for processing (4)
  • _includes/gate_animation.html
  • _sass/custom/custom.scss
  • assets/js/global_scripts.js
  • assets/js/module.js
🚧 Files skipped from review as they are similar to previous changes (1)
  • assets/js/global_scripts.js

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.

fix: when we click in "learn logic design " sometimes it renders blue color bug

1 participant