Anyone figured out a way to force dark mode?

[anon243]

No description provided.

[timvisee]

Currently, it is not possible to force this (without code modifications). It chooses light or dark mode based on device preferences.

[anon243]

I tried to modify the main.css file, but it's not working.

[l4rm4nd]

The light or dark mode is chosen dynamically based on user preference.

The relevant code lies in tailwind.config.js. Here, the following line declares dark mode:

      dark: { raw: '(prefers-color-scheme: dark)' }

However, dark mode is only chosen, when a user explicitely uses the dark scheme preference. This is either an OS choice and the web browser adopts it; or the choice is solely defined in the user's web browser settings. If the user uses the scheme preference light or does not have a preference at all, the light theme will be used.

Since its tailwind, the CSS modifications will be fininshed as soon as the server is started. A modification during runtime is pain. Therefore, the tailwind config must be changed before the Docker image is started as a container. This requires said code modifications @timvisee explained.

If you want to force dark mode only, you would replace the displayed code line above with the following:

      dark: { raw: '(prefers-color-scheme: dark), (prefers-color-scheme: no-preference), (prefers-color-scheme: light)' } // Always active dark mode

I've forked this repository to test this. A GitHub action is building the Docker image for my forked repo and pushes it onto Dockerhub. I've also adjusted the docker-compose.yml in the fork to make use of the dark-mode-only Docker image as well as list some important environment variables.

Feel free to use it, if you want dark mode only. I'll try to keep the forked repo in sync to this one.

[l4rm4nd]

@timvisee you may provide two different tailwind configs. One default as of now for light/dark mode based on user preference and one for dark mode only with my changes.

Then conditionally load one of them depending on a new environment variable such as DARK_MODE_ONLY set to true.

You would implement this in the postcss.config.js file like follows:

const TailwindExtractor = content => {
  return content.match(/[A-Za-z0-9-_:/]+/g) || [];
};

let tailwindConfigFile = process.env.DARK_MODE_ONLY === 'true' ? './tailwind-dark.config.js' : './tailwind.config.js';

const options = {
  plugins: [
    require('postcss-preset-env'),
    require('tailwindcss')(tailwindConfigFile)
  ]
};

if (process.env.NODE_ENV === 'development') {
  options.map = { inline: true };
} else {
  options.plugins.push(
    require('@fullhuman/postcss-purgecss')({
      content: [
        './app/*.js',
        './app/ui/*.js',
        './android/*.js',
        './android/pages/*.js'
      ],
      extractors: [
        {
          extractor: TailwindExtractor,
          extensions: ['js']
        }
      ]
    })
  );
}

module.exports = options;

Just an idea.

Edit: Okay, does not make sense as the npm run build command is done during Docker image build and not later, when the image is run as container. Therefore, introducing new env variables won't work. Ignore this idea.