Added dark mode

app/imports/api/schema.js

@@ -15,4 +15,4 @@ function getDefaultSchema(){
 
 export default function schema(options){
   return getDefaultSchema().extend(options);
-}
+};

app/imports/api/users/Users.js

@@ -1,19 +1,11 @@
-Schemas.UserProfile = schema({
-	username: {
-		type: String,
-		optional: true,
-	},
-});
+import SimpleSchema from 'simpl-schema';
+import schema from '/imports/api/schema.js';
 
-Schemas.User = schema({
+const userSchema = schema({
 	username: {
 		type: String,
 		optional: true,
 	},
-	profile: {
-		type: Schemas.UserProfile,
-		optional: true,
-	},
 	emails: {
 		type: Array,
 		optional: true,
@@ -44,11 +36,6 @@ Schemas.User = schema({
 		optional: true,
 		blackbox: true,
 	},
-	roles: {
-		type: Object,
-		optional: true,
-		blackbox: true,
-	},
 	roles: {
 		type: Array,
 		optional: true,
@@ -66,11 +53,15 @@ Schemas.User = schema({
 		index: 1,
 		optional: true,
 	},
+	darkMode: {
+		type: Boolean,
+		optional: true,
+	},
 });
 
-Meteor.users.attachSchema(Schemas.User);
+Meteor.users.attachSchema(userSchema);
 
-Meteor.users.gnerateApiKey = new ValidatedMethod({
+Meteor.users.generateApiKey = new ValidatedMethod({
   name: "Users.methods.generateApiKey",
 	validate: null,
   run(){
@@ -83,6 +74,17 @@ Meteor.users.gnerateApiKey = new ValidatedMethod({
 	},
 });
 
+Meteor.users.setDarkMode = new ValidatedMethod({
+  name: "Users.methods.setDarkMode",
+	validate: new SimpleSchema({
+    darkMode: { type: Boolean },
+  }).validator(),
+  run({darkMode}){
+		if (!this.userId) return;
+		Meteor.users.update(this.userId, {$set: {darkMode}});
+	},
+});
+
 Meteor.users.sendVerificationEmail = new ValidatedMethod({
 	name: "Users.methods.sendVerificationEmail",
 	validate: schema({

app/imports/server/publications/index.js

@@ -1,6 +1,5 @@
 import './characterList.js';
 import './library.js';
 import './singleCharacter.js';
-import './user.js';
 import './users.js';
 import './icons.js';

app/imports/server/publications/user.js

@@ -1,8 +0,0 @@
-Meteor.publish("user", function(){
-	return Meteor.users.find(this.userId, {fields: {
-		roles: 1,
-		username: 1,
-		profile: 1,
-		apiKey: 1,
-	}});
-});

app/imports/server/publications/users.js

@@ -1,3 +1,14 @@
+import '/imports/api/users/Users.js';
+
+Meteor.publish("user", function(){
+	return Meteor.users.find(this.userId, {fields: {
+		roles: 1,
+		username: 1,
+		apiKey: 1,
+		darkMode: 1,
+	}});
+});
+
 Meteor.publish("userNames", function(ids){
 	if (!this.userId || !ids) return [];
 	return Meteor.users.find(

app/imports/ui/StoryBook.vue

@@ -12,6 +12,7 @@
 		<v-navigation-drawer right app v-model="sidebar">
 			<v-toolbar color="secondary" dark>
 				Components
+				<v-switch :value="darkMode" @change="setDarkMode" label="Dark mode"/>
 			</v-toolbar>
 			<v-list>
 	      <v-list-tile
@@ -77,6 +78,17 @@
 				return component && component.dontWrap;
 			},
 		},
+		methods: {
+			setDarkMode(value){
+				Meteor.users.setDarkMode.call({darkMode: !!value});
+			},
+		},
+		meteor: {
+			darkMode(){
+				let user = Meteor.user();
+				return user && user.darkMode;
+			},
+		},
 	};
 </script>
 

app/imports/ui/character/CharacterSheet.vue

@@ -41,7 +41,7 @@
 	import Creatures from '/imports/api/creature/Creatures.js';
 	import isDarkColor from '/imports/ui/utility/isDarkColor.js';
 	import { mapMutations } from "vuex";
-	import theme from '/imports/ui/theme.js';
+	import { theme } from '/imports/ui/theme.js';
 	import StatsTab from '/imports/ui/character/StatsTab.vue';
 	import CharacterTreeView from '/imports/ui/character/CharacterTreeView.vue';
 	import { recomputeCreature } from '/imports/api/creature/creatureComputation.js'

app/imports/ui/components/AttributeEdit.vue

@@ -26,7 +26,6 @@
 		/>
 		<smart-select
 			label="Type"
-			color="accent"
 			:items="attributeTypes"
 			:value="attribute.type"
 			:menu-props="{auto: true, lazy: true}"
@@ -39,7 +38,6 @@
 		/>
 		<smart-select
 			label="Reset"
-			color="accent"
 			append-icon="arrow_drop_down"
 			clearable
 			:items="resetOptions"

app/imports/ui/layouts/AppLayout.vue

@@ -1,7 +1,7 @@
 <template>
-  <v-app light>
+  <v-app :dark="darkMode" :light="!darkMode">
     <v-navigation-drawer app v-model="drawer">
-      <Sidebar></Sidebar>
+      <Sidebar/>
     </v-navigation-drawer>
     <router-view></router-view>
     <dialog-stack></dialog-stack>
@@ -9,8 +9,10 @@
 </template>
 
 <script>
+	import '/imports/api/users/Users.js';
   import Sidebar from "/imports/ui/components/Sidebar.vue";
-  import DialogStack from "/imports/ui/dialogStack/DialogStack.vue"
+  import DialogStack from "/imports/ui/dialogStack/DialogStack.vue";
+	import { theme, darkTheme } from '/imports/ui/theme.js';
   export default {
     computed: {
       drawer: {
@@ -20,12 +22,32 @@
         set (value) {
           this.$store.commit('setDrawer', value);
         },
-      }
+      },
     },
     components: {
       Sidebar,
       DialogStack,
     },
+		meteor: {
+			$subscribe: {
+				'user': [],
+			},
+			darkMode(){
+				let user = Meteor.user();
+				return user && user.darkMode;
+			},
+		},
+		watch: {
+			darkMode: {
+				immediate: true,
+				handler(newDarkModeValue){
+					let newTheme = newDarkModeValue ? darkTheme : theme;
+					for (let key in newTheme){
+						this.$vuetify.theme[key] = newTheme[key];
+					}
+				},
+			},
+		},
   };
 </script>
 

app/imports/ui/theme.js

@@ -1,11 +1,21 @@
 const theme = {
   primary: "#B71C1C",
   secondary: "#424242",
-  accent: "#B71C1C",
-  error: "#f44336",
+  accent: "#f44336",
+  error: "#FF6D00",
   warning: "#FFB300",
   info: "#5C6BC0",
   success: "#43A047",
 };
 
-export default theme;
+const darkTheme = {
+  primary: "#f44336",
+  secondary: "#424242",
+  accent: "#B71C1C",
+  error: "#FF6D00",
+  warning: "#FFB300",
+  info: "#5C6BC0",
+  success: "#43A047",
+};
+
+export {theme, darkTheme};

app/imports/ui/vueSetup.js

@@ -5,7 +5,7 @@ import store from "/imports/ui/vuexStore.js";
 import VueMeteorTracker from 'vue-meteor-tracker';
 import AppLayout from '/imports/ui/layouts/AppLayout.vue';
 import router from "/imports/ui/router.js";
-import theme from '/imports/ui/theme.js';
+import { theme } from '/imports/ui/theme.js';
 import "vuetify/dist/vuetify.min.css";
 import '/imports/ui/components/global/globalIndex.js';
 

app/imports/ui/vuexStore.js

@@ -10,6 +10,7 @@ const store = new Vuex.Store({
   },
   state: {
     drawer: undefined,
+    darkMode: false,
   },
   mutations: {
     toggleDrawer (state) {
@@ -18,6 +19,9 @@ const store = new Vuex.Store({
     setDrawer(state, value){
       state.drawer = value;
     },
+    setDarkMode(state, value){
+      state.darkMode = value;
+    },
   },
 });