| 1 | <script>
|
| 2 | (function() {
|
| 3 | if (localStorage.getItem("dark_mode") === "on") {
|
| 4 | document.documentElement.classList.add("dark-mode");
|
| 5 | document.body.classList.add("dark-mode");
|
| 6 | document.documentElement.style.background = "#121212";
|
| 7 | document.body.style.background = "#121212";
|
| 8 | }
|
| 9 | })();
|
| 10 | </script>
|
| 11 |
|
| 12 | <style>
|
| 13 |
|
| 14 | /* ============================================================
|
| 15 | GLOBAL ROOT OVERRIDES
|
| 16 | ============================================================ */
|
| 17 | html.dark-mode,
|
| 18 | body.dark-mode {
|
| 19 | --body-bg: #121212 !important;
|
| 20 | --body-color: #e0e0e0 !important;
|
| 21 |
|
| 22 | --100: #1e1e1e !important;
|
| 23 | --200: #2a2a2a !important;
|
| 24 | --300: #333333 !important;
|
| 25 | --400: #3d3d3d !important;
|
| 26 | --500: #555555 !important;
|
| 27 | --600: #777777 !important;
|
| 28 | --700: #aaaaaa !important;
|
| 29 | --800: #cccccc !important;
|
| 30 | --900: #e0e0e0 !important;
|
| 31 |
|
| 32 | --bg-light: #1e1e1e !important;
|
| 33 | --color-light: #e0e0e0 !important;
|
| 34 |
|
| 35 | --navbar-color: #e0e0e0 !important;
|
| 36 | --navbar-hover-color: #ffffff !important;
|
| 37 | --navbar-brand-color: #e0e0e0 !important;
|
| 38 | --navbar-brand-hover-color: #ffffff !important;
|
| 39 |
|
| 40 | --btn-primary: #4a90e2 !important;
|
| 41 | --btn-primary-text: #ffffff !important;
|
| 42 | --btn-primary-border: #4a90e2 !important;
|
| 43 |
|
| 44 | --btn-secondary: #2a2a2a !important;
|
| 45 | --btn-secondary-text: #e0e0e0 !important;
|
| 46 | --btn-secondary-border: #3a3a3a !important;
|
| 47 |
|
| 48 | --dropdown-bg: #1e1e1e !important;
|
| 49 | --dropdown-link-color: #e0e0e0 !important;
|
| 50 | --dropdown-link-hover-color: #ffffff !important;
|
| 51 | --dropdown-border-color: #3a3a3a !important;
|
| 52 | }
|
| 53 |
|
| 54 | /* ============================================================
|
| 55 | SAFE GLOBAL TEXT COLOR (NO BADGES / INPUTS / SEARCH / QUIZ)
|
| 56 | ============================================================ */
|
| 57 | html.dark-mode body *:not(.badge):not(.o_filter_tag):not(.form-control):not(.form-select):not(.o-autocomplete--dropdown-item):not(.o_dropdown_menu):not(i.fa-circle):not(i.fa-check-circle-o):not(button):not(.btn):not(.navbar a):not(.nav-link),
|
| 58 | body.dark-mode body *:not(.badge):not(.o_filter_tag):not(.form-control):not(.form-select):not(.o-autocomplete--dropdown-item):not(.o_dropdown_menu):not(i.fa-circle):not(i.fa-check-circle-o):not(button):not(.btn):not(.navbar a):not(.nav-link) {
|
| 59 | color: var(--body-color) !important;
|
| 60 | }
|
| 61 |
|
| 62 | /* ============================================================
|
| 63 | BADGES / FILTER TAGS
|
| 64 | ============================================================ */
|
| 65 | html.dark-mode .badge,
|
| 66 | body.dark-mode .badge,
|
| 67 | html.dark-mode .o_filter_tag,
|
| 68 | body.dark-mode .o_filter_tag {
|
| 69 | background: var(--bg-light) !important;
|
| 70 | color: var(--color-light) !important;
|
| 71 | border-color: var(--bg-solid, #555) !important;
|
| 72 | }
|
| 73 |
|
| 74 | /* ============================================================
|
| 75 | QUIZ ICON FIX
|
| 76 | ============================================================ */
|
| 77 | html.dark-mode .o_wslides_js_lesson_quiz_question .list-group-item input:checked + i.fa-circle,
|
| 78 | body.dark-mode .o_wslides_js_lesson_quiz_question .list-group-item input:checked + i.fa-circle {
|
| 79 | color: #6A3DFF !important;
|
| 80 | }
|
| 81 |
|
| 82 | /* ============================================================
|
| 83 | GLOBAL BACKGROUND FIX
|
| 84 | ============================================================ */
|
| 85 | html.dark-mode,
|
| 86 | body.dark-mode,
|
| 87 | html.dark-mode #wrapwrap,
|
| 88 | body.dark-mode #wrapwrap,
|
| 89 | html.dark-mode #wrapwrap > main,
|
| 90 | body.dark-mode #wrapwrap > main {
|
| 91 | background-color: #121212 !important;
|
| 92 | color: #e0e0e0 !important;
|
| 93 | }
|
| 94 |
|
| 95 | /* ============================================================
|
| 96 | FIX .bg-white OVERRIDES
|
| 97 | ============================================================ */
|
| 98 | html.dark-mode .bg-white,
|
| 99 | body.dark-mode .bg-white,
|
| 100 | html.dark-mode .bg-100,
|
| 101 | body.dark-mode .bg-100,
|
| 102 | html.dark-mode .bg-200,
|
| 103 | body-dark-mode .bg-200,
|
| 104 | html.dark-mode .bg-300,
|
| 105 | body-dark-mode .bg-300,
|
| 106 | html.dark-mode .bg-400,
|
| 107 | body-dark-mode .bg-400,
|
| 108 | html.dark-mode .bg-500,
|
| 109 | body-dark-mode .bg-500,
|
| 110 | html.dark-mode .bg-600,
|
| 111 | body-dark-mode .bg-600,
|
| 112 | html.dark-mode .bg-700,
|
| 113 | body-dark-mode .bg-700,
|
| 114 | html.dark-mode .bg-800,
|
| 115 | body-dark-mode .bg-800,
|
| 116 | html.dark-mode .bg-900,
|
| 117 | body-dark-mode .bg-900 {
|
| 118 | background-color: #1e1e1e !important;
|
| 119 | color: #e0e0e0 !important;
|
| 120 | }
|
| 121 |
|
| 122 | /* ============================================================
|
| 123 | SLIDES / COURSE CONTENT
|
| 124 | ============================================================ */
|
| 125 | html.dark-mode .o_wslides_body,
|
| 126 | body-dark-mode .o_wslides_body,
|
| 127 | html.dark-mode .o_wslides_body > #wrapwrap > main,
|
| 128 | body-dark-mode .o_wslides_body > #wrapwrap > main,
|
| 129 | html.dark-mode .o_wslides_course_main,
|
| 130 | body-dark-mode .o_wslides_course_main,
|
| 131 | html.dark-mode .o_wslides_course_main *,
|
| 132 | body-dark-mode .o_wslides_course_main *,
|
| 133 | html.dark-mode .o_wslides_course_sidebar,
|
| 134 | body-dark-mode .o_wslides_course_sidebar,
|
| 135 | html.dark-mode .o_wslides_course_sidebar *,
|
| 136 | body-dark-mode .o_wslides_course_sidebar *,
|
| 137 | html.dark-mode .o_wslides_lesson_content,
|
| 138 | body-dark-mode .o_wslides_lesson_content,
|
| 139 | html.dark-mode .o_wslides_lesson_content *,
|
| 140 | body-dark-mode .o_wslides_lesson_content *,
|
| 141 | html.dark-mode .o_wslides_quiz,
|
| 142 | body-dark-mode .o_wslides_quiz,
|
| 143 | html.dark-mode .o_wslides_quiz *,
|
| 144 | body-dark-mode .o_wslides_quiz * {
|
| 145 | background-color: #121212 !important;
|
| 146 | color: #e0e0e0 !important;
|
| 147 | }
|
| 148 |
|
| 149 | /* ============================================================
|
| 150 | SECTIONS / SNIPPETS
|
| 151 | ============================================================ */
|
| 152 | html.dark-mode section,
|
| 153 | body-dark-mode section,
|
| 154 | html.dark-mode .s_block,
|
| 155 | body-dark-mode .s_block,
|
| 156 | html.dark-mode .s_text_block,
|
| 157 | body-dark-mode .s_text_block,
|
| 158 | html.dark-mode .s_cover,
|
| 159 | body-dark-mode .s_cover,
|
| 160 | html.dark-mode .s_banner,
|
| 161 | body-dark-mode .s_banner,
|
| 162 | html.dark-mode .s_features,
|
| 163 | body-dark-mode .s_features,
|
| 164 | html.dark-mode .s_call_to_action,
|
| 165 | body-dark-mode .s_call_to_action,
|
| 166 | html.dark-mode .o_panel,
|
| 167 | body-dark-mode .o_panel,
|
| 168 | html.dark-mode .o_cc1,
|
| 169 | body-dark-mode .o_cc1,
|
| 170 | html.dark-mode .o_cc2,
|
| 171 | body-dark-mode .o_cc2,
|
| 172 | html.dark-mode .o_cc3,
|
| 173 | body-dark-mode .o_cc3,
|
| 174 | html.dark-mode .o_cc4,
|
| 175 | body-dark-mode .o_cc4,
|
| 176 | html.dark-mode .o_cc5,
|
| 177 | body-dark-mode .o_cc5 {
|
| 178 | background-color: #1e1e1e !important;
|
| 179 | color: #e0e0e0 !important;
|
| 180 | }
|
| 181 |
|
| 182 | /* ============================================================
|
| 183 | CONTAINERS / CARDS
|
| 184 | ============================================================ */
|
| 185 | html.dark-mode .container,
|
| 186 | body-dark-mode .container,
|
| 187 | html.dark-mode .row,
|
| 188 | body-dark-mode .row,
|
| 189 | html.dark-mode .card,
|
| 190 | body-dark-mode .card,
|
| 191 | html.dark-mode .card-body,
|
| 192 | body-dark-mode .card-body,
|
| 193 | html.dark-mode .o_panel,
|
| 194 | body-dark-mode .o_panel {
|
| 195 | background-color: #1e1e1e !important;
|
| 196 | color: #e0e0e0 !important;
|
| 197 | }
|
| 198 |
|
| 199 | /* ============================================================
|
| 200 | INPUTS / FORM CONTROLS
|
| 201 | ============================================================ */
|
| 202 | html.dark-mode input,
|
| 203 | body-dark-mode input,
|
| 204 | html.dark-mode textarea,
|
| 205 | body-dark-mode textarea,
|
| 206 | html.dark-mode select,
|
| 207 | body-dark-mode select,
|
| 208 | html.dark-mode .form-control,
|
| 209 | body-dark-mode .form-control,
|
| 210 | html.dark-mode .form-select,
|
| 211 | body-dark-mode .form-select {
|
| 212 | background-color: #2a2a2a !important;
|
| 213 | color: #e0e0e0 !important;
|
| 214 | border-color: #3a3a3a !important;
|
| 215 | }
|
| 216 |
|
| 217 | /* ============================================================
|
| 218 | SEARCHBAR RESULTS / AUTOCOMPLETE
|
| 219 | ============================================================ */
|
| 220 | html.dark-mode .o-autocomplete--dropdown-menu,
|
| 221 | body-dark-mode .o-autocomplete--dropdown-menu,
|
| 222 | html.dark-mode .o_dropdown_menu,
|
| 223 | body-dark-mode .o_dropdown_menu {
|
| 224 | background-color: #1e1e1e !important;
|
| 225 | border-color: #3a3a3a !important;
|
| 226 | }
|
| 227 |
|
| 228 | html.dark-mode .o-autocomplete--dropdown-item,
|
| 229 | body-dark-mode .o-autocomplete--dropdown-item,
|
| 230 | html.dark-mode .o_dropdown_menu .dropdown-item,
|
| 231 | body-dark-mode .o_dropdown_menu .dropdown-item {
|
| 232 | color: #e0e0e0 !important;
|
| 233 | background-color: transparent !important;
|
| 234 | }
|
| 235 |
|
| 236 | html.dark-mode .o-autocomplete--dropdown-item:hover,
|
| 237 | body-dark-mode .o-autocomplete--dropdown-item:hover,
|
| 238 | html.dark-mode .o_dropdown_menu .dropdown-item:hover,
|
| 239 | body-dark-mode .o_dropdown_menu .dropdown-item:hover {
|
| 240 | background-color: #2a2a2a !important;
|
| 241 | color: #ffffff !important;
|
| 242 | }
|
| 243 |
|
| 244 | html.dark-mode .o-autocomplete--dropdown-item *,
|
| 245 | body-dark-mode .o-autocomplete--dropdown-item *,
|
| 246 | html.dark-mode .o_dropdown_menu .dropdown-item *,
|
| 247 | body-dark-mode .o_dropdown_menu .dropdown-item * {
|
| 248 | color: inherit !important;
|
| 249 | }
|
| 250 |
|
| 251 | /* ============================================================
|
| 252 | DESKTOP NAVBAR
|
| 253 | ============================================================ */
|
| 254 | html.dark-mode header,
|
| 255 | body-dark-mode header,
|
| 256 | html.dark-mode .navbar,
|
| 257 | body-dark-mode .navbar,
|
| 258 | html.dark-mode .navbar-light,
|
| 259 | body-dark-mode .navbar-light {
|
| 260 | background-color: #1e1e1e !important;
|
| 261 | color: #e0e0e0 !important;
|
| 262 | }
|
| 263 |
|
| 264 | html.dark-mode .navbar a,
|
| 265 | body-dark-mode .navbar a,
|
| 266 | html.dark-mode .navbar-nav .nav-link,
|
| 267 | body-dark-mode .navbar-nav .nav-link {
|
| 268 | color: #e0e0e0 !important;
|
| 269 | }
|
| 270 |
|
| 271 | html.dark-mode .navbar-nav .nav-link:hover,
|
| 272 | body-dark-mode .navbar-nav .nav-link:hover {
|
| 273 | color: #ffffff !important;
|
| 274 | }
|
| 275 |
|
| 276 | /* ============================================================
|
| 277 | MOBILE NAVBAR
|
| 278 | ============================================================ */
|
| 279 | html.dark-mode .o_navbar_mobile,
|
| 280 | body-dark-mode .o_navbar_mobile {
|
| 281 | background-color: #1e1e1e !important;
|
| 282 | color: #e0e0e0 !important;
|
| 283 | }
|
| 284 |
|
| 285 | html.dark-mode .o_menu_toggle,
|
| 286 | body-dark-mode .o_menu_toggle {
|
| 287 | color: #e0e0e0 !important;
|
| 288 | filter: invert(1) brightness(2);
|
| 289 | }
|
| 290 |
|
| 291 | html.dark-mode .o_menu_drawer,
|
| 292 | body-dark-mode .o_menu_drawer {
|
| 293 | background-color: #1e1e1e !important;
|
| 294 | color: #e0e0e0 !important;
|
| 295 | backdrop-filter: none !important;
|
| 296 | }
|
| 297 |
|
| 298 | html.dark-mode .o_menu_sections,
|
| 299 | body-dark-mode .o_menu_sections {
|
| 300 | background-color: #1e1e1e !important;
|
| 301 | }
|
| 302 |
|
| 303 | html.dark-mode .o_nav_entry,
|
| 304 | body-dark-mode .o_nav_entry,
|
| 305 | html.dark-mode .o_menu_item,
|
| 306 | body-dark-mode .o_menu_item {
|
| 307 | color: #e0e0e0 !important;
|
| 308 | }
|
| 309 |
|
| 310 | html.dark-mode .o_nav_entry:hover,
|
| 311 | body-dark-mode .o_nav_entry:hover,
|
| 312 | html.dark-mode .o_menu_item:hover,
|
| 313 | body-dark-mode .o_menu_item:hover {
|
| 314 | background-color: #2a2a2a !important;
|
| 315 | color: #ffffff !important;
|
| 316 | }
|
| 317 |
|
| 318 | html.dark-mode .o_nav_entry.active,
|
| 319 | body-dark-mode .o_nav_entry.active,
|
| 320 | html.dark-mode .o_menu_item.active,
|
| 321 | body-dark-mode .o_menu_item.active {
|
| 322 | background-color: #4a90e2 !important;
|
| 323 | color: #ffffff !important;
|
| 324 | }
|
| 325 |
|
| 326 | /* ============================================================
|
| 327 | DARK MODE MENU LINK
|
| 328 | ============================================================ */
|
| 329 | a[href="#darkmode"] {
|
| 330 | display: inline-block !important;
|
| 331 | padding: .5rem 1rem !important;
|
| 332 | color: inherit !important;
|
| 333 | }
|
| 334 |
|
| 335 | html.dark-mode a[href="#darkmode"]:hover,
|
| 336 | body-dark-mode a[href="#darkmode"]:hover {
|
| 337 | color: #ffffff !important;
|
| 338 | }
|
| 339 |
|
| 340 | /* ============================================================
|
| 341 | HAMBURGER ICON
|
| 342 | ============================================================ */
|
| 343 | html.dark-mode .navbar-toggler-icon,
|
| 344 | body-dark-mode .navbar-toggler-icon {
|
| 345 | filter: invert(1) brightness(2);
|
| 346 | }
|
| 347 |
|
| 348 | /* ============================================================
|
| 349 | FOOTER
|
| 350 | ============================================================ */
|
| 351 | html.dark-mode footer,
|
| 352 | body-dark-mode footer {
|
| 353 | background-color: #1e1e1e !important;
|
| 354 | color: #e0e0e0 !important;
|
| 355 | }
|
| 356 | /* ============================================
|
| 357 | FINAL OVERRIDE — FIX WHITE DROPDOWN BACKGROUND
|
| 358 | ============================================ */
|
| 359 |
|
| 360 | html.dark-mode:root,
|
| 361 | body.dark-mode:root {
|
| 362 | --dropdown-bg: #000000 !important;
|
| 363 | --dropdown-link-color: #e0e0e0 !important;
|
| 364 | --dropdown-link-hover-bg: #2a2a2a !important;
|
| 365 | --dropdown-link-hover-color: #ffffff !important;
|
| 366 | }
|
| 367 | html.dark-mode .dropdown-menu,
|
| 368 | body.dark-mode .dropdown-menu,
|
| 369 | html.dark-mode .o_dropdown_menu,
|
| 370 | body.dark-mode .o_dropdown_menu {
|
| 371 | background-color: #000000 !important;
|
| 372 | }
|
| 373 | /* ============================================
|
| 374 | PORTAL CHATTER — JS-INJECTED STYLE OVERRIDE
|
| 375 | ============================================ */
|
| 376 |
|
| 377 | html.dark-mode .o-mail-Chatter-top,
|
| 378 | html.dark-mode .o-portal-Chatter .o-mail-Chatter-top,
|
| 379 | html.dark-mode .o-mail-Chatter-top.o-mail-Chatter-top,
|
| 380 | html.dark-mode .o-mail-Chatter-top[class],
|
| 381 | html.dark-mode .o-mail-Chatter-top:not([style]) {
|
| 382 | background-color: #1e1e1e !important;
|
| 383 | color: #e0e0e0 !important;
|
| 384 | }
|
| 385 | /* ============================================================
|
| 386 | BOOTSTRAP 5.3 POPOVER + TOOLTIP DARK-MODE FIX
|
| 387 | ============================================================ */
|
| 388 |
|
| 389 | html.dark-mode,
|
| 390 | body.dark-mode {
|
| 391 | /* Core BS popover tokens */
|
| 392 | --bs-popover-bg: #1e1e1e !important;
|
| 393 | --bs-popover-border-color: #3a3a3a !important;
|
| 394 | --bs-popover-header-bg: #2a2a2a !important;
|
| 395 | --bs-popover-header-color: #e0e0e0 !important;
|
| 396 | --bs-popover-body-color: #e0e0e0 !important;
|
| 397 | --bs-popover-box-shadow: 0px 4px 16px rgba(0,0,0,0.45) !important;
|
| 398 |
|
| 399 | /* Tooltip tokens */
|
| 400 | --bs-tooltip-bg: #2a2a2a !important;
|
| 401 | --bs-tooltip-color: #e0e0e0 !important;
|
| 402 | }
|
| 403 |
|
| 404 | /* Hard element overrides (Bootstrap injects these dynamically) */
|
| 405 | html.dark-mode .popover,
|
| 406 | body.dark-mode .popover {
|
| 407 | background-color: var(--bs-popover-bg) !important;
|
| 408 | border-color: var(--bs-popover-border-color) !important;
|
| 409 | color: var(--bs-popover-body-color) !important;
|
| 410 | }
|
| 411 |
|
| 412 | html.dark-mode .popover-header,
|
| 413 | body.dark-mode .popover-header {
|
| 414 | background-color: var(--bs-popover-header-bg) !important;
|
| 415 | color: var(--bs-popover-header-color) !important;
|
| 416 | border-bottom-color: var(--bs-popover-border-color) !important;
|
| 417 | }
|
| 418 |
|
| 419 | html.dark-mode .popover-body,
|
| 420 | body.dark-mode .popover-body {
|
| 421 | color: var(--bs-popover-body-color) !important;
|
| 422 | }
|
| 423 |
|
| 424 | /* Tooltip hard override */
|
| 425 | html.dark-mode .tooltip-inner,
|
| 426 | body.dark-mode .tooltip-inner {
|
| 427 | background-color: var(--bs-tooltip-bg) !important;
|
| 428 | color: var(--bs-tooltip-color) !important;
|
| 429 | }
|
| 430 |
|
| 431 | /* ============================================================
|
| 432 | DARK MODE ALERT FIX — CORRECT COLORS
|
| 433 | ============================================================ */
|
| 434 |
|
| 435 | html.dark-mode .alert,
|
| 436 | body.dark-mode .alert {
|
| 437 | background-color: #1e1e1e !important;
|
| 438 | color: #e0e0e0 !important;
|
| 439 | border-color: #3a3a3a !important;
|
| 440 | }
|
| 441 |
|
| 442 | /* Danger */
|
| 443 | html.dark-mode .alert-danger,
|
| 444 | body.dark-mode .alert-danger {
|
| 445 | --alert-bg: #2a1a1a !important;
|
| 446 | --alert-border-color: #5a2a2a !important;
|
| 447 | --alert-color: #ffb3b3 !important;
|
| 448 | }
|
| 449 |
|
| 450 | /* Warning */
|
| 451 | html.dark-mode .alert-warning,
|
| 452 | body.dark-mode .alert-warning {
|
| 453 | --alert-bg: #3a3200 !important;
|
| 454 | --alert-border-color: #5a4a00 !important;
|
| 455 | --alert-color: #ffe9a6 !important;
|
| 456 | }
|
| 457 |
|
| 458 | /* Success */
|
| 459 | html.dark-mode .alert-success,
|
| 460 | body.dark-mode .alert-success {
|
| 461 | --alert-bg: #0f2a1a !important;
|
| 462 | --alert-border-color: #1f4a2a !important;
|
| 463 | --alert-color: #b3ffd1 !important;
|
| 464 | }
|
| 465 |
|
| 466 | /* Info */
|
| 467 | html.dark-mode .alert-info,
|
| 468 | body.dark-mode .alert-info {
|
| 469 | --alert-bg: #0a2a33 !important;
|
| 470 | --alert-border-color: #0f3a4a !important;
|
| 471 | --alert-color: #b3ecff !important;
|
| 472 | }
|
| 473 | html.dark-mode .o_wslides_body a.o_wslides_js_quiz_is_correct input:checked + i.fa-check-circle-o,
|
| 474 | body.dark-mode .o_wslides_body a.o_wslides_js_quiz_is_correct input:checked + i.fa-check-circle-o {
|
| 475 | color: #6A3DFF !important;
|
| 476 | }
|
| 477 | /* ============================================================
|
| 478 | DARK MODE QUIZ LIST-GROUP — HARD OVERRIDE
|
| 479 | ============================================================ */
|
| 480 |
|
| 481 | /* Force background + text for quiz answer blocks */
|
| 482 | html.dark-mode .o_wslides_js_lesson_quiz_question .list-group,
|
| 483 | body.dark-mode .o_wslides_js_lesson_quiz_question .list-group {
|
| 484 | background-color: #232323 !important;
|
| 485 | }
|
| 486 | /* Actual answer rows */
|
| 487 | html.dark-mode .o_wslides_js_lesson_quiz_question .list-group-item,
|
| 488 | body-dark-mode .o_wslides_js_lesson_quiz_question .list-group-item {
|
| 489 | background-color: #121212 !important;
|
| 490 | color: #f5f5f5 !important;
|
| 491 | border-color: #1e1e1e !important;
|
| 492 | }
|
| 493 |
|
| 494 |
|
| 495 |
|
| 496 | </style>
|
| 497 |
|