feat: Dark mode!

simwrapper · Oct 24, 2020 · 0556c2c · 0556c2c
1 parent 161897f
commit 0556c2c
Show file tree

Hide file tree

Showing 8 changed files with 162 additions and 74 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,5 +1,6 @@
 <template lang="pug">
-#app(:class=" {'full-page-app' : state.isFullScreen}" )
+#app(:class="{'full-page-app' : state.isFullScreen, 'dark-mode': isDarkMode}" )
+
   #nav
     .breadcrumbs-bar(v-if="state.breadcrumbs.length > 0"
                      :style="{paddingLeft: state.isFullScreen ? '0.75rem':''}")
@@ -12,9 +13,16 @@
             @click.meta="openNewTab(crumb.url)"
             )
               p {{ i === 0 ? 'aftersim' : crumb.label }}
+
+    .locale(@click="toggleTheme")
+      i.fa.fa-1x.fa-adjust
+      br
+      span {{ $t(state.colorScheme) }}
+
     .locale(@click="toggleLocale")
       i.fa.fa-1x.fa-globe
-      | {{ state.locale.toUpperCase() }}
+      br
+      span {{ state.locale }}
 
   .center-area.nav-padding
     login-panel.login-panel
@@ -33,13 +41,23 @@
     p EU GDPR: No personal information collected or transmitted.
 </template>
 
+<i18n>
+en:
+  light: 'light'
+  dark: 'dark'
+de:
+  light: 'hell'
+  dark: 'dark'
+</i18n>
+
 <script lang="ts">
 import mapboxgl from 'mapbox-gl'
 import Buefy from 'buefy'
 import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
 
 import store from '@/store'
 
+import { ColorScheme } from '@/Globals'
 import Colophon from '@/components/Colophon.vue'
 import LoginPanel from '@/components/LoginPanel.vue'
 import SideNavBar from '@/components/SideNavBar.vue'
@@ -67,7 +85,15 @@ class App extends Vue {
   private toggleLocale() {
     const newLocale = this.state.locale === 'en' ? 'de' : 'en'
     this.$store.commit('setLocale', newLocale)
-    this.$i18n.locale = newLocale
+    this.$root.$i18n.locale = newLocale
+  }
+
+  private toggleTheme() {
+    this.$store.commit('rotateColors')
+  }
+
+  private get isDarkMode() {
+    return this.state.colorScheme == ColorScheme.DarkMode
   }
 
   @Watch('state.isFullScreen') toggleFullScreen(isFullPage: boolean) {
@@ -108,6 +134,7 @@ html {
 
 html {
   overflow-y: auto;
+  color: var(--text);
   background-color: $steelGray;
 }
 
@@ -162,7 +189,8 @@ h3 {
 
 #app {
   display: grid;
-  background-color: $paleBackground;
+  color: var(--text);
+  background-color: var(--bg);
   font-family: Roboto, Avenir, Helvetica, Arial, sans-serif;
   grid-template-columns: 1fr;
   grid-template-rows: auto 1fr auto;
@@ -174,6 +202,13 @@ h3 {
   -moz-osx-font-smoothing: grayscale;
 }
 
+a {
+  color: var(--link);
+}
+a:hover {
+  color: var(--linkHover);
+}
+
 .full-page-app {
   height: 100%;
 }
@@ -235,12 +270,11 @@ h3 {
   margin: 2rem 0 0 0;
   padding: 1rem 1rem;
   color: #ccc;
-  background-color: $colorBoldBackground;
 }
 
 #app .footer {
-  color: #222;
-  background-color: white;
+  color: var(--text);
+  background-color: var(--bgBold);
   text-align: center;
   padding: 2rem 0.5rem 3rem 0.5rem;
   // background-color: #648cb4;
@@ -288,6 +322,8 @@ h3 {
 }
 
 .locale {
+  -moz-user-select: none;
+  -webkit-user-select: none;
   font-size: 0.7rem;
   background-color: $steelGray;
   color: #ccc;
@@ -304,6 +340,11 @@ h3 {
   color: #ffe;
 }
 
+.locale:active {
+  border: 1px solid #aaa;
+  transform: translateY(1px);
+}
+
 @media only screen and (max-width: 640px) {
   .breadcrumbs-bar {
     padding-left: 1rem;

diff --git a/src/components/SVNProjects.vue b/src/components/SVNProjects.vue
@@ -49,16 +49,20 @@ export default class VueComponent extends Vue {
   cursor: pointer;
   display: flex;
   flex-direction: column;
-  background-color: white;
+  background-color: var(--bgBold);
   margin: 0.25rem 2rem 0.25rem 0rem;
 }
 
+h3 {
+  color: var(--text);
+}
+
 .project .desc {
   padding: 1rem 1rem;
 }
 
 .project:hover {
-  background-color: #ffd;
+  background-color: var(--bgHover);
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05), 0 3px 10px 0 rgba(0, 0, 0, 0.05);
 }
 

diff --git a/src/plugins/image/ImageView.vue b/src/plugins/image/ImageView.vue
@@ -1,6 +1,8 @@
 <template lang="pug">
 #container(v-if="myState.yamlConfig")
-  img.medium-zoom(:src="myState.imageData")
+  img.medium-zoom(
+    :src="myState.imageData"
+    :class="{'invert-colors' : isDarkMode }")
 </template>
 
 <script lang="ts">
@@ -11,7 +13,7 @@ import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
 import readBlob from 'read-blob'
 
 import globalStore from '@/store.ts'
-import { FileSystem, VisualizationPlugin } from '../../Globals'
+import { ColorScheme, FileSystem, VisualizationPlugin } from '../../Globals'
 import HTTPFileSystem from '@/util/HTTPFileSystem'
 
 @Component({ components: {} })
@@ -48,6 +50,10 @@ class MyComponent extends Vue {
     'traveldistancestatstrips.png': 'Trip travel distance',
   }
 
+  private get isDarkMode() {
+    return this.globalState.colorScheme == ColorScheme.DarkMode
+  }
+
   public mounted() {
     if (!this.yamlConfig) {
       this.buildRouteFromUrl()
@@ -138,4 +144,8 @@ export default MyComponent
 .medium-zoom {
   padding: 0.25rem 0.25rem;
 }
+
+.invert-colors {
+  filter: invert(100%);
+}
 </style>
diff --git a/src/store.ts b/src/store.ts
@@ -20,11 +20,13 @@ export default new Vuex.Store({
 
     colorScheme: localStorage.getItem('colorscheme')
       ? localStorage.getItem('colorscheme')
-      : ColorScheme.DarkMode,
+      : (window.matchMedia && window.matchMedia('(prefers-color-scheme:dark)')).matches
+      ? ColorScheme.DarkMode
+      : ColorScheme.LightMode,
 
     // locale: we only support EN and DE
     locale: localStorage.getItem('locale')
-      ? localStorage.getItem('locale')
+      ? '' + localStorage.getItem('locale')
       : // @ts-ignore
       (navigator.language || navigator.userLanguage).startsWith('de')
       ? 'de'
@@ -57,6 +59,7 @@ export default new Vuex.Store({
       state.colorScheme =
         state.colorScheme === ColorScheme.DarkMode ? ColorScheme.LightMode : ColorScheme.DarkMode
       localStorage.setItem('colorscheme', state.colorScheme)
+      console.log('NEW COLORS:', state.colorScheme)
     },
     setLocale(state, value: string) {
       state.locale = value.toLocaleLowerCase()

diff --git a/src/styles.scss b/src/styles.scss
@@ -8,9 +8,31 @@ $themeColorPaler: #b9c9df;
 $colorBoldBackground: $steelGray;
 $colorPurple: #7957d5;
 $paleBackground: #dbd9d7;
-$darkBackground: #181518;
+$darkBackground: #181a1b;
 
 $navHeight: 3.25rem;
 $bannerHighlight: #1d3355;
 $sizeMobile: 30em;
-/// $themeColor: #3498db;
+
+:root {
+  --bg: #dbd9d7;
+  --bgBold: #ffffff;
+  --bgHover: #ffd;
+  --text: #363636;
+  --textFancy: #1d3355;
+  --link: #1c5179;
+  --linkHover: #0b263b;
+
+  --beige: #ffeead;
+  --yellow: #ffcc5c;
+}
+
+.dark-mode {
+  --bg: #2d3133;
+  --bgBold: #181a1b;
+  --bgHover: #4d4c37;
+  --text: #c6c1b9;
+  --textFancy: #a5c4e2;
+  --link: #65d68f;
+  --linkHover: #a8ffc8;
+}
diff --git a/src/svnConfig.ts b/src/svnConfig.ts
@@ -1,13 +1,13 @@
 const config: any = {
   projects: [
-    {
-      name: 'Public-SVN',
-      url: 'public-svn',
-      description: 'Simulation results from around the world (by country)',
-      svn: 'https://svn.vsp.tu-berlin.de/repos/public-svn/matsim/scenarios/countries',
-      need_password: false,
-      thumbnail: '/thumbnail.png',
-    },
+    // {
+    //   name: 'Public-SVN',
+    //   url: 'public-svn',
+    //   description: 'Simulation results from around the world (by country)',
+    //   svn: 'https://svn.vsp.tu-berlin.de/repos/public-svn/matsim/scenarios/countries',
+    //   need_password: false,
+    //   thumbnail: '/thumbnail.png',
+    // },
     {
       name: 'Gladbeck',
       url: 'gladbeck',
@@ -20,19 +20,19 @@ const config: any = {
     {
       name: 'Local Files',
       url: 'local',
-      description: 'Use scripts/serve.py to browse local files on your PC',
+      description: 'Run scripts/serve.py to browse local files on your PC',
       svn: 'http://localhost:8000/data',
       need_password: false,
       thumbnail: '/thumb-localfiles.png',
     },
-    {
-      name: 'ils4 Math Cluster',
-      url: 'ils4',
-      description: 'Mount cluster files using sshfs',
-      svn: 'http://localhost:8000/cluster',
-      need_password: false,
-      thumbnail: '/thumb-cluster.png',
-    },
+    // {
+    //   name: 'ils4 Math Cluster',
+    //   url: 'ils4',
+    //   description: 'Mount cluster files using sshfs',
+    //   svn: 'http://localhost:8000/cluster',
+    //   need_password: false,
+    //   thumbnail: '/thumb-cluster.png',
+    // },
     // {
     //   name: 'Apache (Local)',
     //   url: 'apache',