Fixes #518

Fix Text Color Handling in Custom Themes

Description

This PR addresses issues with text color handling in custom themes, particularly focusing on text annotations and their visibility against different backgrounds.

Changes Made

Fixed text color handling in custom themes to ensure proper visibility
Removed duplicate color assignments in getCanvasColors()
Separated text-related CSS variables to prevent unintended color effects
Improved type safety in theme handling functions

Context

Previously, text annotations were not changing color correctly in custom themes despite working properly in automatic themes. This was causing visibility issues when users applied custom themes.

Technical Details

Modified customThemeAbstraction.js to properly handle text-related CSS variables
Updated themer.js to remove redundant color assignments and improve theme application
Ensured proper separation between text colors and background colors

Testing

To test these changes:

Apply different themes (both automatic and custom)
Verify text annotations are visible in all themes
Check that all text elements update properly when changing themes

Type of Change

[x] Bug fix (non-breaking change which fixes an issue)
[x] Code quality improvement
[x] Type system enhancement

Screenshots (if appropriate)

https://github.com/user-attachments/assets/4c853005-7bc4-4620-a71b-978326ca9962

Mar 09 '25 22:03 Kartikayy007

Walkthrough

The pull request refines the theming system by restructuring the changeCustomTheme function in the Vue component and updating the theme abstraction and style management across simulator modules. The changes streamline code readability by caching DOM elements and separating value extraction. They also introduce explicit handling for text color properties, adjust reference arrays in the theme abstraction, and force a canvas refresh after updating theme styles.

Changes

File(s)	Summary of Changes
`src/components/DialogBox/Themes/ApplyThemes.vue`	Refactored `changeCustomTheme`: caches the event target, extracts name/value into variables, adds explicit handling for the 'Text' theme by setting `--text`, updates `customThemesList`, and introduces a timeout to force a canvas re-render.
`v0/src/simulator/src/themer/customThemeAbstraction.js` `v1/src/simulator/src/themer/customThemeAbstraction.js`	Updated `CreateAbstraction` function: modified the text color source (v0: from `themeOptions['--text-lite']` to `themeOptions['--text']`) and adjusted the `ref` array for text properties (v0: now `['--text', '--text-panel', '--input-text']`; v1: expanded to include `--text` with original values).
`v0/src/simulator/src/themer/themer.js` `v1/src/simulator/src/themer/themer.js`	Enhanced `updateThemeForStyle`: simplified the selectedTheme check (using a falsy check), replaced `document.getElementsByTagName('html')[0]` with `document.documentElement`, implemented explicit handling for the `--text` CSS variable, and added a timeout mechanism to force the canvas refresh (v1 also adds `colors['text']` in `getCanvasColors`).

Sequence Diagram(s)

sequenceDiagram
    participant U as User
    participant D as DialogBox
    participant TM as Theme Manager
    participant T as Themer Module
    participant C as Canvas

    U->>D: Trigger input event
    D->>D: Execute changeCustomTheme(e) 
    D->>TM: Update customTheme in list
    TM->>T: Call updateThemeForStyle(themeName)
    T->>document: Update HTML CSS properties (incl. --text)
    T->>C: Set timeout to call renderCanvas()
    C-->>T: Canvas refresh complete

Suggested reviewers

JoshVarga

Poem

In a code field, I hopped along,
Refactoring functions into a song,
Setting themes with care and might,
Updating text to shine so bright,
A bunny's delight in every byte!
🐇✨

✨ Finishing Touches

[ ] 📝 Generate Docstrings

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

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

Mar 09 '25 22:03 coderabbitai[bot]

Deploy Preview for circuitverse ready!

Name	Link
Latest commit	b921c7ab8c59b7a73ba040b549811026821cbd67
Latest deploy log	https://app.netlify.com/projects/circuitverse/deploys/684d94e0db46660008f58e37
Deploy Preview	https://deploy-preview-519--circuitverse.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 48 (🟢 up 1 from production) Accessibility: 72 (no change from production) Best Practices: 92 (no change from production) SEO: 80 (no change from production) PWA: - View the detailed breakdown and full score reports

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

Mar 09 '25 22:03 netlify[bot]

@JoshVarga please review

Mar 10 '25 10:03 Kartikayy007

cv-frontend-vue
cv-frontend-vue copied to clipboard