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 { CompoundButton } from './CompoundButton.jsx'
import { Icon } from './Icon.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 ( return (
<div class="toolbar"> <div class="toolbar">
<div class="mobile"> <div class="mobile">
@ -52,6 +52,11 @@ export const Toolbar = ({ mode, setMode, source, setSource, onShowMenu, onHelp }
<Icon name="print" /> <Icon name="print" />
</button> </button>
</div> </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"> <div class="item option">
<button class="icon" onClick={onHelp}> <button class="icon" onClick={onHelp}>
<Icon name="question_mark" /> <Icon name="question_mark" />

12
src/main.jsx
Unescape Escape View File

@ -95,6 +95,16 @@ const App = ({}) => {
const [showMobileMenu, setShowMobileMenu] = useState(false) 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 ( return (
<> <>
<Toolbar <Toolbar
@ -105,6 +115,8 @@ const App = ({}) => {
setSource, setSource,
onShowMenu: () => setShowMobileMenu(true), onShowMenu: () => setShowMobileMenu(true),
onHelp: () => setHelpVisible(true), onHelp: () => setHelpVisible(true),
theme,
setTheme,
}} }}
/> />
<EventsView <EventsView

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

@ -14,31 +14,38 @@ html {
// Theme // Theme
:root { :root {
--gray-000: #ffffff; --bg-500: #ffffff;
--gray-100: #f8f8f8; --bg-selected-500: #f8f8f8;
--gray-300: #f0f0f0; --bg-highlight-500: #f0f0f0;
--gray-350: #e8e8e8; --border-400: #e8e8e8;
--gray-500: #d8d8d8; --border-500: #d8d8d8;
--gray-600: #c0c0c0; --border-600: #c0c0c0;
--gray-700: #b0b0b0; --border-highlight-500: #b0b0b0;
--gray-800: #909090; --border-selected-500: #909090;
--gray-900: #282828; --text-500: #282828;
// --accent-100: #e6ceff; --accent-500: #d6ffc2;
// --accent-400: #d0b8ef; --accent-100: #6cc16c;
// --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-900: #244624; --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 // Elements
@ -97,10 +104,10 @@ button,
gap: 0.25rem; gap: 0.25rem;
color: var(--gray-900); color: var(--text-500);
background: var(--gray-000); background: var(--bg-500);
border: 2px solid var(--gray-350); border: 2px solid var(--border-400);
border-radius: 0.5rem; border-radius: 0.5rem;
font: inherit; font: inherit;
@ -125,8 +132,8 @@ button,
} }
&.primary { &.primary {
background: var(--accent-100); background: var(--accent-500);
border-color: var(--accent-400); border-color: var(--accent-100);
&:hover::after { &:hover::after {
background: #00000020; background: #00000020;
@ -152,8 +159,8 @@ button,
height: 3rem; height: 3rem;
background: var(--gray-000); background: var(--bg-500);
border: 2px solid var(--gray-350); border: 2px solid var(--border-400);
border-radius: 0.5rem; border-radius: 0.5rem;
font-weight: 400; font-weight: 400;
@ -282,16 +289,16 @@ button,
border-top-right-radius: 0.5rem; border-top-right-radius: 0.5rem;
border-bottom-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem;
border: 2px solid var(--gray-350); border: 2px solid var(--border-400);
} }
&.radio { &.radio {
&.selected { &.selected {
background: var(--accent-100); background: var(--accent-500);
border-color: var(--accent-400); border-color: var(--accent-100);
& + .radio { & + .radio {
border-left-color: var(--accent-400); border-left-color: var(--accent-100);
} }
&:hover::after { &:hover::after {
@ -305,8 +312,8 @@ button,
// Extension Classes // Extension Classes
.panel { .panel {
background: var(--gray-000); background: var(--bg-500);
border: 1px solid var(--gray-500); border: 1px solid var(--border-500);
border-radius: 1rem; border-radius: 1rem;
padding: 1rem; padding: 1rem;
} }
@ -329,8 +336,8 @@ button,
// Structure // Structure
body { body {
background: var(--gray-000); background: var(--bg-500);
color: var(--gray-900); color: var(--text-500);
font-weight: 300; font-weight: 300;
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
@ -345,7 +352,7 @@ body {
border-radius: 0; border-radius: 0;
border: none; border: none;
border-bottom: 1px solid var(--gray-500); border-bottom: 1px solid var(--border-500);
height: 4rem; height: 4rem;
@ -415,7 +422,7 @@ body {
cursor: pointer; cursor: pointer;
&.selected { &.selected {
background: var(--gray-100); background: var(--bg-selected-500);
&::after { &::after {
content: ''; content: '';
@ -423,13 +430,13 @@ body {
inset: -1px; inset: -1px;
border-radius: 1rem; border-radius: 1rem;
border: 3px solid var(--gray-800); border: 3px solid var(--border-selected-500);
} }
} }
&.highlight { &.highlight {
background: var(--gray-300); background: var(--bg-highlight-500);
border-color: var(--gray-700); border-color: var(--border-highlight-500);
} }
.title { .title {
@ -474,15 +481,15 @@ body {
height: calc(var(--size) * var(--event-height) + (var(--size) - 1) * 0.25rem); height: calc(var(--size) * var(--event-height) + (var(--size) - 1) * 0.25rem);
border-top: 1px solid var(--gray-500); border-top: 1px solid var(--border-500);
border-right: 1px solid var(--gray-500); border-right: 1px solid var(--border-500);
padding: 0.5rem 1rem 0 0.5rem; padding: 0.5rem 1rem 0 0.5rem;
font-size: 18px; font-size: 18px;
font-weight: 400; font-weight: 400;
&:last-child { &: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-size: 18px;
font-weight: 400; font-weight: 400;
border-left: 1px solid var(--gray-500); border-left: 1px solid var(--border-500);
&:nth-child(2), &:nth-child(2),
&:nth-child(4) { &: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-row: var(--row) / span 1;
grid-column: var(--start) / span var(--size); grid-column: var(--start) / span var(--size);
// $color: hsl(var(--hue), 80%, 60%); $color: var(--bg-500);
$color: var(--gray-000);
background: $color; background: $color;
color: var(--gray-900); color: var(--text-500);
border-radius: 0.25rem; border-radius: 0.25rem;
border: 1px solid var(--gray-600); border: 1px solid var(--border-600);
display: flex; display: flex;
padding: 0.4rem; padding: 0.4rem;
@ -595,11 +601,11 @@ body {
z-index: 2; z-index: 2;
} }
border-top: 1px solid var(--gray-500); border-top: 1px solid var(--border-500);
padding: 0.25rem 0; padding: 0.25rem 0;
&:last-child { &:last-child {
border-bottom: 1px solid var(--gray-500); border-bottom: 1px solid var(--border-500);
} }
} }
} }
@ -630,10 +636,10 @@ body {
z-index: 2; z-index: 2;
background: var(--gray-000); background: var(--bg-500);
border-bottom: 1px solid var(--gray-500); border-bottom: 1px solid var(--border-500);
border-right: 1px solid var(--gray-500); border-right: 1px solid var(--border-500);
} }
.left-header { .left-header {
@ -645,9 +651,9 @@ body {
position: sticky; position: sticky;
left: 0; 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; z-index: 1;
@ -669,7 +675,7 @@ body {
font-size: 16px; font-size: 16px;
font-weight: 400; 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), @media screen and (max-width: $device-s-width) and (orientation: portrait),
screen and (max-height: $device-s-width) and (orientation: landscape) { screen and (max-height: $device-s-width) and (orientation: landscape) {
@ -678,7 +684,7 @@ body {
&:not(.skip-border) { &:not(.skip-border) {
height: calc(2 * (var(--event-height) + 1rem) + 1px); 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-size: 18px;
font-weight: 400; font-weight: 400;
background: var(--gray-000); background: var(--bg-500);
border-bottom: 1px solid var(--gray-500); border-bottom: 1px solid var(--border-500);
} }
&:not(:last-child) { &:not(:last-child) {
border-right: 1px solid var(--gray-500); border-right: 1px solid var(--border-500);
} }
.events { .events {
@ -733,9 +739,9 @@ body {
grid-row: var(--start) / span var(--size); grid-row: var(--start) / span var(--size);
grid-column: var(--stack) / span 1; 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: 4px solid hsl(var(--hue), 80%, 80%);
border-radius: 0.5rem; border-radius: 0.5rem;
@ -748,7 +754,7 @@ body {
padding: 0.5rem 1rem 0.5rem 0.5rem; padding: 0.5rem 1rem 0.5rem 0.5rem;
&.selected { &.selected {
background: var(--gray-100); background: var(--bg-selected-500);
&::after { &::after {
content: ''; content: '';
@ -756,13 +762,13 @@ body {
inset: -1px; inset: -1px;
border-radius: 0.5rem; border-radius: 0.5rem;
border: 3px solid var(--gray-800); border: 3px solid var(--border-selected-500);
} }
} }
&.highlight { &.highlight {
background: var(--gray-300); background: var(--bg-highlight-500);
border-color: var(--gray-700); border-color: var(--border-highlight-500);
} }
.title { .title {
@ -781,7 +787,7 @@ body {
grid-row: var(--track) / span 2; grid-row: var(--track) / span 2;
height: 0px; height: 0px;
border-bottom: 1px dashed var(--gray-500); border-bottom: 1px dashed var(--border-500);
align-self: center; align-self: center;
@ -830,7 +836,7 @@ body {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background: var(--gray-000); background: var(--bg-500);
z-index: 10; z-index: 10;
@ -843,7 +849,7 @@ body {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
border-bottom: 1px solid var(--gray-500); border-bottom: 1px solid var(--border-500);
.logo { .logo {
display: flex; display: flex;
align-items: center; align-items: center;
@ -878,7 +884,7 @@ body {
height: 1px; height: 1px;
left: 1rem; left: 1rem;
background: var(--gray-500); background: var(--border-500);
border: none; border: none;
} }

Write Preview
Loading…
Cancel
Save