light/dark mode and other new features from DTP Sites

app/controllers/user.js

@@ -226,12 +226,7 @@ class UserController extends SiteController {
 
       await userService.updateSettings(req.user, req.body);
 
-      displayList.showNotification(
+      displayList.reload();
-        'Member account settings updated successfully.',
-        'success',
-        'bottom-center',
-        6000,
-      );
       res.status(200).json({ success: true, displayList });
     } catch (error) {
       this.log.error('failed to update account settings', { error });

app/models/user.js

@@ -10,6 +10,8 @@ const Schema = mongoose.Schema;
 
 const { ResourceStats, ResourceStatsDefaults } = require('./lib/resource-stats');
 
+const DTP_THEME_LIST = ['dtp-light', 'dtp-dark'];
+
 const UserFlagsSchema = new Schema({
   isAdmin: { type: Boolean, default: false, required: true },
   isModerator: { type: Boolean, default: false, required: true },
@@ -42,6 +44,7 @@ const UserSchema = new Schema({
   flags: { type: UserFlagsSchema, select: false },
   permissions: { type: UserPermissionsSchema, select: false },
   optIn: { type: UserOptInSchema, required: true, select: false },
+  theme: { type: String, enum: DTP_THEME_LIST, default: 'dtp-light', required: true },
   stats: { type: ResourceStats, default: ResourceStatsDefaults, required: true },
 });
 

app/services/display-engine.js

@@ -109,6 +109,13 @@ class DisplayList {
       params: { href },
     });
   }
+
+  reload ( ) {
+    this.commands.push({
+      action: 'reload',
+      params: { },
+    });
+  }
 }
 
 class DisplayEngineService extends SiteService {

app/services/user.js

@@ -254,6 +254,7 @@ class UserService {
           username: userDefinition.username,
           username_lc,
           displayName: userDefinition.displayName,
+          theme: userDefinition.theme || 'dtp-light',
         },
       },
     );

app/views/layouts/main.pug

@@ -20,7 +20,7 @@ html(lang='en')
 
       block vendorcss
 
-      link(rel='stylesheet', href=`/dist/css/style.css?v=${pkg.version}`)
+      link(rel='stylesheet', href=`/dist/css/${user ? (user.theme || 'dtp-light') : 'dtp-light'}.css?v=${pkg.version}`)
   
     block js
       script(src=`/uikit/js/uikit.min.js?v=${pkg.version}`)
@@ -101,14 +101,14 @@ html(lang='en')
           dtp.channel = !{JSON.stringify(channel || null)};
 
       if DTP_SCRIPT_DEBUG
-        script(src=`/dist/js/dtpsites-app.js?v=${pkg.version}`, type="module")
+        script(src=`/dist/js/dtpweb-app.js?v=${pkg.version}`, type="module")
       else
-        script(src=`/dist/js/dtpsites-app.min.js?v=${pkg.version}`, type="module")
+        script(src=`/dist/js/dtpweb-app.min.js?v=${pkg.version}`, type="module")
       
       if user && user.flags.isAdmin
         if DTP_SCRIPT_DEBUG
-          script(src=`/dist/js/dtpsites-admin.js?v=${pkg.version}`, type="module")
+          script(src=`/dist/js/dtpweb-admin.js?v=${pkg.version}`, type="module")
         else
-          script(src=`/dist/js/dtpsites-admin.min.js?v=${pkg.version}`, type="module")
+          script(src=`/dist/js/dtpweb-admin.min.js?v=${pkg.version}`, type="module")
 
     block viewjs

app/views/user/settings.pug

@@ -92,5 +92,11 @@ block content
                     input(id="optin-marketing", name="optIn.marketing", type="checkbox", checked= user.optIn ? user.optIn.marketing : false).uk-checkbox
                     |  Sales / Marketing
 
+            .uk-margin
+              label(for="theme").uk-form-label UI Theme
+              select(id="theme", name="theme").uk-select
+                option(value="dtp-light", selected= user ? user.theme === 'dtp-light' : true) Light Mode
+                option(value="dtp-dark", selected= user ? user.theme === 'dtp-dark' : false) Dark Mode
+
             .uk-margin
               button(type="submit").uk-button.dtp-button-primary Update account settings

client/less/dtp-dark.less

@@ -0,0 +1,6 @@
+@import "site/variables.less";
+
+@import "node_modules/uikit/src/less/uikit.theme.less";
+@import "site/uikit-theme.dtp-dark.less";
+
+@import "style.common.less";

client/less/dtp-light.less

@@ -0,0 +1,6 @@
+@import "site/variables.less";
+
+@import "node_modules/uikit/src/less/uikit.theme.less";
+@import "site/uikit-theme.dtp-light.less";
+
+@import "style.common.less";

client/less/site/header-section.less

@@ -1,6 +1,5 @@
 .uk-section.uk-section-header {
-  background-color: @site-brand-color;
+  color: @site-brand-color;
-  color: white;
 
   .profile-header-name {
     font-size: 2.5em;
@@ -20,5 +19,5 @@
 .uk-section.uk-section-header h4,
 .uk-section.uk-section-header h5,
 .uk-section.uk-section-header h6 {
-  color: white;
+  color: @site-brand-color;
 }

client/less/site/uikit-theme.less → client/less/site/uikit-theme.dtp-dark.less

@@ -2,6 +2,12 @@
 // Colors
 //
 
+@site-brand-color:                              #ff0013;
+@button-label-color:                            #e8e8e8;
+@button-label-hover:                            #2a2a2a;
+@social-link-color:                             #e8e8e8;
+@checkout-button-text-color:                    #e8e8e8;
+
 @global-background:                             #1a1a1a;
 @global-muted-background:                       #3a3a3a;
 @global-primary-background:                     #1e87f0;
@@ -82,8 +88,8 @@
 // Form
 //
 
-@internal-form-select-image:                     "../images/backgrounds/form-select.svg";
+@internal-form-select-image:                     "/uikit/images/backgrounds/form-select.svg";
-@internal-form-datalist-image:                   "../images/backgrounds/form-datalist.svg";
+@internal-form-datalist-image:                   "/uikit/images/backgrounds/form-datalist.svg";
-@internal-form-radio-image:                      "../images/backgrounds/form-radio.svg";
+@internal-form-radio-image:                      "/uikit/images/backgrounds/form-radio.svg";
-@internal-form-checkbox-image:                   "../images/backgrounds/form-checkbox.svg";
+@internal-form-checkbox-image:                   "/uikit/images/backgrounds/form-checkbox.svg";
-@internal-form-checkbox-indeterminate-image:     "../images/backgrounds/form-checkbox-indeterminate.svg";
+@internal-form-checkbox-indeterminate-image:     "/uikit/images/backgrounds/form-checkbox-indeterminate.svg";

client/less/site/uikit-theme.dtp-light.less

@@ -0,0 +1,25 @@
+//
+// Colors
+//
+
+@site-brand-color:                              #ff0013;
+@button-label-color:                            #2a2a2a;
+@button-label-hover:                            #ffffff;
+@social-link-color:                             #2a2a2a;
+@checkout-button-text-color:                    #2a2a2a;
+
+//
+// Component: Navbar
+//
+
+@navbar-nav-item-height:                        @site-navbar-height;
+
+//
+// Form
+//
+
+@internal-form-select-image:                      "/uikit/images/backgrounds/form-select.svg";
+@internal-form-datalist-image:                    "/uikit/images/backgrounds/form-datalist.svg";
+@internal-form-radio-image:                       "/uikit/images/backgrounds/form-radio.svg";
+@internal-form-checkbox-image:                    "/uikit/images/backgrounds/form-checkbox.svg";
+@internal-form-checkbox-indeterminate-image:      "/uikit/images/backgrounds/form-checkbox-indeterminate.svg";

client/less/site/variables.less

@@ -1,2 +1 @@
-@site-brand-color: #d01a2a;
 @site-navbar-height: 64px;

client/less/style.less → client/less/style.common.less

@@ -1,8 +1,3 @@
-@import "site/variables.less";
-
-@import "node_modules/uikit/src/less/uikit.theme.less";
-@import "site/uikit-theme.less";
-
 @import "site/main.less";
 @import "site/border.less";
 @import "site/comment.less";

gulpfile.js

@@ -57,13 +57,20 @@ function util_start_browsersync ( ) {
   });
 }
 
-function dtp_less ( ) {
+async function dtp_less_dark ( ) {
   return gulp
-  .src('./client/less/style.less')
+    .src('./client/less/dtp-dark.less')
     .pipe(plumber())
-  .pipe(less({
+    .pipe(less({ paths: [ __dirname ], math: 'always' }))
-    math: 'always',
+    .pipe(gulp.dest('./dist/css'))
-  }))
+    .pipe(browserSync.stream());
+}
+
+async function dtp_less_light ( ) {
+  return gulp
+    .src('./client/less/dtp-light.less')
+    .pipe(plumber())
+    .pipe(less({ paths: [ __dirname ], math: 'always' }))
     .pipe(gulp.dest('./dist/css'))
     .pipe(browserSync.stream());
 }
@@ -220,9 +227,8 @@ function dtp_jsbuild_prod ( ) {
 function dtp_watch_client (done) {
   var files = [
     './client/less/**/*.less',
-    './client/less/dtp/*.less'
   ];
-  gulp.watch(files, dtp_less);
+  gulp.watch(files, exports.less);
 
   var jsfiles = [
     path.join(__dirname, '..', 'dtp', 'dtp-lib', 'client', '**', '*.js'),
@@ -284,7 +290,10 @@ function dtp_develop (done) {
   });
 }
 
-exports.less = dtp_less;
+exports.less = gulp.series(
+  dtp_less_light,
+  dtp_less_dark,
+);
 
 exports.jshint = gulp.parallel(
   dtp_jshint_models,
@@ -296,13 +305,8 @@ exports.jshint = gulp.parallel(
 );
 
 exports.build = gulp.parallel(
-  dtp_less,
+  exports.less,
-  dtp_jshint_models,
+  exports.jshint,
-  dtp_jshint_lib,
-  dtp_jshint_controllers,
-  dtp_jshint_client,
-  dtp_jshint_workers,
-  dtp_jshint_services,
   dtp_jsbuild_dev,
   dtp_jsbuild_prod,
 );

lib/client/js/dtp-display-engine.js

@@ -215,4 +215,8 @@ export default class DtpDisplayEngine {
   async navigateTo (displayList, command) {
     window.location = command.params.href;
   }
+
+  async reload ( ) {
+    window.location.reload();
+  }
 }