Link Hover Color Issue: Variable ID Mismatch in Style Settings Definition #284
Description
Primary Theme Version
v2.10.0
Debug Info
The existing Style Settings menu provides an option to customize the "Resolved Links Color when Hovered." This enhancement ensures that option is functional and correctly maps to the corresponding CSS variable in the theme.
Problem:
Currently, the variable ID used for both the standard link color and the link hover color is identical (link-color) in the theme's Style Settings definition. This duplication prevents the unique CSS variable required for the hover state (--link-color-hover) from being correctly generated and applied, making the hover color customization feature ineffective for users.
Current Style Settings Snippet (causing the issue):
# ...
- id: link-color
type: variable-themed-color
title: Resolved Links Color
# ... defaults
-
# ISSUE: This ID is duplicated, preventing --link-color-hover from being set
id: link-color
type: variable-themed-color
title: Resolved Links Color when Hovered
# ... defaults
# ...
Enhancement description
Proposed Fix:
The variable ID for the "Resolved Links Color when Hovered" setting should be changed to link-color-hover to match the CSS variable used in the theme's stylesheet.
Proposed Style Settings Snippet:
# ...
- id: link-color-hover
type: variable-themed-color
title: Resolved Links Color when Hovered
format: hsl
opacity: true
default-light: 'hsla(43, 83%, 57%, 1)'
default-dark: 'hsla(43, 69%, 63%, 1)'
# ...
Justification:
By correcting the ID, the user's customized hover color is successfully assigned to the --link-color-hover variable, which the main CSS already targets:
.cm-hmd-internal-link .cm-underline:hover {
color: var(--link-color-hover);
/* ... other properties */
}