Dark mode has black text within editor

[kgrosvenor]

Strapi now has dark theme set as default, or perhaps i set it by mistake

[melishev]

@kgrosvenor

In any case, we will need to fix this soon.

[kgrosvenor]

Thanks @melishev it'd be great!

[kgrosvenor]

Hey i managed to fix it by running locally like mentioned in the docs then i wrote bit of code to detect the mode. Feel free to use in a later update. @melishev

import styled from 'styled-components';
import {Box} from "@strapi/design-system/Box";

const computeInterfaceModeStyle = () => {
  const strapiTheme = window.localStorage.getItem('STRAPI_THEME');
  let interfaceModeColor = 'black';
  let toolbarButtonHoverColor = 'white';
  let selectionColor = '#e1f2ff';

  if (strapiTheme) {
    if (strapiTheme === 'dark') {
      interfaceModeColor = 'white';
      toolbarButtonHoverColor = '#181826';
      selectionColor = "#181826"
    }
    if(strapiTheme === 'light') {
      interfaceModeColor = 'black'
    }
  } else {
    // Check what the browser settings are, strapi falls back onto this when there is no local storage
    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
      interfaceModeColor = 'white';
    }
  }

  return `
    .ce-block__content {
      color: ${interfaceModeColor};
    }
    
    .ce-toolbar__actions-buttons svg {
      fill: ${interfaceModeColor}
    }
    
    .ce-toolbar__settings-btn--active, .ce-toolbar__settings-btn:hover {
      background-color: ${toolbarButtonHoverColor};
    }
    
    .ce-block--selected .ce-block__content {
      background: ${selectionColor};
    }
    
    .cdx-block::selection {
      background-color: ${selectionColor};
    }
  `;
}


const Wrapper = styled(Box)`

  ${computeInterfaceModeStyle};

[melishev]

@kgrosvenor Oh that's amazing, could you send a PR with your changes so we can include them in the package?

[kgrosvenor]

Will do!

[kgrosvenor]

#40

[netviral]

Hey i managed to fix it by running locally like mentioned in the docs then i wrote bit of code to detect the mode. Feel free to use in a later update. @melishev

import styled from 'styled-components';
import {Box} from "@strapi/design-system/Box";

const computeInterfaceModeStyle = () => {
  const strapiTheme = window.localStorage.getItem('STRAPI_THEME');
  let interfaceModeColor = 'black';
  let toolbarButtonHoverColor = 'white';
  let selectionColor = '#e1f2ff';

  if (strapiTheme) {
    if (strapiTheme === 'dark') {
      interfaceModeColor = 'white';
      toolbarButtonHoverColor = '#181826';
      selectionColor = "#181826"
    }
    if(strapiTheme === 'light') {
      interfaceModeColor = 'black'
    }
  } else {
    // Check what the browser settings are, strapi falls back onto this when there is no local storage
    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
      interfaceModeColor = 'white';
    }
  }

  return `
    .ce-block__content {
      color: ${interfaceModeColor};
    }
    
    .ce-toolbar__actions-buttons svg {
      fill: ${interfaceModeColor}
    }
    
    .ce-toolbar__settings-btn--active, .ce-toolbar__settings-btn:hover {
      background-color: ${toolbarButtonHoverColor};
    }
    
    .ce-block--selected .ce-block__content {
      background: ${selectionColor};
    }
    
    .cdx-block::selection {
      background-color: ${selectionColor};
    }
  `;
}


const Wrapper = styled(Box)`

  ${computeInterfaceModeStyle};

Hey I was using this plugin. Could you tell me where can I paste this code to make this work?

[kgrosvenor]

Hey you will need to follow the steps in the README to include the project in your project.
This is the best way to include in package.json so it installs nicely in one npm install command.

  "workspaces": [
    "src/plugins/strapi-plugin-react-editorjs"
  ],

Clone my forked repo into plugins in your project, remove the git association.

So it should be like

src/plugins/strapi-plugin-react-editorjs

Update your plugins config file to use the following

module.exports = ({ env }) => ({
  // ...
  'editorjs': {
    enabled: true,
    resolve: './src/plugins/strapi-plugin-react-editorjs'
  },
  // ...
})

npm run build and then restart the server

[netviral]

Hey you will need to follow the steps in the README to include the project in your project. This is the best way to include in package.json so it installs nicely in one npm install command.

  "workspaces": [
    "src/plugins/strapi-plugin-react-editorjs"
  ],

Clone my forked repo into plugins in your project, remove the git association.

So it should be like

src/plugins/strapi-plugin-react-editorjs

Update your plugins config file to use the following

module.exports = ({ env }) => ({
  // ...
  'editorjs': {
    enabled: true,
    resolve: './src/plugins/strapi-plugin-react-editorjs'
  },
  // ...
})

npm run build and then restart the server

Hey yes I managed to get the plugin on. I meant how do I go about changing the editor font colors according to the mode. How can I use the snippet of logic you built to get the same results?

Thank you so much in advance!

[SalahAdDin]

Hey you will need to follow the steps in the README to include the project in your project. This is the best way to include in package.json so it installs nicely in one npm install command.

  "workspaces": [
    "src/plugins/strapi-plugin-react-editorjs"
  ],

Clone my forked repo into plugins in your project, remove the git association.

So it should be like

src/plugins/strapi-plugin-react-editorjs

Update your plugins config file to use the following

module.exports = ({ env }) => ({
  // ...
  'editorjs': {
    enabled: true,
    resolve: './src/plugins/strapi-plugin-react-editorjs'
  },
  // ...
})

npm run build and then restart the server

Did you try to make a pull request?

I found this bug too.