Switching themes easily in vue

[omnidepp]

Hi everyone, could you please provide some documentation on how to switch these beautiful themes easily in vue? Like switching flatly for darkly programmatically and vice versa. Any help highly appreciated!

[alain01]

Hello, With the CMS XOOPS and the theme xswatch4, you can use it and more. You can swtich light mode to dark mode directly by the system. See the video in the news here

[dwblmo]

You can easily use prefers-color-scheme in CSS.

Just add the following into the of your pages:

<meta name="color-scheme" content="light dark">
<link rel="stylesheet" href="darkly.css" media="(prefers-color-scheme: dark)" />
<link rel="stylesheet" href="flatly.css" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: light)" />

It gets the operatin settings set to dark or ligt, if no setting is set, ist uses light as default

[fxzxmic]

You can easily use prefers-color-scheme in CSS.

Just add the following into the of your pages:

<meta name="color-scheme" content="light dark">
<link rel="stylesheet" href="darkly.css" media="(prefers-color-scheme: dark)" />
<link rel="stylesheet" href="flatly.css" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: light)" />

It gets the operatin settings set to dark or ligt, if no setting is set, ist uses light as default

Perhaps this is currently the most suitable and compatible way with upstream.