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);
  },
};

[ZahiriNatZuke]

this works for me, I copied dark styles from CKEditor

src/admin/global.css

@media (prefers-color-scheme: dark) {
    .ck {
        --ck-color-toolbar-background: rgb(24, 24, 38);
        --ck-color-text: rgb(165, 165, 186);
        --ck-color-editor-base-text: rgb(255, 255, 255);
        --ck-color-toolbar-border: rgb(74, 74, 106);
        --ck-color-base-border: rgb(74, 74, 106);
        --ck-color-base-background: rgb(33, 33, 52);
        --ck-color-button-default-background: rgb(33, 33, 52);
        --ck-color-list-button-hover-background: rgb(24, 24, 38);
        --ck-color-button-default-hover-background: rgb(33, 33, 52);
        --ck-color-button-on-background: rgb(33, 33, 52);
        --ck-color-button-on-hover-background: rgb(33, 33, 52);
        --ck-color-button-default-active-background: rgb(33, 33, 52);
    }

    .ck-word-count {
        color: rgb(165, 165, 186)
    }
}

src/admin/app.tsx

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);
  },
};