Fran314
/
orario
forked from phc/orario
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add dark theme

Browse Source
compressed-week-view
Francesco Minnocci 2 years ago
parent 71e4e42ed2
commit 03ca03debc
Signed by untrusted user: BachoSeven
GPG Key ID: 2BE4AB7FDAD828A4
3 changed files with 97 additions and 74 deletions
Show Stats Download Patch File Download Diff File

7
src/components/Toolbar.jsx
Unescape Escape View File

@ -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" />

12
src/main.jsx
Unescape Escape View File

@ -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

152
src/styles/main.scss
Unescape Escape View File

@ -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;
// --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;
--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-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;
}

Write Preview
Loading…
Cancel
Save