dandri/simplex-chat
1
0
Fork 0
mirror of https://github.com/simplex-chat/simplex-chat.git synced 2026-05-25 20:44:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

added theme switcher

Browse Source
This commit is contained in:
M Sarmad Qadeer
2022-10-26 11:24:13 +05:00
parent e308fb995e
commit 2539a4f1f5
8 changed files with 109 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/_includes/layouts/main.html
+5 -1
View File
@@ -10,7 +10,11 @@
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
{% include "navbar.html" %}
<section class="h-screen w-full bg-white dark:bg-gradient-radial-mobile dark:lg:bg-gradient-radial">
{% include "navbar.html" %}
</section>
<section class="container">
<div class="bg-white py-6 sm:py-12 sm:px-8 md:px-16 lg:px-20">{{ content | safe }}</div>
</section>
website/src/_includes/navbar.html
+75 -23
View File
@@ -1,17 +1,21 @@
<header class="bg-white dark:bg-black">
<header class="">
<div class="flex items-center justify-end m-auto container h-[66px]">
<a href="#" class="hidden h-full py-4 lg:inline-block mr-auto"><img class="w-auto h-[32px]" src="/img/new/logo.png" alt="logo" /></a>
<a href="" class="lg:hidden mr-auto"><img class="h-[32px]" src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
<a href="#" class="h-full py-4 hidden dark:hidden lg:inline-block mr-auto"><img class="w-auto h-[32px]" src="/img/new/logo-light.png" alt="logo" /></a>
<a href="#" class="h-full py-4 hidden dark:lg:inline-block mr-auto"><img class="w-auto h-[32px]" src="/img/new/logo-dark.png" alt="logo" /></a>
<a href="" class="dark:hidden lg:hidden mr-auto"><img class="h-[32px]" src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
<a href="" class="hidden dark:inline-block dark:lg:hidden lg:hidden mr-auto"><img class="h-[32px]" src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
<nav class="bg-[#F0F1F2] lg:bg-white fixed top-[66px] left-0 right-0 bottom-0 lg:top-0 lg:relative" id="menu">
<nav class="bg-[#F0F1F2] dark:bg-gradient-radial-mobile dark:lg:bg-none lg:bg-transparent fixed top-[66px] left-0 right-0 bottom-0 lg:top-0 lg:relative" id="menu">
<div class="flex flex-col lg:flex-row justify-between lg:items-center gap-10 container h-full">
<ul class="flex flex-col lg:flex-row lg:items-center gap-3 py-4 lg:py-0 lg:gap-10">
<li href="#" class="nav-link relative active">
<a href="javascript:void(0);" class="flex items-center justify-between gap-2 lg:py-5">
<span class="text-[16px] leading-[26px] tracking-[0.01em] nav-link-text">Home</span>
<a href="javascript:void(0);" class="flex items-center justify-between gap-2 lg:py-5 ">
<span class="text-[16px] leading-[26px] tracking-[0.01em] nav-link-text text-black dark:text-white before:bg-black dark:before:bg-white">Home</span>
<span href="" id="btn-mobile" class="flex items-center justify-center h-[36px] w-[36px] lg:h-auto lg:w-auto mt-1 lg:hidden">
<img src="/img/new/union.svg" />
<svg class="fill-black dark:fill-white" width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.50447 0.902966C1.21571 0.627397 0.747525 0.627397 0.458761 0.902966C0.169996 1.17853 0.169996 1.62532 0.458761 1.90089L4.21933 5.48961C4.25543 5.52406 4.29433 5.5542 4.33533 5.58003C4.62234 5.76088 5.01237 5.73074 5.26504 5.48961L9.02561 1.90089C9.31438 1.62532 9.31438 1.17853 9.02561 0.902966C8.73685 0.627397 8.26867 0.627397 7.97991 0.902966L4.74219 3.99273L1.50447 0.902966Z"/>
</svg>
</span>
</a>
@@ -23,13 +27,15 @@
</ul>
</li>
<hr>
<hr class="dark:opacity-[0.1]" >
<li href="#" class="nav-link relative">
<a href="javascript:void(0);" class="flex items-center justify-between gap-2 lg:py-5">
<span class="text-[16px] leading-[26px] tracking-[0.01em]">Developers</span>
<span class="text-[16px] leading-[26px] tracking-[0.01em] text-black dark:text-white before:bg-black dark:before:bg-white">Developers</span>
<span href="" id="btn-mobile" class="flex items-center justify-center h-[36px] w-[36px] lg:h-auto lg:w-auto mt-1">
<img src="/img/new/union.svg" />
<svg class="fill-black dark:fill-white" width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.50447 0.902966C1.21571 0.627397 0.747525 0.627397 0.458761 0.902966C0.169996 1.17853 0.169996 1.62532 0.458761 1.90089L4.21933 5.48961C4.25543 5.52406 4.29433 5.5542 4.33533 5.58003C4.62234 5.76088 5.01237 5.73074 5.26504 5.48961L9.02561 1.90089C9.31438 1.62532 9.31438 1.17853 9.02561 0.902966C8.73685 0.627397 8.26867 0.627397 7.97991 0.902966L4.74219 3.99273L1.50447 0.902966Z"/>
</svg>
</span>
</a>
@@ -41,13 +47,15 @@
</ul>
</li>
<hr>
<hr class="dark:opacity-[0.1]" >
<li href="#" class="nav-link relative">
<a href="javascript:void(0);" class="flex items-center justify-between gap-2 lg:py-5">
<span class="text-[16px] leading-[26px] tracking-[0.01em]">Reference</span>
<span class="text-[16px] leading-[26px] tracking-[0.01em] text-black dark:text-white before:bg-black dark:before:bg-white">Reference</span>
<span href="" id="btn-mobile" class="flex items-center justify-center h-[36px] w-[36px] lg:h-auto lg:w-auto mt-1">
<img src="/img/new/union.svg" />
<svg class="fill-black dark:fill-white" width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.50447 0.902966C1.21571 0.627397 0.747525 0.627397 0.458761 0.902966C0.169996 1.17853 0.169996 1.62532 0.458761 1.90089L4.21933 5.48961C4.25543 5.52406 4.29433 5.5542 4.33533 5.58003C4.62234 5.76088 5.01237 5.73074 5.26504 5.48961L9.02561 1.90089C9.31438 1.62532 9.31438 1.17853 9.02561 0.902966C8.73685 0.627397 8.26867 0.627397 7.97991 0.902966L4.74219 3.99273L1.50447 0.902966Z"/>
</svg>
</span>
</a>
@@ -59,13 +67,15 @@
</ul>
</li>
<hr>
<hr class="dark:opacity-[0.1]" >
<li href="#" class="nav-link relative">
<a href="javascript:void(0);" class="flex items-center justify-between gap-2 lg:py-5">
<span class="text-[16px] leading-[26px] tracking-[0.01em] nav-link-text">Blog</span>
<span class="text-[16px] leading-[26px] tracking-[0.01em] nav-link-text text-black dark:text-white before:bg-black dark:before:bg-white">Blog</span>
<span href="" id="btn-mobile" class="flex items-center justify-center h-[36px] w-[36px] lg:h-auto lg:w-auto mt-1 lg:hidden">
<img src="/img/new/union.svg" />
<svg class="fill-black dark:fill-white" width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.50447 0.902966C1.21571 0.627397 0.747525 0.627397 0.458761 0.902966C0.169996 1.17853 0.169996 1.62532 0.458761 1.90089L4.21933 5.48961C4.25543 5.52406 4.29433 5.5542 4.33533 5.58003C4.62234 5.76088 5.01237 5.73074 5.26504 5.48961L9.02561 1.90089C9.31438 1.62532 9.31438 1.17853 9.02561 0.902966C8.73685 0.627397 8.26867 0.627397 7.97991 0.902966L4.74219 3.99273L1.50447 0.902966Z"/>
</svg>
</span>
</a>
@@ -77,18 +87,20 @@
</ul>
</li>
</ul>
<a href="#" class="inline-block self-center text-white text-[16px] font-medium tracking-[0.02em] rounded-[34px] bg-[#0053D0] py-3 lg:py-2 px-20 lg:px-5 mb-16 lg:mb-0">Get Simplex</a>
<a href="#" class="inline-block self-center text-white dark:text-black text-[16px] font-medium tracking-[0.02em] rounded-[34px] bg-primary-light dark:bg-primary-dark py-3 lg:py-2 px-20 lg:px-5 mb-16 lg:mb-0">Get Simplex</a>
</div>
</nav>
<button href="#" class="flex items-center justify-center h-[36px] w-[36px] ml-10">
<img src="/img/new/sun.svg" alt="" srcset="" class="hidden">
<img src="/img/new/moon.svg" alt="" srcset="">
<button href="#" class="flex items-center justify-center h-[36px] w-[36px] ml-10 theme-switch-btn">
<img src="/img/new/sun.svg" alt="" srcset="" class="sun">
<img src="/img/new/moon.svg" alt="" srcset="" class="moon">
</button>
<button href="" id="btn-mobile" class="flex lg:hidden items-center justify-center h-[36px] w-[36px] ml-10 nav-toggle-btn">
<img src="/img/new/hamburger.svg" id="hamburger" alt="" srcset="">
<img src="/img/new/cross.svg" id="cross" alt="" srcset="" class="hidden">
<svg class="fill-black dark:fill-white hidden" id="cross" width="13" height="13" viewBox="0 0 13 13" xmlns="http://www.w3.org/2000/svg">
<path d="M12.7973 11.5525L7.59762 6.49833L12.7947 1.44675C13.055 1.19371 13.0658 0.771991 12.8188 0.505331C12.5718 0.238674 12.1602 0.227644 11.8999 0.480681L6.65343 5.58028L1.09979 0.182228C0.839522 -0.070157 0.427909 -0.059127 0.18094 0.207531C-0.0660305 0.474191 -0.0552645 0.895911 0.205003 1.14894L5.70862 6.49833L0.20247 11.851C-0.0577975 12.104 -0.0685635 12.5257 0.178407 12.7924C0.306324 12.9306 0.477936 13 0.650181 13C0.811033 13 0.971873 12.9397 1.09726 12.817L6.65343 7.41639L11.9025 12.5186C12.0285 12.6406 12.1893 12.7015 12.3495 12.7015C12.5218 12.7015 12.6934 12.6321 12.8213 12.4939C13.0689 12.2273 13.0582 11.8062 12.7973 11.5525Z" />
</svg>
</button>
</div>
@@ -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();
</SCript>
website/src/css/style.css
+7 -3
View File
@@ -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;
website/src/img/new/logo-dark.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.2 KiB

website/src/img/new/logo-light.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.1 KiB

website/src/img/new/logo-symbol-dark.svg
+10
View File
@@ -0,0 +1,10 @@
<svg width="34" height="35" viewBox="0 0 34 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.02958 8.60922L8.622 14.2013L14.3705 8.45375L17.1669 11.2498L11.4183 16.9972L17.0114 22.5895L14.1373 25.4633L8.54422 19.871L2.79636 25.6187L0 22.8227L5.74794 17.075L0.155484 11.483L3.02958 8.60922Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.0923 25.5156L16.944 22.6642L16.9429 22.6634L22.6467 16.9612L17.0513 11.3675L17.0523 11.367L14.2548 8.56979L8.65972 2.97535L11.5114 0.123963L17.1061 5.71849L22.8099 0.015625L25.6074 2.81285L19.9035 8.51562L25.4984 14.1099L31.2025 8.40729L34 11.2045L28.2958 16.907L33.8917 22.5017L31.0399 25.3531L25.4442 19.7584L19.7409 25.4611L25.3365 31.0559L22.4848 33.9073L16.8892 28.3124L11.1864 34.0156L8.38885 31.2184L14.0923 25.5156Z" fill="url(#paint0_linear_656_10815)"/>
<defs>
<linearGradient id="paint0_linear_656_10815" x1="12.8381" y1="-0.678252" x2="9.54355" y2="31.4493" gradientUnits="userSpaceOnUse">
<stop stop-color="#01F1FF"/>
<stop offset="1" stop-color="#0197FF"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

website/src/img/new/logo.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

website/tailwind.config.js
+12 -1
View File
@@ -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: [],
}