jcreek/EstimationPoker
1
0
Fork 0
mirror of https://github.com/jcreek/EstimationPoker.git synced 2026-07-13 02:53:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #20 from jcreek/2-add-a-dark-mode

Browse Source 
feat(#2): Add a dark mode
This commit is contained in:
Josh Creek
2023-07-30 18:20:38 +01:00
committed by GitHub
parent 65ba5304ba fb42eca8f9
commit 5032e1939b
4 changed files with 83 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.html
+40 -5
View File
@@ -19,8 +19,46 @@
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<title>Estimation Poker</title> <title>Estimation Poker</title>
%sveltekit.head% %sveltekit.head%
<style>
:root {
--background-color: #fff;
--opposite-background-color: #333;
--text-color: #333;
--text-link-color: #423e37;
--text-hover-color: #81796c;
}
[data-theme='dark'] {
--background-color: #333;
--opposite-background-color: #fff;
--text-color: #fff;
--text-link-color: #fff;
--text-hover-color: #a8a8a8;
}
body {
background-color: var(--background-color);
color: var(--text-color);
}
.footer-container a {
color: var(--text-link-color);
}
.footer-container a:hover {
color: var(--text-hover-color);
}
#themeToggleButton {
background-color: var(--opposite-background-color);
}
</style>
</head> </head>
<body data-sveltekit-preload-data="hover" style="margin: 0; font-family: Arial, sans-serif"> <body
data-sveltekit-preload-data="hover"
style="margin: 0; font-family: Arial, sans-serif"
onload="document.body.setAttribute('data-theme', localStorage.getItem('theme') || 'light')"
>
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>
<script> <script>
@@ -63,10 +101,7 @@
if ('serviceWorker' in navigator) { if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('%sveltekit.assets%/service-worker.js').then( navigator.serviceWorker.register('%sveltekit.assets%/service-worker.js').then(
function (registration) { function (registration) {
console.log( console.log('ServiceWorker registration successful with scope: ', registration.scope);
'ServiceWorker registration successful with scope: ',
registration.scope
);
}, },
function (err) { function (err) {
console.log('ServiceWorker registration failed: ', err); console.log('ServiceWorker registration failed: ', err);
src/components/EstimateGroupsList.svelte
+4
View File
@@ -70,4 +70,8 @@
display: inline; display: inline;
margin-right: 5px; margin-right: 5px;
} }
#estimate-groups-list {
color: #333;
}
</style> </style>
src/components/Modal.svelte
+4
View File
@@ -141,4 +141,8 @@
h2 { h2 {
margin-bottom: 0px; margin-bottom: 0px;
} }
.modal {
color: #333;
}
</style> </style>
src/routes/+layout.svelte
+35 -10
View File
@@ -1,3 +1,23 @@
<script>
let theme = 'light';
if (typeof localStorage !== 'undefined') {
theme = localStorage.getItem('theme');
}
function toggleTheme() {
const html = document.querySelector('body');
theme = html.getAttribute('data-theme') === 'light' ? 'dark' : 'light';
html.setAttribute('data-theme', theme);
if (typeof localStorage !== 'undefined') {
localStorage.setItem('theme', theme);
}
}
</script>
<button id="themeToggleButton" on:click={toggleTheme}>
<emoji>{theme === 'light' ? '🌙' : '☀️'}</emoji>
</button>
<header class="topbar-container"> <header class="topbar-container">
<div class="topbar-items"><h1><a href="/">Estimation Poker</a></h1></div> <div class="topbar-items"><h1><a href="/">Estimation Poker</a></h1></div>
<p id="install-app-btn-container" class="topbar-items"> <p id="install-app-btn-container" class="topbar-items">
@@ -19,6 +39,21 @@
</footer> </footer>
<style> <style>
#themeToggleButton {
position: fixed;
top: 7px;
left: 7px;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
padding: 0;
border: none;
outline: none;
}
#main-container { #main-container {
margin: 0 auto; margin: 0 auto;
max-width: 100%; /* Allow the element to grow wider than its parent */ max-width: 100%; /* Allow the element to grow wider than its parent */
@@ -98,9 +133,7 @@
bottom: 0; bottom: 0;
width: 100%; width: 100%;
text-align: center; text-align: center;
color: #423e37;
padding-bottom: 10px; padding-bottom: 10px;
background-color: white;
} }
.footer-container hr { .footer-container hr {
@@ -110,14 +143,6 @@
margin-right: auto; margin-right: auto;
} }
.footer-container a {
color: #423e37;
}
.footer-container a:hover {
color: #81796c;
}
.button { .button {
appearance: none; appearance: none;
border: 1px solid rgba(27, 31, 35, 0.15); border: 1px solid rgba(27, 31, 35, 0.15);