/*! * Mode sombre du site UPS in Space / OJBT — feuille generee, ne pas editer a la main. * Source : generer_mode_sombre.py * * Le theme Avada declare sa palette globale sur :root sous forme de variables * --awb-colorN, avec leurs composantes -h, -s, -l et -a que le theme recombine * dans des expressions hsla(). Redefinir les douze couleurs et leurs composantes * sous une portee plus specifique que :root bascule donc l'ensemble du theme, * sans modifier son CSS compile ni aucun reglage Fusion. * * Portee 1 : le visiteur a choisi explicitement (attribut data-theme sur ). * Portee 2 : le visiteur n'a rien choisi, on suit le reglage de son systeme. */ /* Le choix explicite du clair doit aussi aligner les widgets natifs. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { /* fond des surfaces et du contenu — #ffffff en clair */ --awb-color1: #101726; --awb-color1-h: 221; --awb-color1-s: 41%; --awb-color1-l: 11%; --awb-color1-a: 100%; /* bandeaux sombres, pied de page, survols — #1a1632 en clair */ --awb-color2: #1c1832; --awb-color2-h: 249; --awb-color2-s: 35%; --awb-color2-l: 15%; --awb-color2-a: 100%; /* filets, bordures et fonds secondaires — #b0c1d9 en clair */ --awb-color3: #2b3247; --awb-color3-h: 225; --awb-color3-s: 25%; --awb-color3-l: 22%; --awb-color3-a: 100%; /* bleu intermediaire, inchange : il tient sur les deux fonds — #5a90bf en clair */ --awb-color4: #5a90bf; --awb-color4-h: 208; --awb-color4-s: 44%; --awb-color4-l: 55%; --awb-color4-a: 100%; /* bleu des boutons, inchange pour la meme raison — #4393d9 en clair */ --awb-color5: #4393d9; --awb-color5-h: 208; --awb-color5-s: 66%; --awb-color5-l: 56%; --awb-color5-a: 100%; /* ocre d'accent, eclairci pour rester lisible — #a66a21 en clair */ --awb-color6: #d9a35a; --awb-color6-h: 34; --awb-color6-s: 63%; --awb-color6-l: 60%; --awb-color6-a: 100%; /* titres et textes appuyes — #101726 en clair */ --awb-color7: #f2f3f5; --awb-color7-h: 220; --awb-color7-s: 13%; --awb-color7-l: 95%; --awb-color7-a: 100%; /* texte courant, un cran en dessous des titres — #141126 en clair */ --awb-color8: #e8eaf0; --awb-color8-h: 225; --awb-color8-s: 21%; --awb-color8-l: 93%; --awb-color8-a: 100%; /* gris des mentions discretes — #c1c1c1 en clair */ --awb-custom_color_1: #838ba0; --awb-custom_color_1-h: 223; --awb-custom_color_1-s: 13%; --awb-custom_color_1-l: 57%; --awb-custom_color_1-a: 100%; /* navy des bandeaux d'en-tete et de l'element actif — #2c4873 en clair */ --awb-custom_color_2: #2c4873; --awb-custom_color_2-h: 216; --awb-custom_color_2-s: 45%; --awb-custom_color_2-l: 31%; --awb-custom_color_2-a: 100%; /* fond tres clair, devient surface surelevee — #f2f3f5 en clair */ --awb-custom_color_3: #171c2c; --awb-custom_color_3-h: 226; --awb-custom_color_3-s: 31%; --awb-custom_color_3-l: 13%; --awb-custom_color_3-a: 100%; /* vert des etats favorables — #60c49f en clair */ --awb-custom_color_4: #6fce9f; --awb-custom_color_4-h: 150; --awb-custom_color_4-s: 49%; --awb-custom_color_4-l: 62%; --awb-custom_color_4-a: 100%; /* Aligne widgets natifs, ascenseurs et champs de formulaire. */ color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* fond des surfaces et du contenu — #ffffff en clair */ --awb-color1: #101726; --awb-color1-h: 221; --awb-color1-s: 41%; --awb-color1-l: 11%; --awb-color1-a: 100%; /* bandeaux sombres, pied de page, survols — #1a1632 en clair */ --awb-color2: #1c1832; --awb-color2-h: 249; --awb-color2-s: 35%; --awb-color2-l: 15%; --awb-color2-a: 100%; /* filets, bordures et fonds secondaires — #b0c1d9 en clair */ --awb-color3: #2b3247; --awb-color3-h: 225; --awb-color3-s: 25%; --awb-color3-l: 22%; --awb-color3-a: 100%; /* bleu intermediaire, inchange : il tient sur les deux fonds — #5a90bf en clair */ --awb-color4: #5a90bf; --awb-color4-h: 208; --awb-color4-s: 44%; --awb-color4-l: 55%; --awb-color4-a: 100%; /* bleu des boutons, inchange pour la meme raison — #4393d9 en clair */ --awb-color5: #4393d9; --awb-color5-h: 208; --awb-color5-s: 66%; --awb-color5-l: 56%; --awb-color5-a: 100%; /* ocre d'accent, eclairci pour rester lisible — #a66a21 en clair */ --awb-color6: #d9a35a; --awb-color6-h: 34; --awb-color6-s: 63%; --awb-color6-l: 60%; --awb-color6-a: 100%; /* titres et textes appuyes — #101726 en clair */ --awb-color7: #f2f3f5; --awb-color7-h: 220; --awb-color7-s: 13%; --awb-color7-l: 95%; --awb-color7-a: 100%; /* texte courant, un cran en dessous des titres — #141126 en clair */ --awb-color8: #e8eaf0; --awb-color8-h: 225; --awb-color8-s: 21%; --awb-color8-l: 93%; --awb-color8-a: 100%; /* gris des mentions discretes — #c1c1c1 en clair */ --awb-custom_color_1: #838ba0; --awb-custom_color_1-h: 223; --awb-custom_color_1-s: 13%; --awb-custom_color_1-l: 57%; --awb-custom_color_1-a: 100%; /* navy des bandeaux d'en-tete et de l'element actif — #2c4873 en clair */ --awb-custom_color_2: #2c4873; --awb-custom_color_2-h: 216; --awb-custom_color_2-s: 45%; --awb-custom_color_2-l: 31%; --awb-custom_color_2-a: 100%; /* fond tres clair, devient surface surelevee — #f2f3f5 en clair */ --awb-custom_color_3: #171c2c; --awb-custom_color_3-h: 226; --awb-custom_color_3-s: 31%; --awb-custom_color_3-l: 13%; --awb-custom_color_3-a: 100%; /* vert des etats favorables — #60c49f en clair */ --awb-custom_color_4: #6fce9f; --awb-custom_color_4-h: 150; --awb-custom_color_4-s: 49%; --awb-custom_color_4-l: 62%; --awb-custom_color_4-a: 100%; /* Aligne widgets natifs, ascenseurs et champs de formulaire. */ color-scheme: dark; } } /* ── Reglages qui ne decoulent pas de la palette ───────────────────────────── */ /* Le fond du site ne vient pas de la palette mais d'une option distincte, que le theme expose elle aussi en variable (`--bg_color`, #1f4363 ici) et consomme en `background-color`. Redefinir la variable suffit, et vaut mieux que de disputer la regle `body` d'Avada : le bleu du pourtour suivrait sinon le mode clair et cernerait la page sombre. */ :root[data-theme="dark"] { --bg_color: #101726; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg_color: #101726; } } /* Le conteneur du pied de page tire son fond de `hsla(var(--awb-color7-h), …, calc(var(--awb-color7-l) + 4%), …)`, soit la couleur 7 eclaircie de 4 %. Or la couleur 7 est surchargee : elle sert de navy de bandeau ICI, et de couleur de texte ailleurs (titres, fil d'Ariane, texte de bouton). Inversee pour rester lisible en texte, elle transformait le pied en bande blanche eclatante sur une page sombre, exactement la lueur qu'un mode sombre doit eviter : 11 % + 4 % = #172036 en clair, mais 95 % + 4 % = #fcfcfd en sombre. Le fond du pied est donc repris ici sur la couleur 2, le jeton des bandeaux sombres, laisse sombre a dessein. Corriger la palette plutot que ce conteneur aurait rendu invisible tout texte servi par la couleur 7. */ :root[data-theme="dark"] .fusion-footer .fusion-footer-widget-area .fusion-fullwidth { background-color: var(--awb-color2); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fusion-footer .fusion-footer-widget-area .fusion-fullwidth { background-color: var(--awb-color2); } } /* ── Bouton de bascule ────────────────────────────────────────────────────── */ /* L'element de menu qui porte le bouton : Avada met ses menus en flex, l'entree ajoutee doit s'y aligner sans heriter des puces de liste. */ .ojbt-item-theme { display: flex; align-items: center; list-style: none; } /* Le bouton s'insere comme dernier element du menu : il herite donc de la typographie et de la couleur du menu, et ne pose que sa propre zone de clic. */ .ojbt-bascule-theme { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid currentColor; border-radius: 2px; color: inherit; font: inherit; line-height: 1; padding: 6px 9px; cursor: pointer; opacity: 0.75; transition: opacity 0.15s ease; } .ojbt-bascule-theme:hover, .ojbt-bascule-theme:focus-visible { opacity: 1; } .ojbt-bascule-theme:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .ojbt-bascule-theme svg { width: 15px; height: 15px; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* Repli lorsqu'aucun menu n'a pu accueillir le bouton : il flotte alors en bas a droite, au-dessus du contenu, sur un fond pris dans la palette courante. */ .ojbt-bascule-theme--flottante { position: fixed; right: 16px; bottom: 16px; z-index: 9999; background: var(--awb-color1); color: var(--awb-color8); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); opacity: 1; } /* L'animation de survol n'a pas lieu d'etre pour qui demande moins de mouvement. */ @media (prefers-reduced-motion: reduce) { .ojbt-bascule-theme { transition: none; } }