본문 바로가기
카테고리 없음

ag-grid 다크모드 변화

by uni:D 2025. 1. 13.
반응형

다크모드 클래스

1. 첫번째 차트 ag-theme-quartz 
.ag-theme-quartz
.ag-theme-quartz-dark

2. 두번째 차트
ag-theme-balham 
ag-theme-balham-dark

----------------------------------------------------
<html lang="en" data-astro-cid-sckkx6r4="" 
style="--lightModeCSSUrl: url(&quot;/images/sun.svg&quot;);
--darkModeCSSUrl: url(&quot;/images/moon.svg&quot;);" 
data-dark-mode="false" 
data-ag-theme-mode="light">

<html lang="en" data-astro-cid-sckkx6r4="" 
style="--lightModeCSSUrl: url(&quot;/images/sun.svg&quot;);
--darkModeCSSUrl: url(&quot;/images/moon.svg&quot;);"  
data-dark-mode="true" 
data-ag-theme-mode="dark-blue">

 

------------------------------------------------------
<html lang="en" data-color-scheme="light" data-ag-theme-mode="light">
<body data-ag-theme-mode="dark-red">

<html lang="en" data-color-scheme="light" data-ag-theme-mode="light">
<body data-ag-theme-mode="light-red">

차트는
<html lang="en" data-color-scheme="dark" 
data-ag-theme-mode="dark-blue" 
data-dark-mode="true"><head>

<html lang="en" data-color-scheme="light" 
data-ag-theme-mode="light" 
data-dark-mode="true">
-------------------

바뀌면서 인라인으로 태그들이 들어감
:where([data-ag-theme-mode="dark-blue"])

반응형