MediaWiki:Gadget-Colors.css
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.
/* Color configuration applying to all themes */
html.skin-theme-clientpref-night,
html.skin-theme-clientpref-os,
html.skin-theme-clientpref-day {
/* Set visited links to the same color as regular links */
--color-visited: var(--color-progressive);
--color-visited--hover: var(--color-progressive--hover);
--color-visited--active: var(--color-progressive--active);
--color-base--hover: var(--color-base);
/* Error colors */
--background-color-error--active: var(--background-color-error--hover);
--color-destructive: var(--border-color-error);
--color-destructive--hover: var(--border-color-error--hover);
--color-destructive--active: var(--border-color-error--hover);
--color-destructive--visited: var(--color-destructive);
--color-destructive--visited--hover: var(--color-destructive--hover);
--color-destructive--visited--active: var(--color-destructive--active);
--color-emphasized: var(--color-base);
--color-progressive--active: var(--color-progressive--hover);
--background-color-progressive-subtle: var(--background-color-progressive);
--background-color-progressive--active: var(--background-color-progressive--hover);
--border-color-progressive: var(--background-color-progressive);
--border-color-progressive--active: var(--background-color-progressive--hover);
--border-color-progressive--hover: var(--background-color-progressive--hover);
--color-destructive--focus: var(--color-inverted-fixed);
--color-progressive--focus: var(--color-progressive--hover);
--box-shadow-color-progressive--focus: var(--background-color-progressive);
--border-color-progressive--focus: var(--background-color-progressive);
--background-color-progressive--focus: var(--background-color-progressive);
--box-shadow-color-destructive--focus: var(--color-inverted-fixed);
--background-color-destructive--focus: var(--color-inverted-fixed);
--background-color-destructive-subtle: var(--background-color-error--hover);
--border-color-destructive--focus: var(--color-inverted-fixed);
--outline-color-progressive--focus: var(--color-inverted-fixed);
--background-color-interactive-subtle: var(--background-color-neutral);
--background-color-notice-subtle: var(--background-color-neutral);
--border-color-interactive: var(--background-color-progressive);
/* Colors on diff pages and byte difference counters */
--color-content-added: var(--color-success);
--color-content-removed: var(--background-color-error);
--background-color-content-added: var(--color-success);
--background-color-content-removed: var(--background-color-error);
--border-color-content-added: var(--color-success);
--border-color-content-removed: var(--background-color-error);
/* Colors that generally don't change between skins */
--color-error: #d33; /* hardcoded background for .error */
--color-warning: #cf721c; /* --theme-warning-color */
--color-success: #0c742f; /* --theme-success-color */
--background-color-error: #bf0017; /* --theme-alert-color */
--background-color-error--hover: #59000b; /* hardcoded background for the delete button */
--color-base-fixed: rgba(0, 0, 0, 0.65);
--background-color-error-subtle: rgba(191, 0, 23, 0.25); /* --theme-alert-color--rgb */
--background-color-warning-subtle: rgba(207, 114, 28, 0.25); /* --theme-warning-color--rgb */
--background-color-success-subtle: rgba(12, 116, 47, 0.25); /* --theme-success-color--rgb */
--border-color-error: #e7001b; /* --theme-alert-color--secondary */
--border-color-warning: #cf721c; /* --theme-warning-color--secondary */
--border-color-success: #0d8636; /* --theme-success-color--secondary */
--border-color-error--hover: #fe2540; /* --theme-alert-color--hover */
--invert-on-dark: none;
}
/* Dark theme colors */
html.skin-theme-clientpref-night {
--background-image: url("/bg-dark.png");
--background-color-base: black; /* --theme-page-background-color */
--color-base: #e6e6e6; /* --theme-page-text-color */
--color-base--rgb: 230, 230, 230;
--color-progressive: #b962b9; /* --theme-link-color */
--color-progressive--hover: #d8a8d8; /* --theme-link-color--hover */
--color-inverted-fixed: #fff; /* --theme-accent-label-color. Wikimedia says this should be unchanging between light and dark themes, then proceeds to use it in label colors... */
--border-color-base: #3a3a3a; /* --theme-border-color */
--background-color-neutral: #262626; /* --theme-page-background-color--secondary */
--background-color-neutral-subtle: #131313; /* Wikitable background, between --background-color-base and --background-color-neutral */
--background-color-progressive: #5f2c60; /* --theme-accent-color */
--background-color-progressive--hover: #a44ca5; /* --theme-accent-color--hover */
--background-color-progressive-subtle: rgba(185, 98, 185, 0.3); /* --theme-link-color--rgb */
/* Used for the temporary user banner and disabled buttons */
--color-inverted: #101418;
--border-color-inverted: #101418;
--background-color-inverted: #f8f9fa;
--background-color-backdrop-light: rgba(0, 0, 0, 0.65);
--background-color-backdrop-dark: rgba(255, 255, 255, 0.65);
--invert-on-dark: invert(1);
/* I don't know how to remap these colors */
--color-notice: #f8f9fa;
--color-base--subtle: #a2a9b1;
--background-color-interactive: #27292d;
--background-color-disabled: #54595d;
--background-color-disabled-subtle: #404244;
--border-color-subtle: #54595d;
--border-color-muted: #404244;
--border-color-disabled: #54595d;
--border-color-notice: #c8ccd1;
--box-shadow-color-inverted: #000;
}
/* Light theme colors */
html.skin-theme-clientpref-os,
html.skin-theme-clientpref-day {
--background-image: url("/bg-light.png");
--background-color-base: #E5F1FA;
--color-base: #161f50;
--color-base--rgb: 230,230,230;
--color-progressive: #2170c2;
--color-progressive--hover: #159ae9;
--color-inverted-fixed: #dfe5f3;
--border-color-base: #6087a9;
--background-color-neutral: #C1D7EB;
--background-color-neutral-subtle: #abcee4;
--background-color-progressive: #2b3e76;
--background-color-progressive--hover: #00bbc8;
--background-color-progressive-subtle: rgba(8, 132, 136, 0.3);
--color-inverted: #fff;
--border-color-inverted: #fff;
--background-color-inverted: #101418;
--background-color-backdrop-light: rgba(255, 255, 255, 0.65);
--background-color-backdrop-dark: rgba(0, 0, 0, 0.65);
--color-notice: #202122;
--color-base--subtle: #54595d;
--background-color-interactive: #eaecf0;
--background-color-disabled: #c8ccd1;
--background-color-disabled-subtle: #eaecf0;
--border-color-subtle: #c8ccd1;
--border-color-muted: #dadde3;
--border-color-disabled: #c8ccd1;
--border-color-notice: #54595d;
--box-shadow-color-inverted: #fff;
}
/* Dark theme colors but if the "Automatic" theme was selected */
/* Copy and paste of the other dark theme color block */
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os {
--background-image: url("/bg-dark.png");
--background-color-base: black; /* --theme-page-background-color */
--color-base: #e6e6e6; /* --theme-page-text-color */
--color-base--rgb: 230, 230, 230;
--color-progressive: #b962b9; /* --theme-link-color */
--color-progressive--hover: #d8a8d8; /* --theme-link-color--hover */
--color-inverted-fixed: #fff; /* --theme-accent-label-color. Wikimedia says this should be unchanging between light and dark themes, then proceeds to use it in label colors... */
--border-color-base: #3a3a3a; /* --theme-border-color */
--background-color-neutral: #262626; /* --theme-page-background-color--secondary */
--background-color-neutral-subtle: #131313; /* Wikitable background, between --background-color-base and --background-color-neutral */
--background-color-progressive: #5f2c60; /* --theme-accent-color */
--background-color-progressive--hover: #a44ca5; /* --theme-accent-color--hover */
--background-color-progressive-subtle: rgba(185, 98, 185, 0.3); /* --theme-link-color--rgb */
/* Used for the temporary user banner and disabled buttons */
--color-inverted: #101418;
--border-color-inverted: #101418;
--background-color-inverted: #f8f9fa;
--background-color-backdrop-light: rgba(0, 0, 0, 0.65);
--background-color-backdrop-dark: rgba(255, 255, 255, 0.65);
--invert-on-dark: invert(1);
/* I don't know how to remap these colors */
--color-notice: #f8f9fa;
--color-base--subtle: #a2a9b1;
--background-color-interactive: #27292d;
--background-color-disabled: #54595d;
--background-color-disabled-subtle: #404244;
--border-color-subtle: #54595d;
--border-color-muted: #404244;
--border-color-disabled: #54595d;
--border-color-notice: #c8ccd1;
--box-shadow-color-inverted: #000;
}
}