Darkmode anche in mobile

pull/1/head
Antonio De Lucreziis 2 years ago
parent 360fa42606
commit c7c8ce9d48

@ -2,13 +2,21 @@ import { ComboBox } from './ComboBox.jsx'
import { Help } from './Help.jsx'
import { Icon } from './Icon.jsx'
export const HamburgerMenu = ({ onClose, mode, setMode, source, setSource }) => {
export const HamburgerMenu = ({ onClose, mode, setMode, source, setSource, theme, setTheme }) => {
return (
<div class="menu">
<div class="header">
<button class="flat icon" onClick={onClose}>
<Icon name="close" />
</button>
<div class="option-group">
<button class="flat icon" onClick={onClose}>
<Icon name="close" />
</button>
<button
class="icon"
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
>
<Icon name={theme === 'dark' ? 'dark_mode' : 'light_mode'} />
</button>
</div>
<div class="item logo">
<img src="logo-circuit-board.svg" alt="logo" /> / <span>Orario</span>
</div>
@ -34,8 +42,8 @@ export const HamburgerMenu = ({ onClose, mode, setMode, source, setSource }) =>
{ value: 'course', label: 'Corsi' },
{ value: 'work-week-v', label: 'Settimana' },
// {
// value: 'work-week-h',
// label: 'Settimana (Trasposto)',
// value: 'work-week-h',
// label: 'Settimana (Trasposto)',
// },
]}
/>

@ -1,7 +1,16 @@
import { CompoundButton } from './CompoundButton.jsx'
import { Icon } from './Icon.jsx'
export const Toolbar = ({ mode, setMode, source, setSource, onShowMenu, onHelp, theme, setTheme }) => {
export const Toolbar = ({
mode,
setMode,
source,
setSource,
onShowMenu,
onHelp,
theme,
setTheme,
}) => {
return (
<div class="toolbar">
<div class="mobile">
@ -34,13 +43,13 @@ export const Toolbar = ({ mode, setMode, source, setSource, onShowMenu, onHelp,
{ value: 'course', label: 'Corsi' },
{ value: 'work-week-v', label: 'Settimana' },
// {
// value: 'work-week-h',
// label: (
// <>
// <Icon name="warning" />
// Settimana<sup>T</sup>
// </>
// ),
// value: 'work-week-h',
// label: (
// <>
// <Icon name="warning" />
// Settimana<sup>T</sup>
// </>
// ),
// },
]}
value={mode}
@ -53,8 +62,11 @@ export const Toolbar = ({ mode, setMode, source, setSource, onShowMenu, onHelp,
</button>
</div>
<div class="item option">
<button class="icon" onClick={() => setTheme(theme==="dark"?"light":"dark")}>
<Icon name={theme==="dark"?"dark_mode":"light_mode"} />
<button
class="icon"
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
>
<Icon name={theme === 'dark' ? 'dark_mode' : 'light_mode'} />
</button>
</div>
<div class="item option">

@ -103,10 +103,10 @@ const App = ({}) => {
setEventi(eventi)
}, [source])
const [theme, setTheme] = useState(localStorage.getItem("theme") ?? "light")
const [theme, setTheme] = useState(localStorage.getItem('theme') ?? 'light')
document.body.classList.toggle("dark-mode", theme === "dark")
localStorage.setItem("theme", theme)
document.body.classList.toggle('dark-mode', theme === 'dark')
localStorage.setItem('theme', theme)
return (
<>
@ -158,6 +158,8 @@ const App = ({}) => {
setMode,
source,
setSource,
theme,
setTheme,
onClose: () => {
setShowMobileMenu(false)
},

@ -850,6 +850,7 @@ body {
justify-content: space-between;
border-bottom: 1px solid var(--border-500);
.logo {
display: flex;
align-items: center;
@ -860,6 +861,11 @@ body {
gap: 0.25rem;
}
.option-group {
display: flex;
gap: 0.5rem;
}
}
.options {

Loading…
Cancel
Save