Default text invisible when in Strapi dark / system mode

[jasonmwnz]

When Strapi is in dark mode or reading from system and system is in dark mode, the default text color in the editor seems to be white / invisible.

Dark / System Dark (note the word / character count):

Light:

[hoqkhanh]

I have the same issue

[Casal0x]

When Strapi is in dark mode or reading from system and system is in dark mode, the default text color in the editor seems to be white / invisible

yes for some reason dark mode is not working, I fixed the color of the text adding the CSS variable because is undefined.

• Go to src > admin, rename app.example.ts to app.ts
• Create a global.css in the same folder or where you want.
• import it into the app.ts with import "./global.css"

code for global CSS:
:root { --ck-color-editor-base-text: #000000; }

[jasonmwnz]

Thanks @Casal0x that did the trick for now.

So is the expected / future behavior for dark mode to automatically be dark if the Strapi setting is dark?

[Casal0x]

Thanks @Casal0x that did the trick for now.

So is the expected / future behavior for dark mode to automatically be dark if the Strapi setting is dark?

no, I don't think this is expected behavior but is a fix to use it

[htrobles]

I can't seem to make it work. Here's what my app.ts looks like:

import type { StrapiApp } from '@strapi/strapi/admin';
import './global.css';

export default {
  config: {
    // locales: [
    //   // 'ar',
    //   // 'fr',
    //   // 'cs',
    //   // 'de',
    //   // 'dk',
    //   // 'es',
    //   // 'he',
    //   // 'id',
    //   // 'it',
    //   // 'ja',
    //   // 'ko',
    //   // 'ms',
    //   // 'nl',
    //   // 'no',
    //   // 'pl',
    //   // 'pt-BR',
    //   // 'pt',
    //   // 'ru',
    //   // 'sk',
    //   // 'sv',
    //   // 'th',
    //   // 'tr',
    //   // 'uk',
    //   // 'vi',
    //   // 'zh-Hans',
    //   // 'zh',
    // ],
  },
  bootstrap(app: StrapiApp) {
    console.log(app);
  },
};