diff --git a/client/index.html b/client/index.html index 9523cab..5f88912 100644 --- a/client/index.html +++ b/client/index.html @@ -43,11 +43,6 @@ - - - - - @@ -207,14 +202,10 @@ - - - - diff --git a/client/scripts/theme.js b/client/scripts/theme.js deleted file mode 100644 index e452ffb..0000000 --- a/client/scripts/theme.js +++ /dev/null @@ -1,37 +0,0 @@ -(function(){ - - // Select the button - const btnTheme = document.getElementById('theme'); - // Check for dark mode preference at the OS level - const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)'); - - // Get the user's theme preference from local storage, if it's available - const currentTheme = localStorage.getItem('theme'); - // If the user's preference in localStorage is dark... - if (currentTheme == 'dark') { - // ...let's toggle the .dark-theme class on the body - document.body.classList.toggle('dark-theme'); - // Otherwise, if the user's preference in localStorage is light... - } else if (currentTheme == 'light') { - // ...let's toggle the .light-theme class on the body - document.body.classList.toggle('light-theme'); - } - - // Listen for a click on the button - btnTheme.addEventListener('click', function() { - // If the user's OS setting is dark and matches our .dark-theme class... - if (prefersDarkScheme.matches) { - // ...then toggle the light mode class - document.body.classList.toggle('light-theme'); - // ...but use .dark-theme if the .light-theme class is already on the body, - var theme = document.body.classList.contains('light-theme') ? 'light' : 'dark'; - } else { - // Otherwise, let's do the same thing, but for .dark-theme - document.body.classList.toggle('dark-theme'); - var theme = document.body.classList.contains('dark-theme') ? 'dark' : 'light'; - } - // Finally, let's save the current preference to localStorage to keep using it - localStorage.setItem('theme', theme); - }); - -})(); \ No newline at end of file diff --git a/client/scripts/ui.js b/client/scripts/ui.js index 426bbc9..0c740b0 100644 --- a/client/scripts/ui.js +++ b/client/scripts/ui.js @@ -596,7 +596,7 @@ Events.on('load', () => { function drawCircle(radius) { ctx.beginPath(); - let color = Math.round(255 * (1 - radius / Math.max(w, h))); + let color = Math.round(197 * (1 - radius / Math.max(w, h))); ctx.strokeStyle = 'rgba(' + color + ',' + color + ',' + color + ',0.1)'; ctx.arc(x0, y0, radius, 0, 2 * Math.PI); ctx.stroke(); diff --git a/client/service-worker.js b/client/service-worker.js index 9dae080..f20e895 100644 --- a/client/service-worker.js +++ b/client/service-worker.js @@ -6,7 +6,6 @@ var urlsToCache = [ 'scripts/network.js', 'scripts/ui.js', 'scripts/clipboard.js', - 'scripts/theme.js', 'sounds/blop.mp3', 'images/favicon-96x96.png' ]; diff --git a/client/styles.css b/client/styles.css index 0a9aca9..3848a0f 100644 --- a/client/styles.css +++ b/client/styles.css @@ -4,7 +4,9 @@ --icon-size: 24px; --primary-color: #4285f4; --peer-width: 120px; - color-scheme: light dark; + --text-color: #333; + --bg-color: #fafafa; + --bg-color-secondary: #f1f3f4; } /* Layout */ @@ -691,17 +693,10 @@ screen and (min-width: 1100px) { /* Default colors */ body { --text-color: #333; - --bg-color: #fff; + --bg-color: #fafafa; --bg-color-secondary: #f1f3f4; } -/* Dark theme colors */ -body.dark-theme { - --text-color: #eee; - --bg-color: #121212; - --bg-color-secondary: #333; -} - /* Colored Elements */ body { color: var(--text-color); @@ -724,26 +719,6 @@ x-dialog x-paper { display: block; } - -/* Styles for users who prefer dark mode at the OS level */ -@media (prefers-color-scheme: dark) { - - /* defaults to dark theme */ - body { - --text-color: #eee; - --bg-color: #121212; - --bg-color-secondary: #333; - } - - /* Override dark mode with light mode styles if the user decides to swap */ - body.light-theme { - --text-color: #333; - --bg-color: #fafafa; - --bg-color-secondary: #f1f3f4; - } -} - - /* Edge specific styles */