T#283/dark mode

cypress/e2e/admin.cy.js

@@ -22,6 +22,29 @@ context('Admin: Generate Screenshots', () => {
         cy.snap('modal-projects-new_project', '.p-dialog')
     })
 
+    it('Gen Projects pages - dark mode', () => {
+        cy.request('POST', '/app/userInfo/settings', [{
+            'settingGroup': 'user.prefs',
+            'value': true,
+            'setting': 'enable_dark_mode',
+            'lastLoadedValue': 'true',
+            'dirty': true
+        }]);
+        // projects page
+        cy.visit('/administrator')
+        cy.get('[data-cy="projectCard_movies"]');
+        cy.get('[data-cy="projectCard_shows"]');
+        cy.snap('page-projects-dark-mode');
+
+        cy.request('POST', '/app/userInfo/settings', [{
+            'settingGroup': 'user.prefs',
+            'value': false,
+            'setting': 'enable_dark_mode',
+            'lastLoadedValue': 'true',
+            'dirty': true
+        }]);
+    })
+
     it('Gen Subject page with custom viewport', () => {
         // use custom ratio
         cy.viewport(1350, 800);

docs/dashboard/user-guide/settings.md

@@ -6,12 +6,26 @@ Administration settings can be accessed by users via the ```Settings``` menu ent
 Please note that number of settings' section are only visible to users with the [Root](/dashboard/user-guide/users.html#root) role. 
 
 ## Preferences
-Ability to customize your personal user preference:
+Ability to customize your personal user preference, including: 
+- Default Home/Landing Page
+- Ability to opt-out from Ranking and Leaderboards
+- Enabling and/or disabling UI Dark Mode
+
+![User Preferences](../../screenshots/admin/page-settings-preference.png)
+
+### Setting: Default Home Page
+
+Users have a choice of a default landing page. If the majority of time is spent administrating SkillTree projects then it makes sense to change the default to the `Project Admin`. 
 
 ### Setting: Rank and Leader Opt-Out
 
 Change this setting to true and you will not be shown on the Leaderboard or assigned a rank for all projects. 
 
+### Setting: Dark Mode <since project="skills-service" version="3.0" />
+
+Enabling Dark Mode will switch UI into light-on-dark color scheme. For example:
+
+![page-projects-dark-mode.png](../../screenshots/admin/page-projects-dark-mode.png)
 
 ## Security Settings <requires-role role="Root" />