Loftia Community Wiki - User contributions [en]

User:Isy/Sandbox/DarkMode-Experiment

2025-04-23T01:53:55Z

Isy: Created page with "<div class="dark-mode-experiment">{{#css:MediaWiki:DarkMode-Experiment.css}} {{#javascript:MediaWiki:DarkMode-Experiment.js}} Test Test </div>"

<div class="dark-mode-experiment">{{#css:MediaWiki:DarkMode-Experiment.css}}
{{#javascript:MediaWiki:DarkMode-Experiment.js}}

Test Test
</div>

User:Isy/Sandbox/DarkMode-Experiment.js

2025-04-23T01:52:55Z

Isy: Created page with "$(function() { // Only run on pages with our experiment const experimentPage = document.querySelector('.dark-mode-experiment'); if (!experimentPage) return; // Create and add toggle button const toggleBtn = document.createElement('button'); toggleBtn.className = 'dark-mode-toggle'; toggleBtn.innerHTML = '🌙'; document.body.appendChild(toggleBtn); // Theme management function setTheme(theme) { experimentPage.setAttribute..."

$(function() {
// Only run on pages with our experiment
const experimentPage = document.querySelector('.dark-mode-experiment');
if (!experimentPage) return;

// Create and add toggle button
const toggleBtn = document.createElement('button');
toggleBtn.className = 'dark-mode-toggle';
toggleBtn.innerHTML = '🌙';
document.body.appendChild(toggleBtn);

// Theme management
function setTheme(theme) {
experimentPage.setAttribute('data-theme', theme);
localStorage.setItem('darkModeExperiment', theme);
toggleBtn.innerHTML = theme === 'dark' ? '☀️' : '🌙';
}

// Initialize theme
const savedTheme = localStorage.getItem('darkModeExperiment');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
setTheme(savedTheme || (prefersDark ? 'dark' : 'light'));

// Toggle on click
toggleBtn.addEventListener('click', () => {
const current = experimentPage.getAttribute('data-theme') || 'light';
setTheme(current === 'dark' ? 'light' : 'dark');
});
});

User:Isy/Sandbox/DarkMode-Experiment.css

2025-04-23T01:48:58Z

Isy:

/* Fallback colors for strict validators */
.dark-mode-experiment {
background: #ffffff; /* Fallback */
color: #202122; /* Fallback */
--mw-bg: #ffffff;
--mw-surface: #f8f9fa;
--mw-text: #202122;
--mw-border: #a2a9b1;
--mw-link: #0645ad;
--mw-code-bg: #f8f9fa;
}

.dark-mode-experiment[data-theme="dark"] {
background: #1f1f1f; /* Fallback */
color: #e0e0e0; /* Fallback */
--mw-bg: #1f1f1f;
--mw-surface: #2a2a2a;
--mw-text: #e0e0e0;
--mw-border: #555555;
--mw-link: #6699ff;
--mw-code-bg: #2a2a2a;
}

/* Main content - with fallbacks */
.dark-mode-experiment .mw-parser-output {
background: #ffffff;
background: var(--mw-bg);
color: #202122;
color: var(--mw-text);
transition: all 0.3s ease;
min-height: 80vh;
padding: 20px;
}

/* Links */
.dark-mode-experiment a {
color: #0645ad;
color: var(--mw-link);
}

/* Tables */
.dark-mode-experiment table.wikitable {
background: #f8f9fa;
background: var(--mw-surface);
border-color: #a2a9b1;
border-color: var(--mw-border);
}

/* Code blocks */
.dark-mode-experiment code,
.dark-mode-experiment pre {
background: #f8f9fa;
background: var(--mw-code-bg);
}

/* Toggle button */
.dark-mode-toggle {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
width: 40px;
height: 40px;
border-radius: 50%;
background: #f8f9fa;
background: var(--mw-surface);
color: #202122;
color: var(--mw-text);
border: 1px solid #a2a9b1;
border: 1px solid var(--mw-border);
cursor: pointer;
font-size: 1.2em;
display: flex;
align-items: center;
justify-content: center;
}

User:Isy/Sandbox/DarkMode-Experiment.css

2025-04-23T01:30:14Z

Isy: Created page with "/** * 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..."

/**
* 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;
}

Isy/Sandbox/

2025-04-23T01:20:48Z

Isy: Test

<nowiki>{{#css:MediaWiki:</nowiki>

/**

<nowiki>*</nowiki> MediaWiki Theme Toggle Button - Simple UI, not setup to be like example design

<nowiki>*</nowiki>

<nowiki>*</nowiki> CSS for light/dark mode toggle with theme variables

<nowiki>*</nowiki> Compatible with MediaWiki styles

<nowiki>*</nowiki>/

/* Theme variables - Light theme (default) */

<nowiki>:</nowiki>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 */

<nowiki>:</nowiki>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 */

<nowiki>:</nowiki>root[data-theme] {

/* Transitions for smooth theme switching */

transition: all 0.3s ease;

}

body,

.mw-body,

<nowiki>#</nowiki>content,

<nowiki>#</nowiki>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 */

<nowiki>#</nowiki>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 */

<nowiki>#</nowiki>mw-head,

<nowiki>#</nowiki>mw-panel,

<nowiki>#</nowiki>p-logo,

.portal,

<nowiki>#</nowiki>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 */

<nowiki>#</nowiki>pt-theme-toggle {

display: inline-block;

margin: 0;

padding: 0;

}

<nowiki>#</nowiki>pt-theme-toggle .theme-toggle-button {

width: 28px;

height: 28px;

padding: 2px;

}

/* No JS fallback styles */

.no-js .theme-toggle-container {

display: none;

}

{{DEFAULTSORT:Isy/Sandbox/Test.css}}

Isy/Sandbox/

2025-04-23T01:01:27Z

Isy: Created page with "/** <nowiki>*</nowiki> MediaWiki Theme Toggle Button - Simple UI, not setup to be like example design <nowiki>*</nowiki> <nowiki>*</nowiki> CSS for light/dark mode toggle with theme variables <nowiki>*</nowiki> Compatible with MediaWiki styles <nowiki>*</nowiki>/ /* Theme variables - Light theme (default) */ <nowiki>:</nowiki>root[data-theme="light"] { /* Base colors */ --mw-color-background: #ffffff; --mw-color-surface: #f8f9fa; --mw-..."

/**

<nowiki>*</nowiki> MediaWiki Theme Toggle Button - Simple UI, not setup to be like example design

<nowiki>*</nowiki>

<nowiki>*</nowiki> CSS for light/dark mode toggle with theme variables

<nowiki>*</nowiki> Compatible with MediaWiki styles

<nowiki>*</nowiki>/

/* Theme variables - Light theme (default) */

<nowiki>:</nowiki>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 */

<nowiki>:</nowiki>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 */

<nowiki>:</nowiki>root[data-theme] {

/* Transitions for smooth theme switching */

transition: all 0.3s ease;

}

body,

.mw-body,

<nowiki>#</nowiki>content,

<nowiki>#</nowiki>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 */

<nowiki>#</nowiki>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 */

<nowiki>#</nowiki>mw-head,

<nowiki>#</nowiki>mw-panel,

<nowiki>#</nowiki>p-logo,

.portal,

<nowiki>#</nowiki>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 */

<nowiki>#</nowiki>pt-theme-toggle {

display: inline-block;

margin: 0;

padding: 0;

}

<nowiki>#</nowiki>pt-theme-toggle .theme-toggle-button {

width: 28px;

height: 28px;

padding: 2px;

}

/* No JS fallback styles */

.no-js .theme-toggle-container {

display: none;

}

User:Isy/Sandbox/

2025-04-23T00:53:39Z

Isy: Created page with "{{DISPLAYTITLE:User:Isy/Sandbox/Test.css}}"

User:Isy/Sandbox/TestPage

2025-04-23T00:38:06Z

Isy:

User:Isy/Sandbox/TestPage

2025-04-23T00:37:39Z

Isy:

<nowiki>{#css:MyStyles.css}}</nowiki>

/**

<nowiki>*</nowiki> MediaWiki Theme Toggle Button - Simple UI, not setup to be like example design

<nowiki>*</nowiki>

<nowiki>*</nowiki> CSS for light/dark mode toggle with theme variables

<nowiki>*</nowiki> Compatible with MediaWiki styles

<nowiki>*</nowiki>/

/* Theme variables - Light theme (default) */

<nowiki>:</nowiki>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 */

<nowiki>:</nowiki>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 */

<nowiki>:</nowiki>root[data-theme] {

/* Transitions for smooth theme switching */

transition: all 0.3s ease;

}

body,

.mw-body,

<nowiki>#</nowiki>content,

<nowiki>#</nowiki>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 */

<nowiki>#</nowiki>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 */

<nowiki>#</nowiki>mw-head,

<nowiki>#</nowiki>mw-panel,

<nowiki>#</nowiki>p-logo,

.portal,

<nowiki>#</nowiki>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 */

<nowiki>#</nowiki>pt-theme-toggle {

display: inline-block;

margin: 0;

padding: 0;

}

<nowiki>#</nowiki>pt-theme-toggle .theme-toggle-button {

width: 28px;

height: 28px;

padding: 2px;

}

/* No JS fallback styles */

.no-js .theme-toggle-container {

display: none;

}

User:Isy/Sandbox/TestPage

2025-04-23T00:33:41Z

Isy: Created page with "<nowiki>{{#css:MyStyles.css}}</nowiki>"

<nowiki>{{#css:MyStyles.css}}</nowiki>

User:Isy

2025-04-20T06:27:32Z

Isy: create user page