notion-syntax-highlighter
                                
                                 notion-syntax-highlighter copied to clipboard
                                
                                    notion-syntax-highlighter copied to clipboard
                            
                            
                            
                        Language selector, cursor and option buttons are not visible in some themes
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
- Set the Notion color scheme to dark mode.
- Create or navigate to a page with a code block.
- Apply a light theme to the code block.
- Observe that the "language selector" and the cursor are no longer visible.
- Hover over the copy, caption, or other relevant buttons, and notice that they disappear.
Notion light mode
- Set the Notion color scheme to light mode.
- Create or navigate to a page with a code block.
- Apply a dark theme to the code block.
- Observe that the "language selector" and the cursor are no longer visible.
- Hover over the copy, caption, or other relevant buttons, and notice that they disappear.
How to Implement it
- Use body.notion-bodyselector - if there is a "dark" class = dark theme, otherwise light theme
- 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