Description
When trying to theme the virtual keyboard, setting the --keyboard-toolbar-background-hover CSS variable globally (e.g., on :root or html) does not work. The toolbar buttons' hover background remains the default dark gray (#303030).
Upon inspecting the DOM, it seems MathLive applies --keyboard-toolbar-background-hover: #303030; directly onto the .ML__keyboard element. Due to CSS specificity, this local declaration always overrides any globally inherited custom CSS variables, making standard theming impossible for this specific property.
Ideally, the keyboard should inherit the globally defined CSS variables (perhaps by using a fallback approach like --_toolbar-background-hover: var(--keyboard-toolbar-background-hover, #303030); instead of redefining the main variable).
Steps to Reproduce
Here is a minimal reproducible example. I have set --keyboard-toolbar-background-hover to red on the document root, but the toolbar hover color remains #303030.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MathLive</title>
<script defer src="https://cdn.jsdelivr.net/npm/mathlive"></script>
<script>
// WORKAROUND: Forcing the global variable directly onto the keyboard element
function applyKeyboardThemeOverrides() {
const keyboard = document.querySelector('.ML__keyboard');
if (!keyboard) { return; }
const hoverColor = getComputedStyle(document.documentElement).getPropertyValue('--keyboard-toolbar-background-hover').trim();
if (hoverColor) { keyboard.style.setProperty('--keyboard-toolbar-background-hover', hoverColor); }
}
function applyUIColors(uiColors) {
for (const [key, value] of Object.entries(uiColors)) {
document.documentElement.style.setProperty(key, value);
}
}
function applyKeyboardLayoutConfig(config) {
window.mathVirtualKeyboard.layouts = config;
window.mathVirtualKeyboard.show();
// Uncommenting this fixes the issue:
// applyKeyboardThemeOverrides();
}
async function main() {
const mathField = new MathfieldElement();
mathField.value = 'x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}';
document.body.appendChild(mathField);
// Setting custom colors globally
applyUIColors({
'--keyboard-toolbar-background-hover': 'red',
'--keycap-background-hover': 'orange'
});
const minimalLayout = [
{
label: '123',
tooltip: 'Numbers & Operators',
rows: [
['+', '-', '\\times', '\\frac{#@}{#?}'],
['1', '2', '3', '4', '5'],
['6', '7', '8', '9', '0'],
['=', '.', '[Left]', '[Right]', '[Backspace]']
]
},
{
label: 'abc',
tooltip: 'Algebra & Functions',
rows: [
['x', 'y', 'a', 'b', 'c'],
['\\sqrt{#0}', '#@^{#?}', '(', ')', '\\pm'],
['[Left]', '[Right]', '[Backspace]']
]
}
];
applyKeyboardLayoutConfig(minimalLayout);
}
window.addEventListener('load', main);
</script>
</head>
<body>
</body>
</html>Expected Behavior
Setting --keyboard-toolbar-background-hover on the :root or html element should successfully change the hover background color of the virtual keyboard's toolbar buttons.
Workaround
Currently, the only way to apply the custom color is to query the generated .ML__keyboard element via JavaScript and explicitly set the CSS variable directly on its style object (as shown in the applyKeyboardThemeOverrides function in the example above).
Description
When trying to theme the virtual keyboard, setting the
--keyboard-toolbar-background-hoverCSS variable globally (e.g., on:rootorhtml) does not work. The toolbar buttons' hover background remains the default dark gray (#303030).Upon inspecting the DOM, it seems MathLive applies
--keyboard-toolbar-background-hover: #303030;directly onto the.ML__keyboardelement. Due to CSS specificity, this local declaration always overrides any globally inherited custom CSS variables, making standard theming impossible for this specific property.Ideally, the keyboard should inherit the globally defined CSS variables (perhaps by using a fallback approach like
--_toolbar-background-hover: var(--keyboard-toolbar-background-hover, #303030);instead of redefining the main variable).Steps to Reproduce
Here is a minimal reproducible example. I have set
--keyboard-toolbar-background-hovertoredon the document root, but the toolbar hover color remains#303030.Expected Behavior
Setting
--keyboard-toolbar-background-hoveron the:rootorhtmlelement should successfully change the hover background color of the virtual keyboard's toolbar buttons.Workaround
Currently, the only way to apply the custom color is to query the generated
.ML__keyboardelement via JavaScript and explicitly set the CSS variable directly on its style object (as shown in theapplyKeyboardThemeOverridesfunction in the example above).