- 
- 
+
+
+
+ 
-
@@ -154,6 +166,43 @@ if(document.getElementById("navigation")){
}
}
}
+
+
+// switch theme
+const sunIcon = document.querySelector('.sun');
+const moonIcon = document.querySelector('.moon');
+
+const userTheme = localStorage.getItem('theme');
+const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+const iconToggle = () => {
+ sunIcon.classList.toggle('hidden');
+ moonIcon.classList.toggle('hidden');
+}
+
+const themeCheck = () => {
+ if(userTheme === 'dark' || (!userTheme && systemTheme)){
+ document.documentElement.classList.add('dark');
+ moonIcon.classList.add('hidden');
+ }
+ else{
+ sunIcon.classList.add('hidden');
+ }
+}
+
+const themeSwitch = () => {
+ if(document.documentElement.classList.contains('dark')){
+ document.documentElement.classList.remove('dark');
+ localStorage.setItem('theme','light');
+ iconToggle();
+ }
+ else{
+ document.documentElement.classList.add('dark');
+ localStorage.setItem('theme','dark');
+ iconToggle();
+ }
+}
+
window.addEventListener('click',(e)=>{
if(e.target.closest('.nav-link')){
if(e.target.closest('.nav-link').classList.contains('active')){
@@ -165,6 +214,7 @@ window.addEventListener('click',(e)=>{
}
}
else if(e.target.closest('.nav-toggle-btn')){
+ document.body.classList.toggle('lock-scroll');
if(nav.classList.contains('open')){
nav.classList.remove('open');
document.getElementById('hamburger').classList.remove('hidden');
@@ -176,8 +226,10 @@ window.addEventListener('click',(e)=>{
document.getElementById('cross').classList.remove('hidden');
}
}
+ else if(e.target.closest('.theme-switch-btn')){
+ themeSwitch();
+ }
})
-// switch theme
-
+themeCheck();
\ No newline at end of file
diff --git a/website/src/css/style.css b/website/src/css/style.css
index e36ec367fe..af0dee7b36 100644
--- a/website/src/css/style.css
+++ b/website/src/css/style.css
@@ -131,7 +131,7 @@ html {
height: 1px;
bottom: 0;
right: 0;
- background-color: #0D0E12;
+ /* background-color: initial; */
transition: width 0.25s ease-out;
}
@@ -159,11 +159,11 @@ html {
.sub-menu {
transition: all .3s ease !important;
}
-.nav-link span img,
+.nav-link span svg,
header nav {
transition: all 0.5s ease;
}
-.nav-link:hover span img {
+.nav-link:hover span svg {
transform: rotate(180deg);
}
@@ -204,6 +204,10 @@ header nav {
}
}
+.lock-scroll {
+ overflow: hidden;
+}
+
/* #menu a{
display: block;
diff --git a/website/src/img/new/logo-dark.png b/website/src/img/new/logo-dark.png
new file mode 100644
index 0000000000..1886df819c
Binary files /dev/null and b/website/src/img/new/logo-dark.png differ
diff --git a/website/src/img/new/logo-light.png b/website/src/img/new/logo-light.png
new file mode 100644
index 0000000000..3da724650f
Binary files /dev/null and b/website/src/img/new/logo-light.png differ
diff --git a/website/src/img/new/logo-symbol-dark.svg b/website/src/img/new/logo-symbol-dark.svg
new file mode 100644
index 0000000000..fa598acf3d
--- /dev/null
+++ b/website/src/img/new/logo-symbol-dark.svg
@@ -0,0 +1,10 @@
+
diff --git a/website/src/img/new/logo.png b/website/src/img/new/logo.png
deleted file mode 100644
index c35002c937..0000000000
Binary files a/website/src/img/new/logo.png and /dev/null differ
diff --git a/website/tailwind.config.js b/website/tailwind.config.js
index e9f30401c7..429d08560c 100644
--- a/website/tailwind.config.js
+++ b/website/tailwind.config.js
@@ -1,7 +1,18 @@
module.exports = {
+ darkMode : 'class',
content: ["./src/**/*.{html,js,njk}"],
theme: {
- extend: {},
+ extend: {
+ backgroundImage: {
+ 'gradient-radial': 'radial-gradient(88.77% 102.03% at 92.64% -13.22%, #17203D 0%, #0C0B13 100%)',
+ 'gradient-radial-mobile': 'radial-gradient(77.4% 73.09% at -3.68% 100%, #17203D 0%, #0C0B13 100%)'
+ },
+ colors: {
+ 'primary-light': '#0053D0',
+ 'primary-dark': '#70F0F9',
+ 'black': '#0D0E12'
+ }
+ },
},
plugins: [],
}
-
+
+
+ 
+
-