Skip to content

Commit 7157422

Browse files
NdaboomNdaboom
committed
[ENH] improve theme support: Enhance dark and light theme styles for headings, text, forms, and navigation elements
1 parent dc07d3a commit 7157422

File tree

1 file changed

+198
-9
lines changed

1 file changed

+198
-9
lines changed

‎public/styles/style-bootstrap.css‎

Lines changed: 198 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-

1+
22
:root {
33
--sub-menu-bg: linear-gradient(180deg,#fff,#fff,#e9ecef);
44
--sub-menu-color: #888;
@@ -2131,19 +2131,208 @@ nav .lbbuttonsel2 {
21312131
color: var(--title-color, #212529); /* fallback: dark gray */
21322132
}
21332133

2134-
.night .h1 {
2134+
/* Dark theme heading styles */
2135+
[data-bs-theme="dark"] .h1,
2136+
[data-bs-theme="dark"] h1 {
21352137
background-image: linear-gradient(to right, #000 0%, #333 100%);
2136-
color: #f8f9fa !important; /* very light gray for dark mode */
2138+
color: #f8f9fa !important;
2139+
}
2140+
2141+
/* Light theme text colors */
2142+
[data-bs-theme="light"] h1,
2143+
[data-bs-theme="light"] .h1,
2144+
[data-bs-theme="light"] .h2,
2145+
[data-bs-theme="light"] .h3,
2146+
[data-bs-theme="light"] .h4,
2147+
[data-bs-theme="light"] .h5,
2148+
[data-bs-theme="light"] .h6,
2149+
[data-bs-theme="light"] .fs-4,
2150+
[data-bs-theme="light"] .content-heading,
2151+
[data-bs-theme="light"] .panel-title {
2152+
color: #212529 !important; /* Darker gray for better contrast */
2153+
}
2154+
2155+
/* Dark theme text colors */
2156+
[data-bs-theme="dark"] h1,
2157+
[data-bs-theme="dark"] .h1,
2158+
[data-bs-theme="dark"] .h2,
2159+
[data-bs-theme="dark"] .h3,
2160+
[data-bs-theme="dark"] .h4,
2161+
[data-bs-theme="dark"] .h5,
2162+
[data-bs-theme="dark"] .h6,
2163+
[data-bs-theme="dark"] .fs-4,
2164+
[data-bs-theme="dark"] .content-heading,
2165+
[data-bs-theme="dark"] .panel-title {
2166+
color: #f8f9fa !important;
2167+
}
2168+
2169+
/* Main content areas */
2170+
[data-bs-theme="light"] .content-area,
2171+
[data-bs-theme="light"] .panel-content,
2172+
[data-bs-theme="light"] .card-body,
2173+
[data-bs-theme="light"] .modal-content,
2174+
[data-bs-theme="light"] .table,
2175+
[data-bs-theme="light"] .list-group-item {
2176+
color: #212529;
2177+
background-color: #ffffff;
2178+
}
2179+
2180+
[data-bs-theme="dark"] .content-area,
2181+
[data-bs-theme="dark"] .panel-content,
2182+
[data-bs-theme="dark"] .card-body,
2183+
[data-bs-theme="dark"] .modal-content,
2184+
[data-bs-theme="dark"] .table,
2185+
[data-bs-theme="dark"] .list-group-item {
2186+
color: #f8f9fa;
2187+
background-color: #212529;
2188+
}
2189+
2190+
/* Form elements */
2191+
[data-bs-theme="light"] .form-control,
2192+
[data-bs-theme="light"] .form-select,
2193+
[data-bs-theme="light"] .form-label,
2194+
[data-bs-theme="light"] .form-text,
2195+
[data-bs-theme="light"] label {
2196+
color: #212529;
2197+
}
2198+
2199+
[data-bs-theme="light"] .form-control,
2200+
[data-bs-theme="light"] .form-select,
2201+
[data-bs-theme="light"] input,
2202+
[data-bs-theme="light"] textarea,
2203+
[data-bs-theme="light"] select {
2204+
background-color: #ffffff;
2205+
border-color: #ced4da;
2206+
}
2207+
2208+
[data-bs-theme="dark"] .form-control,
2209+
[data-bs-theme="dark"] .form-select,
2210+
[data-bs-theme="dark"] .form-label,
2211+
[data-bs-theme="dark"] .form-text,
2212+
[data-bs-theme="dark"] label {
2213+
color: #f8f9fa;
2214+
}
2215+
2216+
[data-bs-theme="dark"] .form-control,
2217+
[data-bs-theme="dark"] .form-select {
2218+
background-color: #2b3035;
2219+
border-color: #6c757d;
2220+
color: #f8f9fa;
2221+
}
2222+
2223+
/* Ensure form controls are visible in dark mode */
2224+
[data-bs-theme="dark"] input[type="text"],
2225+
[data-bs-theme="dark"] input[type="password"],
2226+
[data-bs-theme="dark"] input[type="email"],
2227+
[data-bs-theme="dark"] input[type="number"],
2228+
[data-bs-theme="dark"] textarea,
2229+
[data-bs-theme="dark"] select,
2230+
[data-bs-theme="dark"] .form-select,
2231+
[data-bs-theme="dark"] select {
2232+
color: #f8f9fa !important;
2233+
background-color: #2b3035 !important;
2234+
}
2235+
2236+
/* Fix for select dropdown options in dark mode */
2237+
[data-bs-theme="dark"] select option {
2238+
color: #f8f9fa !important;
2239+
background-color: #2b3035 !important;
2240+
}
2241+
2242+
/* Ensure select dropdown remains visible when focused */
2243+
[data-bs-theme="dark"] select:focus {
2244+
color: #f8f9fa !important;
2245+
background-color: #2b3035 !important;
2246+
border-color: #86b7fe;
2247+
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
2248+
}
2249+
2250+
/* Fix for placeholder text in inputs */
2251+
[data-bs-theme="dark"] ::placeholder {
2252+
color: #adb5bd !important;
2253+
opacity: 1;
2254+
}
2255+
2256+
/* Ensure labels are visible in dark mode */
2257+
[data-bs-theme="dark"] label {
2258+
color: #f8f9fa !important;
2259+
}
2260+
2261+
/* Buttons */
2262+
[data-bs-theme="light"] .btn-outline-secondary {
2263+
color: #6c757d;
2264+
border-color: #6c757d;
2265+
}
2266+
2267+
[data-bs-theme="dark"] .btn-outline-secondary {
2268+
color: #adb5bd;
2269+
border-color: #6c757d;
2270+
}
2271+
2272+
/* Context menus */
2273+
[data-bs-theme="light"] .contextMenu {
2274+
background-color: #ffffff;
2275+
border: 1px solid #dee2e6;
2276+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
2277+
}
2278+
2279+
[data-bs-theme="dark"] .contextMenu {
2280+
background-color: #343a40;
2281+
border: 1px solid #495057;
2282+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
2283+
}
2284+
2285+
[data-bs-theme="light"] .cmtext {
2286+
color: #212529;
2287+
}
2288+
2289+
[data-bs-theme="dark"] .cmtext {
2290+
color: #f8f9fa;
2291+
}
2292+
2293+
/* Navigation and headers */
2294+
[data-bs-theme="light"] .topbar_td,
2295+
[data-bs-theme="light"] .masthead {
2296+
background-color: #f8f9fa;
2297+
color: #212529;
2298+
}
2299+
2300+
[data-bs-theme="dark"] .topbar_td,
2301+
[data-bs-theme="dark"] .masthead {
2302+
background-color: #343a40;
2303+
color: #f8f9fa;
2304+
}
2305+
2306+
/* Tables */
2307+
[data-bs-theme="light"] .table {
2308+
--bs-table-bg: #ffffff;
2309+
--bs-table-striped-bg: #f8f9fa;
2310+
--bs-table-hover-bg: #e9ecef;
2311+
}
2312+
2313+
[data-bs-theme="dark"] .table {
2314+
--bs-table-bg: #212529;
2315+
--bs-table-striped-bg: #2c3034;
2316+
--bs-table-hover-bg: #32383e;
2317+
color: #f8f9fa;
2318+
}
2319+
2320+
/* Tabs */
2321+
[data-bs-theme="light"] .nav-tabs .nav-link {
2322+
color: #495057;
2323+
}
2324+
2325+
[data-bs-theme="dark"] .nav-tabs .nav-link {
2326+
color: #f8f9fa;
21372327
}
21382328

2139-
[data-bs-theme="light"] h1, h1, [data-bs-theme="light"] .fs-4, .fs-4,
2140-
[data-bs-theme="light"] div, div {
2141-
color: #adafae !important; /* very dark gray, almost black */
2329+
/* Custom scrollbars */
2330+
[data-bs-theme="light"] ::-webkit-scrollbar-thumb {
2331+
background-color: #adb5bd;
21422332
}
21432333

2144-
[data-bs-theme="dark"] h1, h1, [data-bs-theme="dark"] .fs-4, .fs-4,
2145-
[data-bs-theme="dark"] div, div {
2146-
color: #f8f9fa !important; /* very light gray */
2334+
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
2335+
background-color: #6c757d;
21472336
}
21482337

21492338
.h2end {

0 commit comments

Comments
 (0)