Add dark theme
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
import { CompoundButton } from './CompoundButton.jsx'
|
||||
import { Icon } from './Icon.jsx'
|
||||
|
||||
export const Toolbar = ({ mode, setMode, source, setSource, onShowMenu, onHelp }) => {
|
||||
export const Toolbar = ({ mode, setMode, source, setSource, onShowMenu, onHelp, theme, setTheme }) => {
|
||||
return (
|
||||
<div class="toolbar">
|
||||
<div class="mobile">
|
||||
@@ -52,6 +52,11 @@ export const Toolbar = ({ mode, setMode, source, setSource, onShowMenu, onHelp }
|
||||
<Icon name="print" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="item option">
|
||||
<button class="icon" onClick={() => setTheme(theme==="dark"?"light":"dark")}>
|
||||
<Icon name={theme==="dark"?"dark_mode":"light_mode"} />
|
||||
</button>
|
||||
</div>
|
||||
<div class="item option">
|
||||
<button class="icon" onClick={onHelp}>
|
||||
<Icon name="question_mark" />
|
||||
|
||||
@@ -95,6 +95,16 @@ const App = ({}) => {
|
||||
|
||||
const [showMobileMenu, setShowMobileMenu] = useState(false)
|
||||
|
||||
useEffect(async () => {
|
||||
const eventi = await loadEventi(CALENDAR_IDS[source])
|
||||
// window.dataBuffer[source] = eventi
|
||||
setEventi(eventi)
|
||||
}, [source])
|
||||
|
||||
const [theme, setTheme] = useState("light")
|
||||
|
||||
document.body.classList.toggle("dark-mode", theme === "dark")
|
||||
|
||||
return (
|
||||
<>
|
||||
<Toolbar
|
||||
@@ -105,6 +115,8 @@ const App = ({}) => {
|
||||
setSource,
|
||||
onShowMenu: () => setShowMobileMenu(true),
|
||||
onHelp: () => setHelpVisible(true),
|
||||
theme,
|
||||
setTheme,
|
||||
}}
|
||||
/>
|
||||
<EventsView
|
||||
|
||||
+78
-72
@@ -14,31 +14,38 @@ html {
|
||||
// Theme
|
||||
|
||||
:root {
|
||||
--gray-000: #ffffff;
|
||||
--gray-100: #f8f8f8;
|
||||
--gray-300: #f0f0f0;
|
||||
--gray-350: #e8e8e8;
|
||||
--gray-500: #d8d8d8;
|
||||
--gray-600: #c0c0c0;
|
||||
--gray-700: #b0b0b0;
|
||||
--gray-800: #909090;
|
||||
--gray-900: #282828;
|
||||
--bg-500: #ffffff;
|
||||
--bg-selected-500: #f8f8f8;
|
||||
--bg-highlight-500: #f0f0f0;
|
||||
--border-400: #e8e8e8;
|
||||
--border-500: #d8d8d8;
|
||||
--border-600: #c0c0c0;
|
||||
--border-highlight-500: #b0b0b0;
|
||||
--border-selected-500: #909090;
|
||||
--text-500: #282828;
|
||||
|
||||
// --accent-100: #e6ceff;
|
||||
// --accent-400: #d0b8ef;
|
||||
// --accent-500: #aa82db;
|
||||
|
||||
// --accent-100: hsl(221, 100%, 88%);
|
||||
// --accent-400: hsl(221, 75%, 78%);
|
||||
// --accent-500: hsl(221, 70%, 75%);
|
||||
|
||||
--accent-100: #d6ffc2;
|
||||
--accent-400: #6cc16c;
|
||||
--accent-500: #5aa05a;
|
||||
--accent-500: #d6ffc2;
|
||||
--accent-100: #6cc16c;
|
||||
--accent-900: #244624;
|
||||
}
|
||||
|
||||
$device-s-width: 500px;
|
||||
body.dark-mode {
|
||||
--bg-500: hsl(269, 24%, 18%);
|
||||
--bg-selected-500: #722da0;
|
||||
--bg-highlight-500: #a64edb;
|
||||
--border-400: hsl(269, 40%, 30%);
|
||||
--border-500: hsl(269, 40%, 40%);
|
||||
--border-600: #a66af6;
|
||||
--border-highlight-500: hsl(269, 80%, 78%);
|
||||
--border-selected-500: #b66af6;
|
||||
--text-500: #e6bdf6;
|
||||
|
||||
--accent-100: hsl(269, 44%, 24%);
|
||||
--accent-500: hsl(269, 50%, 60%);
|
||||
--accent-900: hsl(269, 20%, 80%);
|
||||
}
|
||||
|
||||
$device-s-width: 600px;
|
||||
|
||||
// Elements
|
||||
|
||||
@@ -97,10 +104,10 @@ button,
|
||||
|
||||
gap: 0.25rem;
|
||||
|
||||
color: var(--gray-900);
|
||||
color: var(--text-500);
|
||||
|
||||
background: var(--gray-000);
|
||||
border: 2px solid var(--gray-350);
|
||||
background: var(--bg-500);
|
||||
border: 2px solid var(--border-400);
|
||||
border-radius: 0.5rem;
|
||||
|
||||
font: inherit;
|
||||
@@ -125,8 +132,8 @@ button,
|
||||
}
|
||||
|
||||
&.primary {
|
||||
background: var(--accent-100);
|
||||
border-color: var(--accent-400);
|
||||
background: var(--accent-500);
|
||||
border-color: var(--accent-100);
|
||||
|
||||
&:hover::after {
|
||||
background: #00000020;
|
||||
@@ -152,8 +159,8 @@ button,
|
||||
|
||||
height: 3rem;
|
||||
|
||||
background: var(--gray-000);
|
||||
border: 2px solid var(--gray-350);
|
||||
background: var(--bg-500);
|
||||
border: 2px solid var(--border-400);
|
||||
border-radius: 0.5rem;
|
||||
|
||||
font-weight: 400;
|
||||
@@ -282,16 +289,16 @@ button,
|
||||
|
||||
border-top-right-radius: 0.5rem;
|
||||
border-bottom-right-radius: 0.5rem;
|
||||
border: 2px solid var(--gray-350);
|
||||
border: 2px solid var(--border-400);
|
||||
}
|
||||
|
||||
&.radio {
|
||||
&.selected {
|
||||
background: var(--accent-100);
|
||||
border-color: var(--accent-400);
|
||||
background: var(--accent-500);
|
||||
border-color: var(--accent-100);
|
||||
|
||||
& + .radio {
|
||||
border-left-color: var(--accent-400);
|
||||
border-left-color: var(--accent-100);
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
@@ -305,8 +312,8 @@ button,
|
||||
// Extension Classes
|
||||
|
||||
.panel {
|
||||
background: var(--gray-000);
|
||||
border: 1px solid var(--gray-500);
|
||||
background: var(--bg-500);
|
||||
border: 1px solid var(--border-500);
|
||||
border-radius: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
@@ -329,8 +336,8 @@ button,
|
||||
// Structure
|
||||
|
||||
body {
|
||||
background: var(--gray-000);
|
||||
color: var(--gray-900);
|
||||
background: var(--bg-500);
|
||||
color: var(--text-500);
|
||||
|
||||
font-weight: 300;
|
||||
font-family: 'Inter', sans-serif;
|
||||
@@ -345,7 +352,7 @@ body {
|
||||
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--gray-500);
|
||||
border-bottom: 1px solid var(--border-500);
|
||||
|
||||
height: 4rem;
|
||||
|
||||
@@ -415,7 +422,7 @@ body {
|
||||
cursor: pointer;
|
||||
|
||||
&.selected {
|
||||
background: var(--gray-100);
|
||||
background: var(--bg-selected-500);
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
@@ -423,13 +430,13 @@ body {
|
||||
inset: -1px;
|
||||
border-radius: 1rem;
|
||||
|
||||
border: 3px solid var(--gray-800);
|
||||
border: 3px solid var(--border-selected-500);
|
||||
}
|
||||
}
|
||||
|
||||
&.highlight {
|
||||
background: var(--gray-300);
|
||||
border-color: var(--gray-700);
|
||||
background: var(--bg-highlight-500);
|
||||
border-color: var(--border-highlight-500);
|
||||
}
|
||||
|
||||
.title {
|
||||
@@ -474,15 +481,15 @@ body {
|
||||
|
||||
height: calc(var(--size) * var(--event-height) + (var(--size) - 1) * 0.25rem);
|
||||
|
||||
border-top: 1px solid var(--gray-500);
|
||||
border-right: 1px solid var(--gray-500);
|
||||
border-top: 1px solid var(--border-500);
|
||||
border-right: 1px solid var(--border-500);
|
||||
padding: 0.5rem 1rem 0 0.5rem;
|
||||
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 1px solid var(--gray-500);
|
||||
border-bottom: 1px solid var(--border-500);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -515,11 +522,11 @@ body {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
|
||||
border-left: 1px solid var(--gray-500);
|
||||
border-left: 1px solid var(--border-500);
|
||||
|
||||
&:nth-child(2),
|
||||
&:nth-child(4) {
|
||||
border-right: 1px solid var(--gray-500);
|
||||
border-right: 1px solid var(--border-500);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -547,15 +554,14 @@ body {
|
||||
grid-row: var(--row) / span 1;
|
||||
grid-column: var(--start) / span var(--size);
|
||||
|
||||
// $color: hsl(var(--hue), 80%, 60%);
|
||||
$color: var(--gray-000);
|
||||
$color: var(--bg-500);
|
||||
|
||||
background: $color;
|
||||
color: var(--gray-900);
|
||||
color: var(--text-500);
|
||||
|
||||
border-radius: 0.25rem;
|
||||
|
||||
border: 1px solid var(--gray-600);
|
||||
border: 1px solid var(--border-600);
|
||||
|
||||
display: flex;
|
||||
padding: 0.4rem;
|
||||
@@ -595,11 +601,11 @@ body {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
border-top: 1px solid var(--gray-500);
|
||||
border-top: 1px solid var(--border-500);
|
||||
padding: 0.25rem 0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 1px solid var(--gray-500);
|
||||
border-bottom: 1px solid var(--border-500);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -630,10 +636,10 @@ body {
|
||||
|
||||
z-index: 2;
|
||||
|
||||
background: var(--gray-000);
|
||||
background: var(--bg-500);
|
||||
|
||||
border-bottom: 1px solid var(--gray-500);
|
||||
border-right: 1px solid var(--gray-500);
|
||||
border-bottom: 1px solid var(--border-500);
|
||||
border-right: 1px solid var(--border-500);
|
||||
}
|
||||
|
||||
.left-header {
|
||||
@@ -645,9 +651,9 @@ body {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
|
||||
border-right: 1px solid var(--gray-500);
|
||||
border-right: 1px solid var(--border-500);
|
||||
|
||||
background: var(--gray-000);
|
||||
background: var(--bg-500);
|
||||
|
||||
z-index: 1;
|
||||
|
||||
@@ -669,7 +675,7 @@ body {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
|
||||
border-top: 1px solid var(--gray-500);
|
||||
border-top: 1px solid var(--border-500);
|
||||
|
||||
@media screen and (max-width: $device-s-width) and (orientation: portrait),
|
||||
screen and (max-height: $device-s-width) and (orientation: landscape) {
|
||||
@@ -678,7 +684,7 @@ body {
|
||||
|
||||
&:not(.skip-border) {
|
||||
height: calc(2 * (var(--event-height) + 1rem) + 1px);
|
||||
border-bottom: 1px solid var(--gray-500);
|
||||
border-bottom: 1px solid var(--border-500);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -708,12 +714,12 @@ body {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
|
||||
background: var(--gray-000);
|
||||
border-bottom: 1px solid var(--gray-500);
|
||||
background: var(--bg-500);
|
||||
border-bottom: 1px solid var(--border-500);
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-right: 1px solid var(--gray-500);
|
||||
border-right: 1px solid var(--border-500);
|
||||
}
|
||||
|
||||
.events {
|
||||
@@ -733,9 +739,9 @@ body {
|
||||
grid-row: var(--start) / span var(--size);
|
||||
grid-column: var(--stack) / span 1;
|
||||
|
||||
background: var(--gray-000);
|
||||
background: var(--bg-500);
|
||||
|
||||
border: 1px solid var(--gray-600);
|
||||
border: 1px solid var(--border-600);
|
||||
// border: 4px solid hsl(var(--hue), 80%, 80%);
|
||||
|
||||
border-radius: 0.5rem;
|
||||
@@ -748,7 +754,7 @@ body {
|
||||
padding: 0.5rem 1rem 0.5rem 0.5rem;
|
||||
|
||||
&.selected {
|
||||
background: var(--gray-100);
|
||||
background: var(--bg-selected-500);
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
@@ -756,13 +762,13 @@ body {
|
||||
inset: -1px;
|
||||
border-radius: 0.5rem;
|
||||
|
||||
border: 3px solid var(--gray-800);
|
||||
border: 3px solid var(--border-selected-500);
|
||||
}
|
||||
}
|
||||
|
||||
&.highlight {
|
||||
background: var(--gray-300);
|
||||
border-color: var(--gray-700);
|
||||
background: var(--bg-highlight-500);
|
||||
border-color: var(--border-highlight-500);
|
||||
}
|
||||
|
||||
.title {
|
||||
@@ -781,7 +787,7 @@ body {
|
||||
grid-row: var(--track) / span 2;
|
||||
|
||||
height: 0px;
|
||||
border-bottom: 1px dashed var(--gray-500);
|
||||
border-bottom: 1px dashed var(--border-500);
|
||||
|
||||
align-self: center;
|
||||
|
||||
@@ -830,7 +836,7 @@ body {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
background: var(--gray-000);
|
||||
background: var(--bg-500);
|
||||
|
||||
z-index: 10;
|
||||
|
||||
@@ -843,7 +849,7 @@ body {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
border-bottom: 1px solid var(--gray-500);
|
||||
border-bottom: 1px solid var(--border-500);
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -878,7 +884,7 @@ body {
|
||||
height: 1px;
|
||||
left: 1rem;
|
||||
|
||||
background: var(--gray-500);
|
||||
background: var(--border-500);
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user