MediaWiki:Common.js
Note : après avoir publié vos modifications, il se peut que vous deviez forcer le rechargement complet du cache de votre navigateur pour voir les changements.
- Firefox / Safari : maintenez la touche Maj (Shift) en cliquant sur le bouton Actualiser ou appuyez sur Ctrl + F5 ou Ctrl + R (⌘ + R sur un Mac).
- Google Chrome : appuyez sur Ctrl + Maj + R (⌘ + Shift + R sur un Mac).
- Edge : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl + F5.
/* Tout JavaScript présent ici sera exécuté par tous les utilisateurs à chaque chargement de page. */
// Attendre que le DOM soit complètement chargé
$(document).ready(function() {
// Fonction pour appliquer les styles
function applyStyles() {
// Variables CSS globales
var root = document.documentElement;
// Fond et texte de base
root.style.setProperty('--background-color-base', '#000', 'important');
root.style.setProperty('--background-color-neutral-subtle', '#111', 'important');
root.style.setProperty('--background-color-page-container', '#000', 'important');
root.style.setProperty('--color-base', '#fff', 'important');
// Couleurs d'accent et liens
root.style.setProperty('--color-progressive', '#00ff5a', 'important');
root.style.setProperty('--color-link', '#00ff5a', 'important');
root.style.setProperty('--color-link--visited', '#888888', 'important');
root.style.setProperty('--color-link--hover', '#fff', 'important');
root.style.setProperty('--color-link--active', '#00ff5a', 'important');
root.style.setProperty('--color-interactive', '#00ff5a', 'important');
root.style.setProperty('--color-interactive--hover', '#fff', 'important');
root.style.setProperty('--color-interactive--active', '#00ff5a', 'important');
root.style.setProperty('--color-button', '#00ff5a', 'important');
root.style.setProperty('--color-button--hover', '#fff', 'important');
root.style.setProperty('--color-button--active', '#00ff5a', 'important');
// Codex (checkbox/radio)
root.style.setProperty('--cdx-color-accent', '#00ff5a', 'important');
root.style.setProperty('--cdx-color-accent--hover', '#00ff5a', 'important');
root.style.setProperty('--cdx-color-accent--active', '#00ff5a', 'important');
root.style.setProperty('--cdx-color-accent--focus', '#00ff5a', 'important');
root.style.setProperty('--cdx-color-accent--selected', '#00ff5a', 'important');
root.style.setProperty('--cdx-color-accent--checked', '#00ff5a', 'important');
root.style.setProperty('--cdx-color-accent--pressed', '#00ff5a', 'important');
root.style.setProperty('--cdx-color-accent--visited', '#888888', 'important');
root.style.setProperty('--cdx-color-accent--disabled', '#00ff5a', 'important');
root.style.setProperty('--cdx-color-accent--readonly', '#00ff5a', 'important');
// Fond et texte du body
document.body.style.background = '#000';
document.body.style.color = '#fff';
// CSS général
var css = `
/* Styles de base */
body, .mw-body, .vector-body, .vector-page-container {
background: #000 !important;
color: #fff !important;
}
/* Container responsive */
.vector-page-container {
max-width: 100% !important;
padding: 0 !important;
}
/* Header responsive */
.vector-header-container {
padding: 0.5rem 1rem !important;
}
.vector-header-start {
padding: 0.5rem 0 !important;
}
.vector-header-end {
padding: 0.5rem 0 !important;
}
/* Menu principal responsive */
.vector-main-menu {
background: #000 !important;
border-color: #00ff5a !important;
}
.vector-main-menu .vector-menu-content {
background: #000 !important;
}
.vector-main-menu .vector-menu-content-list {
padding: 0.5rem !important;
}
.vector-main-menu .vector-menu-content-item {
padding: 0.5rem !important;
}
.vector-main-menu .vector-menu-content-item a {
color: #00ff5a !important;
}
.vector-main-menu .vector-menu-content-item a:hover {
color: #fff !important;
}
/* Menu latéral responsive */
.vector-sidebar {
background: #000 !important;
border-color: #00ff5a !important;
}
.vector-sidebar .vector-menu-heading {
color: #00ff5a !important;
border-color: #00ff5a !important;
}
.vector-sidebar .vector-menu-content {
background: #000 !important;
}
.vector-sidebar .vector-menu-content-list {
padding: 0.5rem !important;
}
.vector-sidebar .vector-menu-content-item {
padding: 0.5rem !important;
}
.vector-sidebar .vector-menu-content-item a {
color: #00ff5a !important;
}
.vector-sidebar .vector-menu-content-item a:hover {
color: #fff !important;
}
/* Liens visités */
a:visited {
color: #888888 !important;
}
a:visited:hover {
color: #fff !important;
}
/* Boutons d'épinglage/désépinglage Vector */
.vector-pinnable-header-toggle-button {
display: inline-block !important;
background: #000 !important;
border: 2px solid #00ff5a !important;
color: #00ff5a !important;
padding: 4px 8px !important;
font-size: 0.75rem !important;
border-radius: 2px !important;
cursor: pointer !important;
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.vector-pinnable-header-toggle-button:hover,
.vector-pinnable-header-toggle-button:focus {
background: #00ff5a !important;
color: #000 !important;
border-color: #00ff5a !important;
}
/* Boutons de recherche et Codex */
.cdx-button,
.cdx-search-input__end-button,
.vector-search-box-button,
.vector-search-box-input {
background: #000 !important;
border: 1px solid #00ff5a !important;
color: #00ff5a !important;
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.cdx-button:hover,
.cdx-button:focus,
.cdx-search-input__end-button:hover,
.cdx-search-input__end-button:focus {
background: #00ff5a !important;
color: #000 !important;
border-color: #00ff5a !important;
}
/* Barre de recherche responsive */
.vector-search-box {
margin: 0.5rem 0 !important;
}
.vector-search-box-input {
background: #111 !important;
color: #fff !important;
border: 1px solid #00ff5a !important;
}
/* Code, éditeurs, <pre> */
pre,
.mw-code,
.mw-highlight,
.mw-code pre,
pre.mw-code,
pre.prettyprint,
pre.source,
pre.plain,
pre.diff,
pre#wpTextbox1,
textarea,
textarea#wpTextbox1,
.CodeMirror,
.CodeMirror-lines,
.ve-ce-documentNode {
background: #111 !important;
color: #fff !important;
font-family: 'Fira Mono', 'Consolas', 'Monaco', 'Courier New', monospace !important;
border-radius: 4px !important;
border: 1px solid #222 !important;
overflow-x: auto !important;
white-space: pre-wrap !important;
word-wrap: break-word !important;
}
.CodeMirror-cursor {
border-left: 2px solid #fff !important;
}
.CodeMirror-gutters {
background: #111 !important;
color: #888 !important;
border-right: 1px solid #222 !important;
}
.ve-ce-documentNode {
background: #111 !important;
color: #fff !important;
}
/* Styles pour les pages spéciales */
.mw-specialpage,
.mw-htmlform,
.mw-htmlform-field-HTMLTextField,
.mw-htmlform-field-HTMLPasswordField,
.mw-htmlform-field-HTMLCheckField {
background: #000 !important;
color: #fff !important;
}
.mw-specialpage input,
.mw-specialpage select,
.mw-specialpage textarea {
background: #111 !important;
color: #fff !important;
border: 1px solid #00ff5a !important;
}
.mw-message-box,
.error,
.warning,
.success {
background: #111 !important;
color: #fff !important;
border: 1px solid #00ff5a !important;
}
/* Styles pour les menus et la navigation */
.vector-menu-content,
.vector-menu-dropdown,
.vector-menu-tabs,
.vector-menu-tabs-list {
background: #000 !important;
border-color: #00ff5a !important;
}
.vector-menu-tabs .selected a,
.vector-menu-tabs .selected a:hover {
background: #000 !important;
color: #00ff5a !important;
border: 1px solid #00ff5a !important;
border-bottom: none !important;
}
.vector-menu-tabs a:hover {
background: #111 !important;
color: #00ff5a !important;
}
/* Styles spécifiques pour les liens visités dans les menus */
.vector-menu-tabs a:visited {
color: #888888 !important;
}
.vector-menu-tabs a:visited:hover {
color: #00ff5a !important;
}
/* Tableaux responsifs */
.mw-content-ltr table {
width: 100% !important;
overflow-x: auto !important;
display: block !important;
}
/* Images responsives */
.mw-file-element {
max-width: 100% !important;
height: auto !important;
}
/* Contenu principal */
.vector-body {
padding: 1rem !important;
}
.vector-body-content {
background: #000 !important;
color: #fff !important;
}
/* Pied de page */
.vector-footer {
background: #000 !important;
border-color: #00ff5a !important;
padding: 1rem !important;
}
.vector-footer .vector-footer-content {
color: #fff !important;
}
.vector-footer a {
color: #00ff5a !important;
}
.vector-footer a:hover {
color: #fff !important;
}
`;
// Injection du style
var style = document.getElementById('custom-dark-style');
if (!style) {
style = document.createElement('style');
style.id = 'custom-dark-style';
document.head.appendChild(style);
}
style.innerHTML = css;
// Forcer le fond noir sur le body et les containers principaux en dernier recours
document.querySelectorAll('body, .mw-body, .vector-body, .vector-page-container').forEach(function(el) {
el.setAttribute('style', 'background: #000 !important; color: #fff !important;');
});
}
// Appliquer les styles immédiatement
applyStyles();
// Réappliquer les styles après un court délai pour s'assurer qu'ils sont bien appliqués
setTimeout(applyStyles, 100);
// Réappliquer les styles après le chargement complet de la page
window.addEventListener('load', applyStyles);
// Observer les changements dans le DOM pour réappliquer les styles si nécessaire
var observer = new MutationObserver(function(mutations) {
applyStyles();
});
observer.observe(document.body, {
childList: true,
subtree: true
});
});