colours
diff --git a/Components/ThemeChangeButton.js b/Components/ThemeChangeButton.js
index 50f1cc2..b4c80c8 100644
--- a/Components/ThemeChangeButton.js
+++ b/Components/ThemeChangeButton.js
@@ -1,20 +1,29 @@
/** @jsxImportSource theme-ui */
import { useColorMode } from 'theme-ui';
-import Styles from '../styles/navbar.module.css'
+import Styles from '../styles/navbar.module.css';
+import Light from '../public/light.svg';
+import Dark from '../public/dark.svg';
+import { useState, useEffect } from 'react';
+
const ThemeChangeButton = () => {
const [colorMode, setColorMode] = useColorMode()
+ const [render, setRender] = useState(false);
+
+ useEffect(() => {
+ setRender(true);
+ });
+
return (
<header>
- <a onClick={(e) => {
- e.preventDefault();
- setColorMode(colorMode === 'light' ? 'dark' : 'light');
- }}>
- <img
- alt="Theme"
- className={Styles.icon}
- src={`/${colorMode}.svg`}
- /></a>
+ <a className={Styles.icon + " " + Styles.ThemeChangeButton} onClick={(e) => {
+ e.preventDefault();
+ setColorMode(colorMode === 'light' ? 'dark' : 'light');
+ }}>
+ {
+ !render ? null : (colorMode == 'light' ? <Light /> : <Dark />)
+ }
+ </a>
</header>
)
}