Merged
Conversation
Added on-off button for color blind mode in SettingSidebar.vue. Co-authored-by: GerardChabaBristol <tl23383@bristol.ac.uk>
Update App.vue to work with the color blind mode. Co-authored-by: GerardChabaBristol <tl23383@bristol.ac.uk>
Updated SettingSidebar.vue to include the color blind palette. Co-authored-by: GerardChabaBristol <tl23383@bristol.ac.uk>
Defined isColorblind in SettingSidebar.vue's data(): Added the isColorblind property to the data() of SettingSidebar.vue so it can track the toggle state. Co-authored-by: Siyuan106 <gr23994@bristol.ac.uk>
- Properly Communicate Between Components: Use the @colorblindToggled event emitted from SettingSidebar.vue to update the colorblindMode state in App.vue. - Fix the toggleColorblindMode Method: Make sure the toggleColorblindMode method correctly toggles the isColorblind state and emits the event for the parent. Co-authored-by: Siyuan106 <gr23994@bristol.ac.uk>
Added the global styles for the .red-green-colorblind class in the <style> section of your App.vue file. Co-authored-by: Siyuan106 <gr23994@bristol.ac.uk>
Add the global color scheme styles, including default mode and colorblind mode. Co-authored-by: GerardChabaBristol <tl23383@bristol.ac.uk>
Included a fallback mechanism for cases where the theme is not explicitly set, and the names of color schemes were adjusted. Co-authored-by: Siyuan106 <gr23994@bristol.ac.uk>
Updated SettingSidebar.vue to work with color.js. Co-authored-by: Siyuan106 <gr23994@bristol.ac.uk>
Updated App.vue to work with color.js. Co-authored-by: Siyuan106 <gr23994@bristol.ac.uk>
- Integrated getTheme from color.js to manage themes dynamically. - Updated applyTheme method to set CSS variables using the selected theme. - Replaced all hardcoded colors in the style section with CSS variables from the theme. Co-authored-by: Siyuan106 <gr23994@bristol.ac.uk>
- Incorporated getTheme to fetch the current theme's colors. - Defined styles dynamically using themeStyles for elements like aside, button, h3, and textarea. - Used :style bindings for aside, button, h3, and textarea to apply dynamic styles. - Applied the default theme on mounted() to initialize the component's theme.| Co-authored-by: Siyuan106 <gr23994@bristol.ac.uk>
- Used the getTheme function to dynamically fetch and apply theme colors. - Defined styles for aside, button, and text elements using themeStyles. - Applied :style bindings for aside, button, and h3 elements to reflect the theme dynamically. - Set up the default theme on mounted() to initialize the component's styles. - Ensured that all buttons, sidebar background, and text colors match the active theme. Co-authored-by: Siyuan106 <gr23994@bristol.ac.uk>
Update code in HistorySidebar.vue, to fix the color blind mode. Co-authored-by: GerardChabaBristol<tl23383@bristol.ac.uk>
Update SettingSidebar to fix color blind mode. Co-authored-by: GerardChabaBristol <tl23383@bristol.ac.uk>
Add code in ImportantSidebar.vue to fix the color blind scheme. Co-authored-by: GerardChabaBristol <tl23383@bristol.ac.uk>
Change the color for the normal mode. Co-authored-by: GerardChabaBristol <tl23383@bristol.ac.uk>
Change the color of button for normal mode. Co-authored-by: GerardChabaBristol <tl23383@bristol.ac.uk>
Fix issues.
Update code in SettingSidebar.vue to change the 'close' button's color in color blind mode. Co-authored-by: GerardChabaBristol <tl23383@bristol.ac.uk>
Updated the color blind palette to cater for blue-yellow color blindness (tritanopia) since our main color is now IBM Blue. Co-authored-by: Siyuan106 <gr23994@bristol.ac.uk>
Fixing the close button's color. Co-authored-by: GerardChabaBristol <tl23383@bristol.ac.uk>
Updated the user chat bubble to pastel blue. Co-authored-by: Siyuan106 <gr23994@bristol.ac.uk>
Changed folder directory location for color.js (line 40). Co-authored-by: Siyuan106 <gr23994@bristol.ac.uk>
Siyuan106
approved these changes
Jan 29, 2025
Contributor
Siyuan106
left a comment
Siyuan106
left a comment
There was a problem hiding this comment.
The color blind mode looks good!
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Issue(s):
#105
Type of change:
Description:
Created a color-blind mode feature, specifically blue-yellow color blindness (tritanopia).
Additional context:
The code will show variables called "red-green-colorblind", because we were working on that initially. However, the color blind palette was adjusted to cater to blue-yellow color blindness.
Testing instructions:
It has been tested and works perfectly.