UI: change cncf logo and suit for dark mode (KusionStack#234)

niconical · May 29, 2023 · 52a40c2 · 52a40c2
1 parent 5f09830
commit 52a40c2
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 1 deletion.
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -6,6 +6,7 @@ import Layout from '@theme/Layout'
 import clsx from 'clsx'
 import React from 'react'
 import { ExampleScroller } from "../components/ExampleScroller"
+import ThemedImage from '@theme/ThemedImage';
 
 import whoIsUsing from '../data/whoIsUsing'
 import styles from './index.module.css'
@@ -210,7 +211,14 @@ function Home() {
             </h2>
             <br/>
             <div>
-                <img src="img/cncf-logo.png" />
+              <ThemedImage
+                className={styles.cncfLogo}
+                alt="CNCF themed image"
+                sources={{
+                  light: useBaseUrl('/img/cncf-color.png'),
+                  dark: useBaseUrl('/img/cncf-white.png'),
+                }}
+              />
             </div>
           </div>
         </div>

diff --git a/src/pages/index.module.css b/src/pages/index.module.css
@@ -129,6 +129,10 @@
   height: 96px;
 }
 
+[data-theme='dark'] .cncfLogo {
+  height: 75px;
+}
+
 @media screen and (max-width: 768px) {
   .cncfLogo {
     height: 64px;

diff --git a/static/img/cncf-color.png b/static/img/cncf-color.png
diff --git a/static/img/cncf-logo.png b/static/img/cncf-logo.png
diff --git a/static/img/cncf-white.png b/static/img/cncf-white.png