Detecting OS light or dark mode? #601

lyderic · 2024-09-19T07:14:20Z

lyderic
Sep 19, 2024

In CSS, the dark/light mode of the user's OS can be detected automatically (e.g. without the user having to click on a button to select 'dark' if she's running a dark theme in Gnome).

Example for a very basic website using the Solarized theme:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>HTML Template</title>
    <style>
      @media(prefers-color-scheme: light) {
        body {
          color: #002b36;
          background: #fdf6e3;
        }
      }
      @media(prefers-color-scheme: dark) {
        body {
          color: #586e75;
          background: #002b36;
        }
      }
      body {
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <h1>Hello world!</h1>
  </body>
</html>

I would like to achieve this with SQLpage. I have tried to include a css file into shell.sql like this:

SELECT 'shell' AS component,
  'Title' AS title,
  'shell.css' AS css;

The corresponding css file being:

@media(prefers-color-scheme: light) {
/* light css directives */
}

@media(prefers-color-scheme: dark) {
/* dark css directives */
}

The thing is: I don't know what to put as light/dark css directives. SQLpage already provides a dark theme, that can be set in shell.sql ; I'd like it to be used when the user's OS is in dark mode automatically, otherwise use the light theme by default.

For the moment, I use this technique, but the user has to click on the ' ☀ ' button if she's using dark mode, which is a (admittedly very minor) inconvenience.

I would be grateful for any suggestion. Many thanks!

lovasoa · 2024-09-19T08:16:32Z

lovasoa
Sep 19, 2024
Maintainer

If you want to access the user's theme from your SQL files, you can store it in a cookie from javascript, and reload the page:

const currentTheme = document.cookie.split('; ').find(row => row.startsWith('theme='))?.split('=')[1];
const newTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';

if (currentTheme !== newTheme) {
  document.cookie = `theme=${newTheme}; path=/; max-age=31536000`; // Set cookie for 1 year
  window.location.reload(); // Reload the page
}

Then you can use the theme from sql:

select 'shell' as component, sqlpage.cookie('theme') as theme;

0 replies

lyderic · 2024-09-20T06:58:46Z

lyderic
Sep 20, 2024
Author

Many thanks! It works with Chromium on Gnome 47, YMMV.

For the record, I did the following:

Create a file called `shell.js`:

const currentTheme = document.cookie.split('; ').find(row => row.startsWith('theme='))?.split('=')[1];
const newTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';

if (currentTheme !== newTheme) {
  document.cookie = `theme=${newTheme}; path=/; max-age=31536000`; // Set cookie for 1 year
  window.location.reload(); // Reload the page
}

`shell.sql` looks like this now:

SELECT 'shell' AS component,
  'Foo' AS title,
  'shell.js' AS javascript,
  sqlpage.cookie('theme') AS theme;

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Detecting OS light or dark mode? #601

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Detecting OS light or dark mode? #601

Uh oh!

lyderic Sep 19, 2024

Replies: 2 comments

Uh oh!

Uh oh!

lovasoa Sep 19, 2024 Maintainer

Uh oh!

lyderic Sep 20, 2024 Author

Create a file called shell.js:

shell.sql looks like this now:

lyderic
Sep 19, 2024

lovasoa
Sep 19, 2024
Maintainer

lyderic
Sep 20, 2024
Author

Create a file called `shell.js`:

`shell.sql` looks like this now: