Improve link colors for dark mode visibility
Added CSS variables for link colors with better contrast: - Light mode: #0066cc (normal), #004499 (hover) - Dark mode: #58a6ff (normal), #79b8ff (hover) Applied general link styling rules that adapt to both themes, ensuring links are clearly visible and distinguishable in dark mode.
This commit is contained in:
parent
5a74092c77
commit
6402fdb139
1 changed files with 21 additions and 2 deletions
|
|
@ -48,6 +48,8 @@
|
|||
--text-info: #0066cc;
|
||||
--text-success: #008800;
|
||||
--text-error: #cc0000;
|
||||
--link-color: #0066cc;
|
||||
--link-hover: #004499;
|
||||
--border-color: #e1e1e1;
|
||||
--border-color-dark: #ced4da;
|
||||
--border-code: #ccc;
|
||||
|
|
@ -75,6 +77,8 @@
|
|||
--text-info: #4da3ff;
|
||||
--text-success: #5fcc5f;
|
||||
--text-error: #ff6b6b;
|
||||
--link-color: #58a6ff;
|
||||
--link-hover: #79b8ff;
|
||||
--border-color: #404040;
|
||||
--border-color-dark: #4a4a4a;
|
||||
--border-code: #555;
|
||||
|
|
@ -323,13 +327,28 @@
|
|||
transition: background-color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
/* General link styling */
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Styling for links in the rooms list */
|
||||
#rooms-list a {
|
||||
text-decoration: none; /* Optional: Removes underline from links */
|
||||
color: var(--text-primary); /* Ensures link color matches the text color */
|
||||
color: var(--link-color);
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
#rooms-list a:hover {
|
||||
color: var(--link-hover);
|
||||
}
|
||||
|
||||
.hljs {
|
||||
position: relative;
|
||||
padding-left: 46px !important;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue