{#css:MyStyles.css}}
/**
* MediaWiki Theme Toggle Button - Simple UI, not setup to be like example design
*
* CSS for light/dark mode toggle with theme variables
* Compatible with MediaWiki styles
*/
/* Theme variables - Light theme (default) */
:root[data-theme="light"] {
/* Base colors */
--mw-color-background: #ffffff;
--mw-color-surface: #f8f9fa;
--mw-color-text-primary: #202122;
--mw-color-text-secondary: #54595d;
--mw-color-border: #c8ccd1;
--mw-color-link: #0645ad;
--mw-color-link-visited: #0b0080;
--mw-color-link-active: #faa700;
/* UI component colors */
--mw-color-input-bg: #ffffff;
--mw-color-input-border: #a2a9b1;
--mw-color-button-bg: #f8f9fa;
--mw-color-button-text: #202122;
--mw-color-button-border: #a2a9b1;
--mw-color-destructive: #d73333;
--mw-color-progressive: #3366cc;
/* Content colors */
--mw-color-info-box-bg: #eaecf0;
--mw-color-warning-box-bg: #fee7e6;
--mw-color-success-box-bg: #d5fdf4;
--mw-color-note-box-bg: #eaf3ff;
/* Syntax highlighting */
--mw-color-code-bg: #f8f9fa;
--mw-color-code-text: #000000;
/* Toggle button specific */
--mw-toggle-button-bg: #f8f9fa;
--mw-toggle-button-color: #202122;
--mw-toggle-button-border: #a2a9b1;
--mw-toggle-button-hover-bg: #ffffff;
}
/* Dark theme variables */
:root[data-theme="dark"] {
/* Base colors */
--mw-color-background: #1f1f1f;
--mw-color-surface: #2a2a2a;
--mw-color-text-primary: #e0e0e0;
--mw-color-text-secondary: #b0b0b0;
--mw-color-border: #555555;
--mw-color-link: #6699ff;
--mw-color-link-visited: #b3ccff;
--mw-color-link-active: #ffcc33;
/* UI component colors */
--mw-color-input-bg: #2a2a2a;
--mw-color-input-border: #555555;
--mw-color-button-bg: #333333;
--mw-color-button-text: #e0e0e0;
--mw-color-button-border: #555555;
--mw-color-destructive: #ff5555;
--mw-color-progressive: #6699ff;
/* Content colors */
--mw-color-info-box-bg: #333333;
--mw-color-warning-box-bg: #402020;
--mw-color-success-box-bg: #203020;
--mw-color-note-box-bg: #203040;
/* Syntax highlighting */
--mw-color-code-bg: #2a2a2a;
--mw-color-code-text: #e0e0e0;
/* Toggle button specific */
--mw-toggle-button-bg: #333333;
--mw-toggle-button-color: #e0e0e0;
--mw-toggle-button-border: #555555;
--mw-toggle-button-hover-bg: #444444;
}
/* Apply theme variables to MediaWiki elements */
:root[data-theme] {
/* Transitions for smooth theme switching */
transition: all 0.3s ease;
}
body,
.mw-body,
#content,
#mw-content-text,
.mw-parser-output {
background-color: var(--mw-color-background);
color: var(--mw-color-text-primary);
transition: background-color 0.3s ease, color 0.3s ease;
}
/* Main content styling */
#content,
.mw-body,
.mw-body-content {
color: var(--mw-color-text-primary);
}
/* Links */
a:link {
color: var(--mw-color-link);
}
a:visited {
color: var(--mw-color-link-visited);
}
a:active {
color: var(--mw-color-link-active);
}
/* Headings */
h1, h2, h3, h4, h5, h6 {
color: var(--mw-color-text-primary);
border-color: var(--mw-color-border);
}
/* Tables */
table.wikitable {
background-color: var(--mw-color-surface);
color: var(--mw-color-text-primary);
border-color: var(--mw-color-border);
}
table.wikitable > tr > th,
table.wikitable > * > tr > th {
background-color: var(--mw-color-surface);
color: var(--mw-color-text-primary);
border-color: var(--mw-color-border);
}
table.wikitable > tr > td,
table.wikitable > * > tr > td {
background-color: var(--mw-color-background);
color: var(--mw-color-text-primary);
border-color: var(--mw-color-border);
}
/* Infoboxes */
.infobox,
.mw-highlight,
.notice,
.toccolours,
.messagebox {
background-color: var(--mw-color-surface);
color: var(--mw-color-text-primary);
border-color: var(--mw-color-border);
}
/* Code blocks */
code,
pre,
.mw-code {
background-color: var(--mw-color-code-bg);
color: var(--mw-color-code-text);
border-color: var(--mw-color-border);
}
/* Navigation elements */
#mw-head,
#mw-panel,
#p-logo,
.portal,
#mw-navigation {
background-color: var(--mw-color-surface);
color: var(--mw-color-text-primary);
}
/* Theme toggle button styles */
.theme-toggle-container {
display: inline-block;
margin: 0 10px;
vertical-align: middle;
white-space: nowrap;
}
.theme-toggle-button {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 4px;
border-radius: 50%;
border: 1px solid var(--mw-toggle-button-border);
background-color: var(--mw-toggle-button-bg);
color: var(--mw-toggle-button-color);
cursor: pointer;
transition: all 0.3s ease;
}
.theme-toggle-button:hover {
background-color: var(--mw-toggle-button-hover-bg);
transform: scale(1.05);
}
.theme-toggle-button:focus {
outline: 2px solid var(--mw-color-progressive);
outline-offset: 2px;
}
.theme-toggle-icon {
display: flex;
align-items: center;
justify-content: center;
}
.theme-toggle-icon svg {
width: 20px;
height: 20px;
}
/* Fixed position toggle for mobile view */
@media (max-width: 768px) {
.theme-toggle-container {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 100;
margin: 0;
}
.theme-toggle-button {
width: 40px;
height: 40px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
/* Increase button size for better touch target */
.theme-toggle-icon svg {
width: 24px;
height: 24px;
}
}
/* Styles for personal tools menu integration */
#pt-theme-toggle {
display: inline-block;
margin: 0;
padding: 0;
}
#pt-theme-toggle .theme-toggle-button {
width: 28px;
height: 28px;
padding: 2px;
}
/* No JS fallback styles */
.no-js .theme-toggle-container {
display: none;
}