Skip to content

Instantly share code, notes, and snippets.

@scivision

scivision/Readme.md

Last active August 5, 2025 17:15
Show Gist options
  • Save scivision/88b54b528b658b72547832b6e14643b2 to your computer and use it in GitHub Desktop.
Save scivision/88b54b528b658b72547832b6e14643b2 to your computer and use it in GitHub Desktop.
Download ZIP
Simple HTML page to demo "dark mode" default: fixes broken Matlab web() browser default CSS
Raw
Readme.md

HTML theme: use CSS along with color-scheme meta tag

The Matlab R2025a web command replaces the previous web browser that returned a Java object "com.mathworks.mde.webbrowser.WebBrowser" with matlab.htmlviewer.HTMLViewer as part of the Matlab Java internals purge that frees Matlab from depending on Java for essential GUI elements in R2025a and beyond.

The Matlab browser default style sheet for the internal web browser is broken on the CSS color-scheme meta tag.

<meta name="color-scheme" content="dark light">

or

<meta name="color-scheme" content="light dark">

may render as white text on white background in dark mode.

This is relevant as HTML generated with Matlab publish command may not render properly in Matlab's HTMLViewer.

Fix

Set a custom CSS style sheet (like the style.css of this demo) that defines colors for both light and dark modes. This fixes browsers like Matlab's with broken default stylesheets. Refer to the style.css file in the head section of the HTML file(s).

<head>
  <meta name="color-scheme" content="dark light">
  <link rel="stylesheet" href="style.css">
</head>

Status by Matlab Release

These issues are fixed as in the section above by using a custom CSS style sheet.

Matlab release Working Partly Working Broken
R2025a macOS, Windows normal, light dark-light, dark (text renders white on white)
R2024b Linux normal, light, dark dark-light (renders as light theme)
R2024b macOS normal, light dark-light (renders as light theme) dark (text renders white on white)
R2024a Linux, macOS normal, light, dark dark-light (renders as light theme)
R2023b, R2023a Linux normal, light, dark dark-light (renders as light theme)

Matlab web browser backend

  • R2025a, R2024b: matlab.htmlviewer.HTMLViewer
  • Matlab <= R2024a: com.mathworks.mde.webbrowser.WebBrowser
Raw
index.html
<!DOCTYPE html>
<head lang="en">
<title>Browser theme</title>
<meta name="color-scheme" content="dark light">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Browser color theme</h1>
<p id="userAgent"></p>
<script>document.getElementById("userAgent").textContent = navigator.userAgent;</script>
<noscript>The UserAgent would have displayed here if JavaScript was enabled.</noscript>
<p>The default Matlab style sheets clash with "dark" theme as set by "color-scheme".
Instead, use CSS (as in our <a href="style.css">style.css</a>
to define a default style, and your own dark theme defaults.</p>
</body>
</html>
Raw
main.m
% This Matlab script opens the index.html in the Matlab internal browser and system web browser
% This shows the difficulty in Matlab R2025a internal HTMLViewer, where dark theme rendering is broken--text is background color.
disp(matlabRelease())
disp(computer('arch'))
filename = fullfile(fileparts(mfilename('fullpath')), "index.html");
page = "file://" + filename;
web(page, '-new')
web(page, '-browser')
Raw
style.css
/* Default if no style indicated */
body {
background-color: white;
color: black;
}
/* Dark mode styles */
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}
/* Light mode styles */
@media (prefers-color-scheme: light) {
body {
background-color: white;
color: black;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment