This repository has no description
add dark mode support to defs
author
damedotblog
date
(Feb 27, 2025, 11:38 AM -0500)
commit
1855deb7
1855deb77dc83a1f0d2cde77dae7b5b2a0697d62
parent
0eff79d1
0eff79d1037d738a746ec5017af8f58f4a875cd6
+58
-9
+49
-6
src/components/ScoringMethodology/ScoringMethodology.css
+49
-6
src/components/ScoringMethodology/ScoringMethodology.css
···
50
50
padding-bottom: 10.5px;
51
51
}
52
52
53
-
/* Add these styles to your ScoringMethodology.css file */
53
+
/* Add these styles to your ScoringMethodology.css file */
54
54
55
55
.definitions-container {
56
56
margin-top: 20px;
···
61
61
.definition-item {
62
62
margin-bottom: 10px;
63
63
border-radius: 6px;
64
-
background-color: #f8f9fa;
64
+
background-color: var(--navbar-bg);
65
65
overflow: hidden;
66
66
transition: all 0.3s ease;
67
+
border: 1px solid var(--card-border);
67
68
}
68
69
69
70
.definition-term {
···
73
74
align-items: center;
74
75
font-weight: 600;
75
76
cursor: pointer;
76
-
background-color: #edf2f7;
77
+
background-color: var(--navbar-bg);
77
78
border-radius: 6px;
79
+
color: var(--text);
80
+
transition: background-color 0.3s ease, color 0.3s ease;
78
81
}
79
82
80
83
.toggle-icon {
81
84
font-size: 16px;
82
85
font-weight: bold;
83
-
color: #4a5568;
86
+
color: var(--button-bg);
87
+
transition: color 0.3s ease;
84
88
}
85
89
86
90
.definition-description {
···
88
92
overflow: hidden;
89
93
padding: 0 15px;
90
94
transition: all 0.3s ease;
95
+
color: var(--text);
91
96
}
92
97
93
98
.definition-description.expanded {
94
99
max-height: 500px;
95
100
padding: 15px;
96
-
border-top: 1px solid #e2e8f0;
101
+
border-top: 1px solid var(--card-border);
102
+
}
103
+
104
+
.definition-item:hover {
105
+
border-color: var(--button-bg);
106
+
}
107
+
108
+
.definition-term:hover {
109
+
background-color: var(--background);
97
110
}
98
111
99
112
/* Alternative simple style (if you prefer a non-accordion approach) */
100
113
.definitions-simple .definition-item {
101
114
margin-bottom: 20px;
115
+
background-color: transparent;
116
+
border: none;
102
117
}
103
118
104
119
.definitions-simple .definition-term {
···
107
122
cursor: default;
108
123
background-color: transparent;
109
124
padding: 0;
125
+
color: var(--text);
110
126
}
111
127
112
128
.definitions-simple .definition-description {
113
129
max-height: none;
114
130
padding: 0 0 0 15px;
115
-
border-left: 3px solid #e2e8f0;
131
+
border-left: 3px solid var(--button-bg);
132
+
color: var(--text);
133
+
}
134
+
135
+
/* Dark mode specific overrides */
136
+
.dark-mode .definition-item {
137
+
background-color: var(--navbar-bg);
138
+
border-color: var(--card-border);
139
+
}
140
+
141
+
.dark-mode .definition-term {
142
+
background-color: var(--navbar-bg);
143
+
}
144
+
145
+
.dark-mode .definition-term:hover {
146
+
background-color: #2d2d2d;
147
+
}
148
+
149
+
.dark-mode .toggle-icon {
150
+
color: var(--button-bg);
151
+
}
152
+
153
+
.dark-mode .definition-description.expanded {
154
+
border-top-color: var(--card-border);
155
+
}
156
+
157
+
.dark-mode .definitions-simple .definition-description {
158
+
border-left-color: var(--button-bg);
116
159
}
+9
-3
src/components/ScoringMethodology/ScoringMethodology.js
+9
-3
src/components/ScoringMethodology/ScoringMethodology.js
···
133
133
<div className="definitions-container">
134
134
{definitions.map((item) => (
135
135
<div key={item.id} className="definition-item">
136
-
<dt className="definition-term" onClick={() => toggleTerm(item.id)}>
136
+
<dt
137
+
className="definition-term"
138
+
onClick={() => toggleTerm(item.id)}
139
+
role="button"
140
+
aria-expanded={expandedTerm === item.id}
141
+
>
137
142
{item.term}
138
143
{expandedTerm === item.id ?
139
-
<span className="toggle-icon">−</span> :
140
-
<span className="toggle-icon">+</span>
144
+
<span className="toggle-icon" aria-hidden="true">−</span> :
145
+
<span className="toggle-icon" aria-hidden="true">+</span>
141
146
}
142
147
</dt>
143
148
<dd
144
149
className={`definition-description ${expandedTerm === item.id ? 'expanded' : ''}`}
150
+
aria-hidden={expandedTerm !== item.id}
145
151
>
146
152
{item.definition}
147
153
</dd>