notion-syntax-highlighter icon indicating copy to clipboard operation
notion-syntax-highlighter copied to clipboard

Language selector, cursor and option buttons are not visible in some themes

Open JSerwatka opened this issue 2 years ago • 0 comments

Description

When a user selects a light theme for a code block while having a dark theme as the Notion color scheme, the "language selector" and cursor become invisible. Additionally, hovering over buttons like copy, caption, etc., causes them to disappear. The same issue exists when using a dark theme for the code block and a light theme for Notion

Steps to reproduce

Notion dark mode

  1. Set the Notion color scheme to dark mode.
  2. Create or navigate to a page with a code block.
  3. Apply a light theme to the code block.
  4. Observe that the "language selector" and the cursor are no longer visible.
  5. Hover over the copy, caption, or other relevant buttons, and notice that they disappear. image

Notion light mode

  1. Set the Notion color scheme to light mode.
  2. Create or navigate to a page with a code block.
  3. Apply a dark theme to the code block.
  4. Observe that the "language selector" and the cursor are no longer visible.
  5. Hover over the copy, caption, or other relevant buttons, and notice that they disappear. image

How to Implement it

  1. Use body.notion-body selector - if there is a "dark" class = dark theme, otherwise light theme
  2. Use styles defined in this commit to override notion's default styles - use light for code block light themes and dark for code block dark themes

JSerwatka avatar Jun 30 '23 16:06 JSerwatka