Vmware Clarity 0.10.16이 새로운 어두운 테마를 방금 발표했습니다. 이것은 굉장합니다!vmware clarity로 테마를 동적으로 전환하는 방법
그들은 새 테마를 추가하는 방법을 설명했지만 페이지 내에서 동적으로 변경할 수있는 가능성에 대해서는 언급하지 않았습니다. 그것이 가능하지 않기 때문입니까?
그렇다면 Angular 4+로 어떻게 할 수 있습니까? 그것을 실현하는 방법을 설명하는 데 도움이 될 수있는 사이트는 무엇입니까?
미리 감사드립니다.
명료성에는 밝은 테마와 어두운 테마 모두에 대한 스타일 시트가 함께 제공됩니다. 우리는 here을 사용하여 angular-cli 또는 webpack 빌드 구성을 사용하는 방법을 문서화합니다. 즉 일단 앱이 만들어지면 스타일 만있는 것입니다.
테마 전환기를 구현하여 두 전환 방법을 구현하는 방법에 대한 아이디어가 있습니다.
<head>/path/to/light.css 및 /path/to/dark.css의 SRC에의 @Input을 할 수있는 지침 또는 구성 요소를 쓰기 필요할 때.앱에 대한 아이디어가 있습니까?
프로토 타입이 작동 한 후에 여기에서 업데이트 해 보겠습니다. 그래서 실제 동작을보고 소스 코드를 찾을 수 있습니다.
나는 이것을 할 수있는 방법에 대한 개념 증명을 만들었지 만 몇 가지 제한이 있습니다. 한 번에 하나의 테마 파일 만 포함 할 수 있기 때문에 나중에 정확한 테마가 렌더링되기 때문에 올바른 테마를 렌더링하는 데 약간의 시간이 걸릴 수 있습니다. 이후의 방문이 빠르게 렌더링되기 때문에 캐시가 브라우저에 대해 비어있는 경우에만 큰 효과가 있지만 중요한 고려 사항입니다. 처음부터 좀 더 견고한 것을 만들 수 있습니다.
https://stackblitz.com/edit/clarity-theme-switcher?file=app%2Fapp.component.ts
"모듈 'AppModule' 평가 중 예기치 않은 값 'undefined'가져 오기 시도 중. :-(또한, 여기에 설명 된 어떤 방법도 없습니다. https://stackoverflow.com/questions/42481704/angular-material-2-switch-theme-from-light-to-dark-on-click – David
현재 Chrome에서 작동하고 있지만 다른 브라우저는 테스트하지 않았습니다 StackBlitz는 아직 새롭기 때문에 문제가 될 수 있습니다. 그럴 수도 있지만 그럴 수도 있습니다 .Clarity 테마를 스스로 재구성해야합니다. 이 작품을 만들고, 사용중인 테마에 상관없이 두 버전을 모두 사용자에게 보내십시오. 단점은 해결할 수있는 다른 옵션이 있습니다. –
@JeremyWilken 여하튼 앵귤러 렌더링주기를 강제 실행 하시겠습니까? –
흥미 롭 군. 나는 당신의 POC를보고 싶어합니다. 여기에 설명 된 기술에 대해 어떻게 생각하십니까? https://stackoverflow.com/questions/42481704/angular-material-2-switch-theme-from-light-to-dark-on-click – David
접근 방식을 지원한다고 생각합니다. 우리는 하나의 style.css 파일로 각 테마마다 스타일을 만들고 전달해야합니다. 사용자가 하나의 테마 나 다른 테마를 필요로하지 않더라도 CSS 파일의 크기를 두 배로 늘릴 수 있습니다. 내가 탐구하고자하는 접근 방식은 테마가 앱 측면에서 적용될 수 있도록'CSS 사용자 정의 속성 (CSS 변수) '입니다. 커다란 장애물은 IE11의 지원 부족입니다. (Edge v15는이를 지원합니다.) 그래서 이것은 IE11을 지원하기 위해 polyfill을 추가하는 것을 의미합니다. – hippeelee
아이디어의 데모를 만들 수 있었습니까? 아니면 당신의 생각은 Jeremy의 대답과 비슷합니다. 초기 지연이 어떻게 든 회피 될 수 있다면 좋을 것입니다. –