Skip to content

Commit

Permalink
Introduce theme switcher & persistence
Browse files Browse the repository at this point in the history
  • Loading branch information
lucemans committed Jan 27, 2025
1 parent 4ab0cd5 commit 7905a41
Show file tree
Hide file tree
Showing 4 changed files with 90 additions and 21 deletions.
36 changes: 31 additions & 5 deletions web/index.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<!--
v3xlabs/v3x-property
Expand All @@ -10,12 +10,38 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>v3x-property</title>
<script>
const theme = localStorage.getItem("theme");
if (theme) {
document.documentElement.classList.add(theme);
}
</script>
<link rel="stylesheet" href="./src/index.css" />
<script type="module" src="./src/index.tsx"></script>
<link rel="icon" type="image/png" sizes="64x64" href="./public/default_cube_64.png">
<link rel="icon" type="image/png" sizes="48x48" href="./public/default_cube_48.png">
<link rel="icon" type="image/png" sizes="32x32" href="./public/default_cube_32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./public/default_cube_16.png">
<link
rel="icon"
type="image/png"
sizes="64x64"
href="./public/default_cube_64.png"
/>
<link
rel="icon"
type="image/png"
sizes="48x48"
href="./public/default_cube_48.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./public/default_cube_32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="./public/default_cube_16.png"
/>
</head>
<body>
<div id="root"></div>
Expand Down
6 changes: 4 additions & 2 deletions web/src/components/navigation/Navbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,11 @@ import {
FiUsers,
} from 'react-icons/fi';

import { BASE_URL , useAuth , useHasPolicy,useMe } from '@/api';
import { Button,Dropdown } from '@/gui';
import { BASE_URL, useAuth, useHasPolicy, useMe } from '@/api';
import { Button, Dropdown } from '@/gui';

import { AvatarHolder, getInitials } from '../user/UserProfile';
import { ThemeSwitcher } from './ThemeSwitcher';

const LOGIN_URL = BASE_URL + 'login';

Expand Down Expand Up @@ -197,6 +198,7 @@ export const Navbar = () => {
</div>
<div className="h-full">
<div className="hidden h-full items-center gap-2 md:flex">
<ThemeSwitcher />
{token && meData && (
<div className="h-full md:border-l">
<Dropdown.Root>
Expand Down
25 changes: 25 additions & 0 deletions web/src/components/navigation/ThemeSwitcher.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { useState } from 'react';
import { FiMonitor, FiMoon, FiSun } from 'react-icons/fi';

import { cn } from '@/util/style';

export const ThemeSwitcher = () => {
const theme = localStorage.getItem('theme') || 'system';
const [currentTheme, setCurrentTheme] = useState(theme);
const setTheme = (theme: string) => {
localStorage.setItem('theme', theme);
setCurrentTheme(theme);
document.documentElement.classList.remove('light', 'dark');
document.documentElement.classList.add(theme);
};

return <div className="flex h-full items-center">
{
([['light', <FiSun />], ['dark', <FiMoon />], ['system', <FiMonitor />]] as const).map(([theme, icon]) => (
<button key={theme} onClick={() => setTheme(theme)} className={cn(currentTheme === theme && 'bg-backgroundSecondary', 'h-full flex items-center px-1')}>
{icon}
</button>
))
}
</div>;
};
44 changes: 30 additions & 14 deletions web/src/styles/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
@layer base {
:root {
--background: 0 0% 100%;
--background-secondary: 0 0% 95%;
--foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
Expand All @@ -28,24 +29,39 @@
--ring: 215 20.2% 65.1%;
--radius: 0.5rem;
}
}


@media (prefers-color-scheme: dark) {
:root {
--background: 240 8% 7%;
--background-secondary: 240 5% 15%;
--muted: 240 5% 15%;
--foreground: 0 0% 90%;
--primary: 210 40% 98%;
--primary-foreground: 210 40% 98%;
--accent-foreground: 210 40% 98%;
--border: 240 5% 15%;
--accent: 240 2% 15%;
--popover: 240 8% 7%;
--popover-foreground: 210 40% 9
}
@media (prefers-color-scheme: dark) {
html:not(.light) {
--background: 240 8% 7%;
--background-secondary: 240 5% 15%;
--muted: 240 5% 15%;
--foreground: 0 0% 90%;
--primary: 210 40% 98%;
--primary-foreground: 210 40% 98%;
--accent-foreground: 210 40% 98%;
--border: 240 5% 15%;
--accent: 240 2% 15%;
--popover: 240 8% 7%;
--popover-foreground: 210 40% 9
}
}

html.dark {
--background: 240 8% 7%;
--background-secondary: 240 5% 15%;
--muted: 240 5% 15%;
--foreground: 0 0% 90%;
--primary: 210 40% 98%;
--primary-foreground: 210 40% 98%;
--accent-foreground: 210 40% 98%;
--border: 240 5% 15%;
--accent: 240 2% 15%;
--popover: 240 8% 7%;
--popover-foreground: 210 40% 9
}

html, body {
@apply bg-background text-foreground;
}
Expand Down

0 comments on commit 7905a41

Please sign in to comment.