Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ColorModeProvider doesn't respect environment #8359

Open
1 of 3 tasks
anilanar opened this issue Mar 14, 2024 · 0 comments
Open
1 of 3 tasks

ColorModeProvider doesn't respect environment #8359

anilanar opened this issue Mar 14, 2024 · 0 comments
Labels
Topic: Color Mode 🌓 Issue or PR related to color mode

Comments

@anilanar
Copy link
Contributor

Description

In a custom environment like an iframe, I expect everything to work when used with <ChakraProvider environment={{...}}>.

However, the color manager ignores custom environments completely. See:

chakra-ui/packages/components/src/color-mode/color-mode.utils.ts

Lines 17 to 24 in 7b6e66a

const cleanup = preventTransition ? utils.preventTransition() : undefined
document.documentElement.dataset.theme = value
document.documentElement.style.colorScheme = value
cleanup?.()
},
setClassName(dark: boolean) {
document.body.classList.add(dark ? classNames.dark : classNames.light)
document.body.classList.remove(dark ? classNames.light : classNames.dark)

As a result of that, data-theme attribute is not set on the <html> element. Because of that, default border color stays the user-agent default instead of chakra-ui's default.

I don't utilize color manager functionality of chakra-ui, but I assume that feature is completely broken due to this.

Link to Reproduction

https://codesandbox.io/p/sandbox/agitated-faraday-jns5jc

Steps to reproduce

  1. Look at the screen.

Chakra UI Version

2.8.2

Browser

Chrome, Firefox

Operating System

  • macOS
  • Windows
  • Linux

Additional Information

No response
@segunadebayo segunadebayo added the Topic: Color Mode 🌓 Issue or PR related to color mode label Mar 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Topic: Color Mode 🌓 Issue or PR related to color mode
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@anilanar @segunadebayo