Custom Color Theme Selector #4641
Draft
+3,145
−1,756
Conversation
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
Introduces a CustomColorSelector component and integrates it into the ColorPicker, allowing users to define and persist custom link, text, and background colors for the site theme. Updates dependencies to include tinycolor2 and its types for color manipulation.
Introduces a 'custom' display mode for themes, allowing users to define and persist their own color schemes. Updates ColorPicker and ThemeDropdown to support the custom mode, including UI logic to prevent switching from custom to default modes without explicit action. Enhances themeHandler to register and apply custom themes from localStorage, manage previous mode restoration, and apply additional CSS variables for custom backgrounds.
Cleaned up ColorPicker.vue and ThemeDropdown.vue by removing unused variables and functions related to theme state. This improves code clarity and maintainability.
|
Great boi |
The @click.self handler was removed from the modal overlay, so clicking the overlay no longer closes the CustomColorSelector modal.
Collaborator
|
Adjusted the lightening values for card backgrounds in custom themes from 5/8 to 10/15 to improve visual distinction between cards and the main background.
Collaborator
|
alright that seems to of been fixed now, if anyone finds any other problems with this please let us know |
|
When changing the text hex it doesn't change it for the buttons text in the theme customizer, so setting a bright link color makes it hard to read. 
|
Exclude the 'custom' theme from preset theme options in ColorPicker.vue and correct button text color assignments for custom themes. In CustomColorSelector.vue, update button styles to reflect selected custom colors dynamically, enhancing the user experience when previewing and applying custom color selections.
Author
|
@ViVi-Vibes fixed, cheak: https://supremefmhy.pages.dev/ |
Bump Vue dependency to 3.5.0 in package.json. Add SCSS preprocessor option to VitePress config for modern compiler API. Refactor UnoCSS config to use kebab-case CSS property names for consistency.
Regenerated pnpm-lock.yaml to reflect updated dependencies.
|
This Text remains inconsistent, and can't be changed, so changing to a darker background would make it invisible. 
|
|
Also a idea if it could be implemented. 
|
Contributor
Issues created by a FMHY Discord server member. |
Replaces the description paragraph's class-based text color with an inline style using the CSS variable '--vp-c-text-1' for improved consistency with theming.
Introduces computed warnings for low contrast between link/text and background colors based on WCAG AA standards. Displays warning messages in the UI when contrast ratios fall below 4.5:1 to improve accessibility awareness.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 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.
I added a custom theme selector; to check, visit https://supremefmhy.pages.dev/ or https://suprememuhit.github.io/edit.