Installation du Dark Mode Edison

par Yunie16 Lun 23 Oct 2023 - 21:23

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonsoir !

(j'étais pas censée poster trois fois ajd, pardon)
Pour tester un peu, j'ai voulu installer le dark mode/light mode Edison (https://blankthemerpg.forumactif.com/t77-edison) et en voyant qu'il était en difficulté "facile" ça m'a hype un peu, j'ai toujours trouvé ça classe sur les forums donc voilà...
Le truc, c'est que j'arrive déjà pas à installer le bouton, je dois avoir cassé quelque chose déjà rien qu'en c/c les codes ;;
Je voudrais le mettre en bas à gauche, comme sur le thème de démonstration, histoire de tester (ce ne sera probablement pas sa place définitive), mais à part tout en bas au centre ou tout en haut selon le template, il refuse de bouger ! Et si je lui mets position:fixed, il se met je-ne-sais-où, là je ne le vois même plus... Du coup, impossible de tester les couleurs sans un bouton fonctionnel

Je vous mets les templates dans lesquels il fallait mettre les codes :

Overhall_header :

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}> <head> <link href="https://www.dropbox.com/scl/fi/fv58j77gu9gm18r7y1apl/20230929_2207-CSS-alongthewayy.forumactif.com.css?rlkey=nisjxrihyn80p31zj93s9y2yi" rel="stylesheet" type="text/css" /> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Crimson+Text&display=swap" rel="stylesheet"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Edu+TAS+Beginner&family=Josefin+Slab:wght@100&family=Orbit&family=Poiret+One&display=swap" rel="stylesheet"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=The+Girl+Next+Door&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Mrs+Saint+Delafield&display=swap" rel="stylesheet"> <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Sacramento&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Overpass:400,700|Share+Tech+Mono" rel="stylesheet"> <title>{SITENAME_TITLE}{PAGE_TITLE}</title> <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}"/> <meta http-equiv="content-script-type" content="text/javascript"/> <meta http-equiv="content-style-type" content="text/css"/>  <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}"/>   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}"/>  {META_FAVICO} {META} {META_FB_LIKE} <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}"/> {T_HEAD_STYLESHEET} {CSS} <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}"/> <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}"/> <script src="{JQUERY_PATH}" type="text/javascript"></script>  <script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script> <script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script> <script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>  <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script> {RICH_SNIPPET_GOOGLE}  <script src="https://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script> <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>   <link type="text/css" rel="stylesheet" href="{JQUERY_DIR}ticker/ticker.css"/> <script src="{JQUERY_DIR}ticker/ticker.js" type="text/javascript"></script>   <script src="{JQUERY_DIR}jcarousel/jquery.jcarousel.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ /* Definir le sens de direction en fonction du panneau admin */ var tickerDirParam = "{switch_ticker.DIRECTION}"; var slid_vert = false; var auto_dir = 'next'; var h_perso = parseInt({switch_ticker.HEIGHT}); switch (tickerDirParam) { case 'top' : slid_vert = true; break; case 'left': break; case 'bottom': slid_vert = true; auto_dir = 'prev'; break; case 'right': auto_dir = 'prev'; break; default: slid_vert = true; } $(document).ready(function () { $('#fa_ticker_content').css('display', 'block'); var width_max = $('ul#fa_ticker_content').width(); var width_item = Math.floor(width_max / {switch_ticker.SIZE}); if (width_max > 0) { $('ul#fa_ticker_content li').css('float', 'left').css('list-style', 'none').width(width_item).find('img').each(function () { if ($(this).width() > width_item) { var ratio = $(this).width() / width_item; var new_height = Math.round($(this).height() / ratio); $(this).height(new_height).width(width_item); } }); if (slid_vert) { var height_max = h_perso; $('ul#fa_ticker_content li').each(function () { if ($(this).height() > height_max) { height_max = $(this).height(); } }); $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft', 'auto').css('marginRight', 'auto'); $('ul#fa_ticker_content li').height(height_max); } $('#fa_ticker_content').jcarousel({ vertical: slid_vert, wrap: 'circular', auto: {switch_ticker.STOP_TIME}, auto_direction: auto_dir, scroll: 1, size: {switch_ticker.SIZE}, height_max: height_max, animation: {switch_ticker.SPEED} }); } else { $('ul#fa_ticker_content li:not(:first)').css('display', 'none'); $('ul#fa_ticker_content li:first').css('list-style', 'none').css('text-align', 'center'); } }); //]]> </script>  <script type="text/javascript">//<![CDATA[ $(document).ready(function () {  pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400'); if (pm != null) { pm.focus(); }   report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}'); if (report != null) { report.focus(); }   $(document).ready(function () { Ticker.start({ height: {switch_ticker.HEIGHT}, spacing: {switch_ticker.SPACING}, speed: {switch_ticker.SPEED}, direction: '{switch_ticker.DIRECTION}', pause: {switch_ticker.STOP_TIME} }); });  });  var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false; $(document).ready(function () { $(window).resize(function () { var windowWidth = document.documentElement.clientWidth; var popupWidth = $("#login_popup").width(); var mypopup = $("#login_popup"); $("#login_popup").css({ "left": windowWidth / 2 - popupWidth / 2 }); }); });  //]]> </script> {GREETING_POPUP} <style type="text/css"> #page-footer, div.navbar, div.navbar ul.linklist { display: block !important; } ul.linklist li.rightside, ul.linklist li.rightside a.copyright { display: inline !important; }  .jcarousel-skin-tango .jcarousel-item { text-align: center; width: 10px; } .jcarousel-skin-tango .jcarousel-item-horizontal { margin-right: {switch_ticker.SPACING}px; } .jcarousel-skin-tango .jcarousel-item-vertical { margin-bottom: {switch_ticker.SPACING}px; }  </style> {HOSTING_JS}  <script async src="https://www.googletagmanager.com/gtag/js?id={G_ANALYTICS_ID}"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '{G_ANALYTICS_ID}', {'anonymize_ip': true, 'store_gac': false, 'cookie_expires': 13 * 30 * 24 * 60 * 60});  gtag('config', '{G_ANALYTICS_ID_BIS}', {'anonymize_ip': true, 'store_gac': false, 'cookie_expires': 13 * 30 * 24 * 60 * 60});  </script>  <link rel="preconnect" href="https://fonts.gstatic.com"/> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese&display=swap" rel="stylesheet"/> <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/> <link href="https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&display=swap" rel="stylesheet"/> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous"/><link href="https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&display=swap" rel="stylesheet"/>  <script> (function () { const html = document.documentElement; const theme = localStorage.getItem('theme'); const colorScheme = localStorage.getItem('color-scheme'); html.removeAttribute("data-no-js"); colorScheme && html.setAttribute('data-color-scheme', colorScheme); theme && html.setAttribute('data-theme', theme); })(); </script> </head> <body id="modernbb"> <ul class="arte-navbar" id="arte-menubar"> <li>{GENERATED_NAV_BAR}</li> </ul> <div class="page-accueil-banniere"> <iframe src="https://dwell-test-forum.forumactif.com/h1-page-accueil-dwell" marginwidth="0" height="405" width="100%" marginheight="0" align="top" scrolling="No" frameborder="0" hspace="0" vspace="0"></iframe> </div>  <div id="hitskin_preview" style="display: block;"> <h1><img src="{hitskin_preview.PATH_IMG_FA}hitskin/hitskin_logo.png" alt=""/> <em>Hit</em>skin.com</h1> <div class="content"> <p> {hitskin_preview.L_THEME_SITE_PREVIEW} <br/> <span>{hitskin_preview.U_INSTALL_THEME}<a href="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span> </p> </div> </div>   <div id="inactive_popup" style="z-index: 10000 !important;"> <div class="h3">{inactive_users_modal.L_MODAL_TITLE}</div> <div id="inactive_popup_message">{inactive_users_modal.L_MODAL_BODY}</div> <div id="inactive_popup_buttons"> <button id="inactive_popup_url" class="button1">{inactive_users_modal.L_MODAL_BUTTON}</button> <button id="inactive_popup_close" class="button1">{inactive_users_modal.L_CLOSE}</button> </div> </div> <script type="text/javascript"> $('#inactive_popup #inactive_popup_close').on('mouseup', function () { document.cookie = "modal_require_activation_closed=1; max-age=86400*15; path=/;"; $('#inactive_popup').hide(50); }); $('#inactive_popup #inactive_popup_url').on('mouseup', function () { document.cookie = "modal_require_activation_closed=1; max-age=86400*15; path=/;"; location.href = '{inactive_users_modal.U_MODAL}' }) </script>   <div id="login_popup" style="z-index: 10000 !important;"> <div class="h3">{SITENAME}</div> <div id="login_popup_message"> {LOGIN_POPUP_MSG} </div>  <br/> <div class="h3">{switch_login_popup.switch_quick_login.L_QUICK_CONNECT}</div> <div> <div class="mt10"> <div class="social_btn">  <div class="fb-login-button"></div>     <div class="ti-connect"></div>  </div> </div> </div> <br/>  <div id="login_popup_buttons"> <form action="{S_LOGIN_ACTION}" method="get"> <input type="submit" class="button1" value="{L_LOGIN}"/> <input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';"/> <input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}"/> </form> </div> </div>   <div id="like_popup" style="z-index: 10000 !important;"> <div class="h3">{SITENAME}</div> <div id="like_popup_message"> {LIKE_POPUP_MSG} </div> <div id="like_popup_buttons"> <form action="{S_LOGIN_ACTION}" method="get"> <input type="submit" class="button1" value="{L_LOGIN}"/> <input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';"/> <input id="like_popup_close" type="button" class="button2" value="{L_LIKE_CLOSE}"/> </form> </div> </div>  <a id="top" name="top" accesskey="t"></a> {JAVASCRIPT} <div class="conteneur_minwidth_IE"> <div class="conteneur_layout_IE"> <div class="conteneur_container_IE"> <div id="wrap"> <div id="page-body">  <div id="fa_ticker_block" style="margin-top:4px;"> <div class="module"> <div class="inner"> <div id="fa_ticker_container"> <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;"> <div class="fa_ticker_content">  <div>{switch_ticker.ticker_row.ELEMENT}</div>  </div> </div> </div> </div> </div> </div>  <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}> <div id="outer-wrapper"> <div id="wrapper"> <div id="{ID_LEFT}">  {giefmod_index1.MODVAR}  <div style="height:{SPACE_ROW}px"></div>   </div> <div id="container"> <div id="content-main"> <div id="main"> <div id="main-content">

Overall_footer_end :

Code::  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <body> <div> <div> <ul> <li>  </li> </ul>  <ul class="footerbar-user"> <li><i class="ion-clock"></i>{CURRENT_TIME}</li>  <li class="rightside"> <a name="bottom" class="copyright" href="{switch_footer_links.footer_link.U_FOOTER_LINK_HREF}" rel="{switch_footer_links.footer_link.FOOTER_LINK_REL}" target="{switch_footer_links.footer_link.FOOTER_LINK_TARGET}" title="{switch_footer_links.footer_link.L_FOOTER_LINK_TITLE}"> {switch_footer_links.footer_link.L_FOOTER_LINK_TEXT} </a> </li>  </ul>  </div> <div class="copyright"> <div class="wrap"> <div class="copyright-body"> {ADMIN_LINK} </div> </div> </div> </div> {PROTECT_FOOTER} <script type="text/javascript"> //<![CDATA[ $(document).ready(function() { $(window).scroll(function() { var header_top = $('#headerbar-top'); if (header_top.hasClass('w-toolbar')) { if ($(window).scrollTop() >= 42) { header_top.addClass('is-sticky'); } else { header_top.removeClass('is-sticky'); } } else { if ($(window).scrollTop() >= 1) { header_top.addClass('is-sticky'); } else { header_top.removeClass('is-sticky'); } } }); }); //]]> </script>  <div id="fb-root"></div> <script type="text/javascript"> $(document).ready( function() { $('div.fb-login-button, span.fb-login-button').attr({ "data-scope": "{switch_facebook_login.FB_SCOPE}", "data-max-rows": "{switch_facebook_login.FB_MAX_ROWS}", "data-size": "{switch_facebook_login.FB_BUTTON_SIZE}", "data-show-faces": "{switch_facebook_login.FB_SHOW_FACES}", "data-auto-logout-link": "{switch_facebook_login.FB_AUTO_LOGOUT}" }); $('div.fb-login-button, span.fb-login-button').each(function() { if(typeof $(this).attr('onlogin') == typeof undefined || $(this).attr('onlogin') === false) { $(this).attr('onlogin', '{switch_facebook_login.FB_ONLOGIN}'); } if($(this).html() == '') { $(this).html('{switch_facebook_login.FB_LABEL}'); } }); FB.init({ "appId" : "{switch_facebook_login.FB_APP_ID}", "cookie" : {switch_facebook_login.FB_COOKIE}, "xfbml" : {switch_facebook_login.FB_XFBML}, "oauth" : {switch_facebook_login.FB_OAUTH}, "version" : "{switch_facebook_login.FB_VERSION}" }); (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "https://connect.facebook.net/{switch_facebook_login.FB_LOCAL}/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); }); function onLoginFB() { window.location.replace('{switch_facebook_login.FB_ONLOGIN_URL}') } </script>   <script type="text/javascript"> $(document).ready( function() { $('div.ti-connect, span.ti-connect').attr({ "data-loc": "{switch_topicit_connect.TOPICIT_URL}", "data-login": "{switch_topicit_connect.BOARD_LOGIN}", "data-version": "{switch_topicit_connect.TOPICIT_VERSION}", "data-lang": "{switch_topicit_connect.BOARD_LANG}" }); (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "{switch_topicit_connect.TOPICIT_ENDPOINT}"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'topicit-connect')); }); </script>  <script type="text/javascript"> //<![CDATA[ fa_endpage();  if('serviceWorker' in navigator && 'PushManager' in window && navigator.userAgent.includes('Mac') && Notification.permission === 'default' && window.matchMedia('(display-mode: standalone)').matches){ window.addEventListener('DOMContentLoaded', function() { const subButton = document.createElement('span'); subButton.setAttribute('id', 'sub-to-pushs'); subButton.innerHTML = '<i class="ion-social-apple"></i>{switch_webpush_notifications.INSCRIPTION_PUSH_NOTIFICATIONS}'; const pageFooter = document.getElementById('page-footer'); pageFooter.getElementsByClassName('footer-home')[0].append(subButton); subButton.addEventListener('click', async () => { const result = await window.Notification.requestPermission(); if (result === 'granted') { subscribeUser(); } }); }); }  //]]> </script>  <nav id="switcheroo" class="switcheroo" direction="vertical" position="top"></nav>  <script src="https://cdn.jsdelivr.net/gh/caezd/switcheroo@master/monomer.js"></script> <script src="https://cdn.jsdelivr.net/gh/caezd/switcheroo@master/switcheroo.js"></script>  <script> (function() { new Switcheroo('#switcheroo'); })(); </script>  <script>(function () { var html = document.documentElement; var themeControls = document.querySelector("[data-theme-controls]"); var toggle = themeControls.querySelector(".color-scheme-toggle"); var prefersDark = window.matchMedia("(prefers-color-scheme: dark)"); var setToggleLabel = function () { let mode; mode = !html.dataset.colorScheme ? prefersDark.matches ? "dark" : "light" : html.dataset.colorScheme; toggle.setAttribute( "title", "Enable" + (mode === "dark" ? "light" : "dark") + "mode" ); }; var setColorScheme = function (value) { html.dataset.colorScheme = value; localStorage.setItem("color-scheme", value); setToggleLabel(); }; var init = function () { setToggleLabel(); }; toggle.addEventListener("click", function () { if (!html.dataset.colorScheme && prefersDark.matches) { setColorScheme("light"); updateColorSchemeStatus("light"); return; } var scheme = html.dataset.colorScheme === "dark" ? "light" : "dark"; setColorScheme(scheme); }); init(); })();</script>  <div data-theme-controls> <button class="color-scheme-toggle" title="Activer le mode sombre" aria-describedby="theme-controls-focus-text">  <div class="icon light"><i class="ion-ios-sunny"></i></div>  <div class="icon dark"><i class="ion-ios-moon"></i></div> </button> </div> </body> </html>

Et le CSS, auquel je n'ai pas encore beaucoup touché du coup :

Code:: /************** LIGHT MODE / DARK MODE ***************/ /* VARIABLE DU MODE PAR DEFAUT */ :root { --neutral: #FFF; --accentClr: blue; } /* VARIABLE DU MODE INVERSE (ici mode sombre) */ [data-color-scheme="dark"] { --neutral: #000; --accentClr: red; } @media (prefers-color-scheme: dark) { [data-color-scheme=dark] { --neutral: #000; --accentClr: red; } } /* BOUTON CHANGEMENT DE THEME ---*/ @media (prefers-color-scheme: dark) {.color-scheme-toggle .dark{display: none}} @media (prefers-color-scheme: light) {.color-scheme-toggle .light{display: none}} .color-scheme-toggle, [data-color-scheme="light"] .color-scheme-toggle .dark, [data-color-scheme="dark"] .color-scheme-toggle .light {display: block;width: 100%;} [data-color-scheme="dark"] .color-scheme-toggle .dark, [data-color-scheme="light"] .color-scheme-toggle .light {display: none} .color-scheme-toggle { background-color: var(--neutralDark); padding: 5px 8px; font-size: 75px; border-radius: 5px; color: var(--textColor); position:fixed; margin-left:100px; } .color-scheme-toggle:hover { color: var(--accentClr); }

Encore merci à vous

par MlleAlys Lun 23 Oct 2023 - 21:47

Bonjour,
Ce css devrait vous permettre de le fixer en bas à gauche :

Code:: div[data-theme-controls] { position: fixed; left: 0; bottom: 0; z-index: 12; }

par Yunie16 Lun 23 Oct 2023 - 21:53

Merci ça fonctionne **

Par contre il ne veut pas switcher quand je clique dessus, j'ai testé en mettant des couleurs dans mon css et rien ne change, ni même l'icône qui devrait devenir une lune je pense. Je ne sais pas ce que j'ai loupé dans le tutoriel pour que ça fonctionne ?

par MlleAlys Mar 24 Oct 2023 - 19:11

L'erreur vient de l'intégration du bouton après le script : Il faut mettre dans le template le bouton avant le script :

Overall_footer_end :

Code::  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <body> <div> <div> <ul> <li>  </li> </ul>  <ul class="footerbar-user"> <li><i class="ion-clock"></i>{CURRENT_TIME}</li>  <li class="rightside"> <a name="bottom" class="copyright" href="{switch_footer_links.footer_link.U_FOOTER_LINK_HREF}" rel="{switch_footer_links.footer_link.FOOTER_LINK_REL}" target="{switch_footer_links.footer_link.FOOTER_LINK_TARGET}" title="{switch_footer_links.footer_link.L_FOOTER_LINK_TITLE}"> {switch_footer_links.footer_link.L_FOOTER_LINK_TEXT} </a> </li>  </ul>  </div> <div class="copyright"> <div class="wrap"> <div class="copyright-body"> {ADMIN_LINK} </div> </div> </div> </div> {PROTECT_FOOTER} <script type="text/javascript"> //<![CDATA[ $(document).ready(function() { $(window).scroll(function() { var header_top = $('#headerbar-top'); if (header_top.hasClass('w-toolbar')) { if ($(window).scrollTop() >= 42) { header_top.addClass('is-sticky'); } else { header_top.removeClass('is-sticky'); } } else { if ($(window).scrollTop() >= 1) { header_top.addClass('is-sticky'); } else { header_top.removeClass('is-sticky'); } } }); }); //]]> </script>  <div id="fb-root"></div> <script type="text/javascript"> $(document).ready( function() { $('div.fb-login-button, span.fb-login-button').attr({ "data-scope": "{switch_facebook_login.FB_SCOPE}", "data-max-rows": "{switch_facebook_login.FB_MAX_ROWS}", "data-size": "{switch_facebook_login.FB_BUTTON_SIZE}", "data-show-faces": "{switch_facebook_login.FB_SHOW_FACES}", "data-auto-logout-link": "{switch_facebook_login.FB_AUTO_LOGOUT}" }); $('div.fb-login-button, span.fb-login-button').each(function() { if(typeof $(this).attr('onlogin') == typeof undefined || $(this).attr('onlogin') === false) { $(this).attr('onlogin', '{switch_facebook_login.FB_ONLOGIN}'); } if($(this).html() == '') { $(this).html('{switch_facebook_login.FB_LABEL}'); } }); FB.init({ "appId" : "{switch_facebook_login.FB_APP_ID}", "cookie" : {switch_facebook_login.FB_COOKIE}, "xfbml" : {switch_facebook_login.FB_XFBML}, "oauth" : {switch_facebook_login.FB_OAUTH}, "version" : "{switch_facebook_login.FB_VERSION}" }); (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "https://connect.facebook.net/{switch_facebook_login.FB_LOCAL}/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); }); function onLoginFB() { window.location.replace('{switch_facebook_login.FB_ONLOGIN_URL}') } </script>   <script type="text/javascript"> $(document).ready( function() { $('div.ti-connect, span.ti-connect').attr({ "data-loc": "{switch_topicit_connect.TOPICIT_URL}", "data-login": "{switch_topicit_connect.BOARD_LOGIN}", "data-version": "{switch_topicit_connect.TOPICIT_VERSION}", "data-lang": "{switch_topicit_connect.BOARD_LANG}" }); (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "{switch_topicit_connect.TOPICIT_ENDPOINT}"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'topicit-connect')); }); </script>  <script type="text/javascript"> //<![CDATA[ fa_endpage();  if('serviceWorker' in navigator && 'PushManager' in window && navigator.userAgent.includes('Mac') && Notification.permission === 'default' && window.matchMedia('(display-mode: standalone)').matches){ window.addEventListener('DOMContentLoaded', function() { const subButton = document.createElement('span'); subButton.setAttribute('id', 'sub-to-pushs'); subButton.innerHTML = '<i class="ion-social-apple"></i>{switch_webpush_notifications.INSCRIPTION_PUSH_NOTIFICATIONS}'; const pageFooter = document.getElementById('page-footer'); pageFooter.getElementsByClassName('footer-home')[0].append(subButton); subButton.addEventListener('click', async () => { const result = await window.Notification.requestPermission(); if (result === 'granted') { subscribeUser(); } }); }); }  //]]> </script>   <nav id="switcheroo" class="switcheroo" direction="vertical" position="top"></nav>  <script src="https://cdn.jsdelivr.net/gh/caezd/switcheroo@master/monomer.js"></script> <script src="https://cdn.jsdelivr.net/gh/caezd/switcheroo@master/switcheroo.js"></script>  <script> (function() { new Switcheroo('#switcheroo'); })(); </script>    <div data-theme-controls> <button class="color-scheme-toggle" title="Activer le mode sombre" aria-describedby="theme-controls-focus-text">  <div class="icon light"><i class="ion-ios-sunny"></i></div>  <div class="icon dark"><i class="ion-ios-moon"></i></div> </button> </div> <script>(function () { var html = document.documentElement; var themeControls = document.querySelector("[data-theme-controls]"); var toggle = themeControls.querySelector(".color-scheme-toggle"); var prefersDark = window.matchMedia("(prefers-color-scheme: dark)"); var setToggleLabel = function () { let mode; mode = !html.dataset.colorScheme ? prefersDark.matches ? "dark" : "light" : html.dataset.colorScheme; toggle.setAttribute( "title", "Enable" + (mode === "dark" ? "light" : "dark") + "mode" ); }; var setColorScheme = function (value) { html.dataset.colorScheme = value; localStorage.setItem("color-scheme", value); setToggleLabel(); }; var init = function () { setToggleLabel(); }; toggle.addEventListener("click", function () { if (!html.dataset.colorScheme && prefersDark.matches) { setColorScheme("light"); updateColorSchemeStatus("light"); return; } var scheme = html.dataset.colorScheme === "dark" ? "light" : "dark"; setColorScheme(scheme); }); init(); })();</script>  </body> </html>

par Yunie16 Mar 24 Oct 2023 - 20:47

Ah ! C'était pas précisé, j'avoue l'avoir tapé n'importe où dans le doute xD
Ca fonctionne du coup merci ! Vais m'amuser avec les couleurs maintenant ^^'

Installation du Dark Mode Edison