wtg / shuttletracker

🚐 Shuttle tracking for RPI.
https://shuttles.rpi.edu
GNU Affero General Public License v3.0
46 stars 53 forks source link

Dark Theme [Old Part 1] #276

Closed Wolfizen closed 4 years ago

Wolfizen commented 4 years ago

What

This PR adds a dark theme to the main app. It is configurable via the settings page. This theme affects everything under App.vue, so no admin page dark mode.

How

Every color in the app stylesheet is replaced with a CSS variable reference. The master theme variables are switched to either light or dark upon the user changing the theme. theme.ts has a detailed documentation of this behavior. The map tiles are updated via a Vue watcher on current theme. I chose Carto's Dark Matter tiles for the dark theme.

codecov[bot] commented 4 years ago

Codecov Report

Merging #276 into master will not change coverage by %. The diff coverage is n/a.

Impacted file tree graph

@@           Coverage Diff           @@
##           master     #276   +/-   ##
=======================================
  Coverage   37.54%   37.54%           
=======================================
  Files          17       17           
  Lines        1561     1561           
=======================================
  Hits          586      586           
  Misses        911      911           
  Partials       64       64           

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 8180fe6...08e7f3d. Read the comment docs.

Wolfizen commented 4 years ago

@derekli2000 and I talked. I was concerned the bot comments should have been fixed before merging the PR. We decided that it was fine, no revert needed. Feature is complete :)