diff --git a/CHANGELOG.md b/CHANGELOG.md
index 56256ce4d..66824ed8f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,17 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
+## 0.9.2
+### Added
+- Support for color schemas (Dark Mode with unrounded corners included)
+### Fixed
+- Login of deactivated users
+- Remove references to removed `extensions` preference
+
+## 0.9.1
+### Fixed
+- Incompatible version of `ol-ext` to match updated `ol`
+
 ## 0.9 - Isfahan
 ### Added
 - Global State for shared information (Vuex)
diff --git a/app/Http/Controllers/HomeController.php b/app/Http/Controllers/HomeController.php
index 071da9b1b..0b0852f53 100644
--- a/app/Http/Controllers/HomeController.php
+++ b/app/Http/Controllers/HomeController.php
@@ -52,6 +52,7 @@ public function getGlobalData() {
             'preferences' => $preferenceValues,
             'concepts' => $concepts,
             'entityTypes' => $entityTypeMap,
+            'colorsets' => sp_get_themes(),
         ]);
     }
 
diff --git a/app/Http/Controllers/UserController.php b/app/Http/Controllers/UserController.php
index 784375290..05c3b6972 100644
--- a/app/Http/Controllers/UserController.php
+++ b/app/Http/Controllers/UserController.php
@@ -159,8 +159,18 @@ public function login(Request $request) {
         $creds = ['password'];
         if($request->has('nickname')) {
             $creds[] = 'nickname';
+            if(!User::where('nickname', $request->get('nickname'))->withoutTrashed()->exists()) {
+                return response()->json([
+                    'error' => __('Invalid Credentials')
+                ], 400);
+            }
         } else {
             $creds[] = 'email';
+            if(!User::where('email', $request->get('email'))->withoutTrashed()->exists()) {
+                return response()->json([
+                    'error' => __('Invalid Credentials')
+                ], 400);
+            }
         }
         $credentials = request($creds);
 
diff --git a/app/Preference.php b/app/Preference.php
index 96ed7e8d3..036fd4563 100644
--- a/app/Preference.php
+++ b/app/Preference.php
@@ -58,6 +58,8 @@ public static function decodePreference($label, $value) {
         switch($label) {
             case 'prefs.gui-language':
                 return $value->language_key;
+            case 'prefs.color':
+                return $value->color_key;
             case 'prefs.enable-password-reset-link':
                 return $value->use;
             case 'prefs.columns':
@@ -66,8 +68,6 @@ public static function decodePreference($label, $value) {
                 return $value->show;
             case 'prefs.tag-root':
                 return $value->uri;
-            case 'prefs.load-extensions':
-                return $value;
             case 'prefs.link-to-thesaurex':
                 return $value->url;
             case 'prefs.project-name':
@@ -92,6 +92,9 @@ public static function encodePreference($label, $decodedValue) {
             case 'prefs.gui-language':
                 $value = json_encode(['language_key' => $decodedValue]);
                 break;
+            case 'prefs.color':
+                $value = json_encode(['color_key' => $decodedValue]);
+                break;
             case 'prefs.enable-password-reset-link':
                 $value = json_encode(['use' => $decodedValue]);
                 break;
@@ -104,9 +107,6 @@ public static function encodePreference($label, $decodedValue) {
             case 'prefs.tag-root':
                 $value = json_encode(['uri' => $decodedValue]);
                 break;
-            case 'prefs.load-extensions':
-                $value = $decodedValue;
-                break;
             case 'prefs.link-to-thesaurex':
                 $value = json_encode(['url' => $decodedValue]);
                 break;
diff --git a/app/helpers.php b/app/helpers.php
index 47a8199ef..05bdd10e5 100644
--- a/app/helpers.php
+++ b/app/helpers.php
@@ -41,6 +41,30 @@ function sp_get_permission_groups($onlyGroups = false) {
     }
 }
 
+if(!function_exists('sp_get_themes')) {
+    function sp_get_themes() {
+        $themeDir = base_path("resources/sass/");
+        $fileList = glob("${themeDir}app*.scss");
+        $themes = [];
+        foreach($fileList as $file) {
+            $theme = [];
+            // cut off base path and .scss extension
+            $fileName = substr($file, strlen($themeDir), -5);
+            // default stylesheet needs special treatment
+            if($fileName == 'app') {
+                $theme['id'] = 'default';
+                $theme['key'] = '';
+            } else {
+                $extName = substr($fileName, 3);
+                $theme['id'] = substr($extName, 1);
+                $theme['key'] = $extName;
+            }
+            $themes[] = $theme;
+        }
+        return $themes;
+    }
+}
+
 if(!function_exists('sp_loggable_models')) {
     function sp_loggable_models() {
         $loggableModels = [];
diff --git a/database/migrations/2022_09_23_074139_add_color_preference.php b/database/migrations/2022_09_23_074139_add_color_preference.php
new file mode 100644
index 000000000..f89618d9c
--- /dev/null
+++ b/database/migrations/2022_09_23_074139_add_color_preference.php
@@ -0,0 +1,39 @@
+<?php
+
+use App\Preference;
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        // Add Color Preference
+        $label = 'prefs.color';
+        $value = json_encode(['color_key' => '']);
+        $override = false;
+
+        $preference = new Preference();
+        $preference->label = $label;
+        $preference->default_value = $value;
+        $preference->allow_override = $override;
+        $preference->save();
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        // Remove Color Preference
+        Preference::where('label', 'prefs.color')->delete();
+    }
+};
diff --git a/resources/js/App.vue b/resources/js/App.vue
index 38e1e4f13..39671ae4c 100644
--- a/resources/js/App.vue
+++ b/resources/js/App.vue
@@ -104,7 +104,7 @@
                                     <i class="fas fa-fw" :class="plugin.icon"></i>
                                     {{ t(plugin.label) }}
                                 </router-link>
-                                <template v-if="hasPreference('prefs.load-extensions', 'data-analysis') || hasPreference('prefs.link-to-thesaurex')">
+                                <template v-if="hasPreference('prefs.link-to-thesaurex')">
                                     <div class="dropdown-divider"></div>
                                     <h6 class="dropdown-header">
                                         {{ t('global.tools.external') }} <sup class="fas fa-fw fa-sm fa-fw fa-external-link-alt"></sup>
@@ -116,7 +116,7 @@
                                         {{ t('global.tools.thesaurex') }}
                                     </a>
                                 </template>
-                                <template v-if="hasPreference('prefs.load-extensions', 'data-analysis')">
+                                <template>
                                     <a class="dropdown-item" href="../db" target="_blank">
                                         <i class="fas fa-fw fa-chart-bar"></i>
                                         {{ t('global.tools.dbwebgen') }}
diff --git a/resources/js/api.js b/resources/js/api.js
index 88cfe7d83..e14363095 100644
--- a/resources/js/api.js
+++ b/resources/js/api.js
@@ -142,6 +142,7 @@ export async function fetchPreData(locale) {
         store.dispatch('setEntityTypes', response.data.entityTypes);
         store.commit('setPreferences', response.data.preferences);
         store.commit('setSystemPreferences', response.data.system_preferences);
+        store.dispatch('setColorSets', response.data.colorsets);
         
         if(auth.ready()) {
             auth.load().then(_ => {
diff --git a/resources/js/bootstrap/color.js b/resources/js/bootstrap/color.js
new file mode 100644
index 000000000..96f0af078
--- /dev/null
+++ b/resources/js/bootstrap/color.js
@@ -0,0 +1,5 @@
+import store from '@/bootstrap/store.js';
+
+export function getSupportedColorSets() {
+    return store.getters.colorSets;
+}
diff --git a/resources/js/bootstrap/store.js b/resources/js/bootstrap/store.js
index 56286bb84..c4d5504ca 100644
--- a/resources/js/bootstrap/store.js
+++ b/resources/js/bootstrap/store.js
@@ -51,6 +51,7 @@ export const store = createStore({
                     users: [],
                     version: {},
                     plugins: [],
+                    colorsets: [],
                     registeredPluginSlots: {
                         tab: [],
                         tools: [],
@@ -426,6 +427,9 @@ export const store = createStore({
                 registerPluginInSlot(state, data) {
                     state.registeredPluginSlots[data.slot].push(data);
                 },
+                setColorSets(state, data) {
+                    state.colorSets = data;
+                },
             },
             actions: {
                 setAppState({commit}, data) {
@@ -631,6 +635,9 @@ export const store = createStore({
                 registerPluginInSlot({commit}, data) {
                     commit('registerPluginInSlot', data);
                 },
+                setColorSets({commit}, data) {
+                    commit('setColorSets', data);
+                },
             },
             getters: {
                 appInitialized: state => state.appInitialized,
@@ -678,6 +685,7 @@ export const store = createStore({
                     const p = state.registeredPluginSlots;
                     return slot ? p[slot] : p;
                 },
+                colorSets: state => state.colorSets,
                 vfm: state => state.vfm,
             }
         },
diff --git a/resources/js/components/Preferences.vue b/resources/js/components/Preferences.vue
index 01e1ad6d6..2047fd2fa 100644
--- a/resources/js/components/Preferences.vue
+++ b/resources/js/components/Preferences.vue
@@ -35,6 +35,24 @@
                             </div>
                         </td>
                     </tr>
+                    <tr>
+                        <td>
+                            <strong>
+                                {{ t('main.preference.key.color.title') }}
+                            </strong>
+                        </td>
+                        <td>
+                            <color-preference
+                                :data="state.preferences['prefs.color'].value"
+                                @changed="e => trackChanges('prefs.color', e)">
+                            </color-preference>
+                        </td>
+                        <td>
+                            <div class="form-check form-switch d-flex justify-content-center">
+                                <input class="form-check-input" type="checkbox" v-model="state.preferences['prefs.gui-language'].allow_override" />
+                            </div>
+                        </td>
+                    </tr>
                     <tr>
                         <td>
                             <strong>{{ t('main.preference.key.password_reset_link') }}</strong>
@@ -147,7 +165,7 @@
                             </div>
                         </td>
                     </tr>
-                    <tr v-if="state.preferences['prefs.load-extensions'].value.map">
+                    <tr>
                         <td>
                             <strong>{{ t('main.preference.key.map.projection') }}</strong>
                         </td>
@@ -188,6 +206,7 @@
     } from '@/helpers/helpers.js';
 
     import GuiLanguage from '@/components/preferences/GuiLanguage.vue';
+    import Color from '@/components/preferences/Color.vue';
     import ResetEmail from '@/components/preferences/ResetEmail.vue';
     import Columns from '@/components/preferences/Columns.vue';
     import ShowTooltips from '@/components/preferences/ShowTooltips.vue';
@@ -200,6 +219,7 @@
     export default {
         components: {
             'gui-language-preference': GuiLanguage,
+            'color-preference': Color,
             'reset-email-preference': ResetEmail,
             'columns-preference': Columns,
             'tooltips-preference': ShowTooltips,
@@ -215,6 +235,7 @@
 
             // FUNCTIONS
             const trackChanges = (label, data) => {
+                console.log(label, data);
                 state.dirtyData[label] = {
                     value: data.value,
                 };
diff --git a/resources/js/components/UserPreferences.vue b/resources/js/components/UserPreferences.vue
index 3f8121926..fcfeca3f4 100644
--- a/resources/js/components/UserPreferences.vue
+++ b/resources/js/components/UserPreferences.vue
@@ -11,7 +11,7 @@
             </button>
         </h3>
         <div class="table-responsive scroll-x-hidden">
-            <table class="table table-light table-striped table-hover mb-0" v-if="state.prefsLoaded" v-dcan="'preferences_view'">
+            <table class="table table-light table-striped table-hover mb-0" v-if="state.prefsLoaded" v-dcan="'preferences_read'">
                 <thead class="sticky-top">
                     <tr class="text-nowrap">
                         <th>{{ t('global.preference') }}</th>
@@ -82,18 +82,6 @@
                             </tags-preference>
                         </td>
                     </tr>
-                    <tr>
-                        <td>
-                            <strong>{{ t('main.preference.key.extensions') }}</strong>
-                        </td>
-                        <td>
-                            <extensions-preference
-                                :data="state.preferences['prefs.load-extensions']"
-                                :readonly="!state.overrides['prefs.load-extensions']"
-                                @changed="e => trackChanges('prefs.load-extensions', e)">
-                            </extensions-preference>
-                        </td>
-                    </tr>
                     <tr>
                         <td>
                             <strong>{{ t('main.preference.key.link_thesaurex') }}</strong>
@@ -130,7 +118,7 @@
                             </project-maintainer-preference>
                         </td>
                     </tr>
-                    <tr v-if="state.preferences['prefs.load-extensions'].map">
+                    <tr>
                         <td>
                             <strong>{{ t('main.preference.key.map.projection') }}</strong>
                         </td>
diff --git a/resources/js/components/preferences/Color.vue b/resources/js/components/preferences/Color.vue
new file mode 100644
index 000000000..32fc21eac
--- /dev/null
+++ b/resources/js/components/preferences/Color.vue
@@ -0,0 +1,91 @@
+<template>
+    <div class="row">
+        <label class="col-md-2 form-label"></label>
+        <div class="col-md-10">
+            <multiselect
+                v-model="data"
+                id="color-search"
+                :trackBy="'id'"
+                :label="'id'"
+                :valueProp="'key'"
+                :hideSelected="true"
+                :mode="'single'"
+                :filterResults="true"
+                :options="state.colorList"
+                :searchable="true"
+                :readonly="readonly"
+                :placeholder="t('global.select.placeholder')"
+                @change="onChange">
+                <template v-slot:option="{ option }">
+                    {{ t(`main.preference.key.color.style.${option.id}`) }}
+                </template>
+                <template v-slot:singlelabel="{ value }">
+                    <div class="multiselect-single-label">
+                        {{ t(`main.preference.key.color.style.${value.id}`) }}
+                    </div>
+                </template>
+            </multiselect>
+        </div>
+    </div>
+</template>
+
+<script>
+    import {
+        computed,
+        reactive,
+        toRefs,
+    } from 'vue';
+
+    import { useI18n } from 'vue-i18n';
+
+    import {
+        getSupportedColorSets,
+    } from '@/bootstrap/color.js';
+
+    export default {
+        props: {
+            data: {
+                required: true,
+                type: String,
+            },
+            readonly: {
+                required: false,
+                type: Boolean,
+                default: false,
+            },
+        },
+        emits: ['changed'],
+        setup(props, context) {
+            const { t } = useI18n();
+            const {
+                data,
+                readonly,
+            } = toRefs(props);
+
+            // FUNCTIONS
+            const onChange = value => {
+                if(readonly.value) return;
+                context.emit('changed', {
+                    value: value
+                });
+            };
+
+            // DATA
+            const state = reactive({
+                colorList: getSupportedColorSets(),
+            });
+
+            // RETURN
+            return {
+                t,
+                // LOCAL
+                onChange,
+                // PROPS
+                data,
+                readonly,
+                // STATE
+                state,
+            };
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/resources/js/i18n/de.json b/resources/js/i18n/de.json
index 68c05d013..7476eaaa5 100644
--- a/resources/js/i18n/de.json
+++ b/resources/js/i18n/de.json
@@ -537,6 +537,13 @@
             "key": {
                 "language": "Sprache",
                 "password_reset_link": "Passwort per Link zurücksetzen",
+                "color": {
+                    "title": "Design",
+                    "style": {
+                        "default": "Standard",
+                        "dark_unrounded": "Dunkel (Harte Kanten)"
+                    }
+                },
                 "columns": {
                     "title": "Spalten Hauptansicht",
                     "left": "Linke Spalte",
diff --git a/resources/js/i18n/en.json b/resources/js/i18n/en.json
index 5cca9b2d0..1bf7b9510 100644
--- a/resources/js/i18n/en.json
+++ b/resources/js/i18n/en.json
@@ -248,6 +248,9 @@
                 "reply_to_user": "Reply to <span class=\"fw-bold\">{name}</span>",
                 "reply_to_chat": "Reply to comment section"
             }
+        },
+        "markdown_editor": {
+            "title": "Markdown Editor"
         }
     },
     "main": {
@@ -534,6 +537,13 @@
             "key": {
                 "language": "Language",
                 "password_reset_link": "Enable Reset Password Link",
+                "color": {
+                    "title": "Theme",
+                    "style": {
+                        "default": "Default",
+                        "dark_unrounded": "Dark (Unrounded corners)"
+                    }
+                },
                 "columns": {
                     "title": "Columns in Main View",
                     "left": "Left Column",
diff --git a/resources/sass/_app-base.scss b/resources/sass/_app-base.scss
new file mode 100644
index 000000000..6e9939e98
--- /dev/null
+++ b/resources/sass/_app-base.scss
@@ -0,0 +1,51 @@
+// Bootstrap
+@import "~bootstrap/scss/bootstrap";
+@import "bootstrap";
+
+// tree-component
+@import "~tree-component/dist/tree.min.css";
+@import "tree";
+
+// vue-upload-component
+@import "upload";
+
+// multiselect
+@import "~@vueform/multiselect/themes/default";
+@import "multiselect";
+
+// code highlighting
+@import "highlight.js/styles/atom-one-dark.css";
+
+// map
+@import "map";
+
+// v-modal
+@import "modal";
+
+// dat.gui
+@import "datgui";
+
+// color gradient
+@import "gradient";
+
+// Search components
+@import "search";
+
+// Datepicker
+@import "~vue-datepicker-next/scss/index";
+@import "datepicker";
+
+// Popover
+@import "popover";
+
+// Markdown Editor (based on Milkdown)
+@import "markdown";
+
+// Spacialist utility classes
+@import "utilities";
+
+// Spacialist specific
+@import "style";
+
+// Spacialist specific
+@import "animations";
\ No newline at end of file
diff --git a/resources/sass/_bootstrap.scss b/resources/sass/_bootstrap.scss
index 748573812..42abf4181 100644
--- a/resources/sass/_bootstrap.scss
+++ b/resources/sass/_bootstrap.scss
@@ -1,6 +1,8 @@
 .breadcrumb {
     background-color: $gray-200;
-    border-radius: $border-radius;
+    @if $enable-rounded {
+        border-radius: $border-radius;
+    }
 }
 
 .dropdown-menu {
diff --git a/resources/sass/_datepicker.scss b/resources/sass/_datepicker.scss
index 76dbdf113..41c05d93c 100644
--- a/resources/sass/_datepicker.scss
+++ b/resources/sass/_datepicker.scss
@@ -5,8 +5,10 @@
   color: $text-color;
   background-color: $body-bg;
   border: 1px solid;
-  border-color: $input-border-color !important;
-  border-radius: $input-border-radius !important;
+  @if $enable-rounded {
+    border-color: $input-border-color !important;
+    border-radius: $input-border-radius !important;
+  }
 }
 
 .#{$namespace}-datepicker-col-5 {
diff --git a/resources/sass/_markdown.scss b/resources/sass/_markdown.scss
index c063fc7c8..649b25f97 100644
--- a/resources/sass/_markdown.scss
+++ b/resources/sass/_markdown.scss
@@ -11,7 +11,9 @@ p.paragraph {
 .milkdown {
     flex-grow: 1;
     background: #EBF2FD;
-    border-radius: $border-radius-lg;
+    @if $enable-rounded {
+        border-radius: $border-radius-lg;
+    }
     padding: map-get($spacers, 3);
     margin-top: map-get($spacers, 1);
     overflow-y: auto;
diff --git a/resources/sass/_multiselect.scss b/resources/sass/_multiselect.scss
index ccec62f30..b24dd5405 100644
--- a/resources/sass/_multiselect.scss
+++ b/resources/sass/_multiselect.scss
@@ -12,4 +12,8 @@
 
 .multiselect-wide > .multiselect-dropdown {
   width: 20vw;
+}
+
+.multiselect-option {
+  --ms-option-bg-selected: #{$green};
 }
\ No newline at end of file
diff --git a/resources/sass/_style.scss b/resources/sass/_style.scss
index 99fc5b5bc..2f40d7592 100644
--- a/resources/sass/_style.scss
+++ b/resources/sass/_style.scss
@@ -41,7 +41,9 @@ code.normal {
     height: 100%;
     width: 100%;
     border: 2px dashed lightgray;
-    border-radius: 3px;
+    @if $enable-rounded {
+        border-radius: 3px;
+    }
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -123,7 +125,9 @@ code.normal {
 }
 
 .card-hover-overlay {
-    border-radius: $card-border-radius !important;
+    @if $enable-rounded {
+        border-radius: $card-border-radius !important;
+    }
     display: flex;
     justify-content: center;
     align-items: center;
@@ -170,7 +174,9 @@ code.normal {
 
 .hover-item:hover {
     background-color: $gray-200 !important;
-    border-radius: $input-border-radius !important;
+    @if $enable-rounded {
+        border-radius: $input-border-radius !important;
+    }
 }
 
 .rendered-markdown li > p {
diff --git a/resources/sass/_tree.scss b/resources/sass/_tree.scss
index ab997d9a5..b4e0c1d7b 100644
--- a/resources/sass/_tree.scss
+++ b/resources/sass/_tree.scss
@@ -15,8 +15,9 @@
     font-weight: $font-weight-normal;
     // color: $white !important;
     background-color: rgba(red($yellow), green($yellow), blue($yellow), 0.5) !important;
-
-    border-radius: $border-radius;
+    @if $enable-rounded {
+        border-radius: $border-radius;
+    }
 }
 
 
diff --git a/resources/sass/_variables-override-dark_unrounded.scss b/resources/sass/_variables-override-dark_unrounded.scss
new file mode 100644
index 000000000..589632593
--- /dev/null
+++ b/resources/sass/_variables-override-dark_unrounded.scss
@@ -0,0 +1,83 @@
+// Colors
+$white: #000 !default;
+$gray-100: #212529 !default;
+$gray-200: #343a40 !default;
+$gray-300: #495057 !default;
+$gray-400: #6c757d !default;
+$gray-500: #adb5bd !default;
+$gray-600: #ced4da !default;
+$gray-700: #dee2e6 !default;
+$gray-800: #e9ecef !default;
+$gray-900: #f8f9fa !default;
+$black: #fff !default;
+
+$body-bg: $gray-100;
+$text-color: $gray-600;
+$navbar-default-bg: $white;
+$panel-default-heading-bg: $white;
+
+$blue: #dc3545 !default;
+$red: #ab296a !default;
+$orange: #fd7e14 !default;
+$green: #479f76 !default;
+$cyan: #4dd4ac !default;
+
+$indigo: #6610f2 !default;
+$purple: #6f42c1 !default;
+$pink: #d63384 !default;
+$yellow: #ffc107 !default;
+$teal: #20c997 !default;
+
+$brand-primary: $blue;
+$brand-info: $cyan;
+$brand-success: $green;
+$brand-warning: $orange;
+$brand-danger: $red;
+
+// Corners
+$enable-rounded: false;
+
+
+// Addons
+
+// Modal
+.sp-modal-content {
+    --bs-modal-bg: #{$gray-100};
+}
+
+// Multiselect
+.multiselect {
+    --ms-bg: $gray-100;
+    color: $gray-600;
+    @if not $enable-rounded {
+        --ms-radius: 0px;
+    }
+}
+
+.multiselect-search {
+    --ms-placeholder-color: $gray-600;
+}
+
+.multiselect-tag {
+    --ms-tag-bg: #{$green};
+    --ms-tag-color: #{$gray-600};
+    --ms-tag-bg-disabled: #{$gray-400};
+    --ms-tag-color-disabled: #{$gray-600};
+    @if not $enable-rounded {
+        --ms-tag-radius: 0px;
+    }
+}
+
+.multiselect-dropdown {
+    --ms-dropdown-border-color: #{$gray-300};
+    --ms-dropdown-bg: #{$gray-100};
+    @if not $enable-rounded {
+        --ms-dropdown-radius: 0px;
+    }
+}
+
+.multiselect-option {
+    --ms-option-bg-pointed: #{$gray-200};
+    --ms-option-color-pointed: $text-color;
+    --ms-option-bg-selected: $green;
+}
\ No newline at end of file
diff --git a/resources/sass/_variables.scss b/resources/sass/_variables.scss
index 4dad737ce..71c6ba73b 100644
--- a/resources/sass/_variables.scss
+++ b/resources/sass/_variables.scss
@@ -1,6 +1,24 @@
-
+// Defaults
 // Body
-$body-bg: #f5f8fa;
+$body-bg: #f8f9fa !default;
+
+// Brands
+$brand-primary: #0d6efd !default;
+$brand-info: #0dcaf0 !default;
+$brand-success: #198754 !default;
+$brand-warning: #ffc107 !default;
+$brand-danger: #dc3545 !default;
+
+// Typography
+$text-color: #6c757d !default;
+
+// Navbar
+$navbar-default-bg: #fff !default;
+
+// Panels
+$panel-default-heading-bg: #fff !default;
+
+$enable-rounded: true !default;
 
 // Borders
 $laravel-border-color: darken($body-bg, 10%);
@@ -9,25 +27,14 @@ $navbar-default-border: $laravel-border-color;
 $panel-default-border: $laravel-border-color;
 $panel-inner-border: $laravel-border-color;
 
-// Brands
-$brand-primary: #0d6efd;
-$brand-info: #0dcaf0;
-$brand-success: #198754;
-$brand-warning: #ffc107;
-$brand-danger: #dc3545;
-
 // Typography
 $icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
 $font-family-sans-serif: "Raleway", sans-serif;
 $font-family-monospace: "Source Code Pro", monospace;
 $font-size-base: .9rem !default;
 $line-height-base: 1.6;
-$text-color: #636b6f;
 $font-weight-medium: 600 !default;
 
-// Navbar
-$navbar-default-bg: #fff;
-
 $logo-size: 24px;
 
 // Buttons
@@ -38,9 +45,6 @@ $input-border: lighten($text-color, 40%);
 $input-border-focus: lighten($brand-primary, 25%);
 $input-color-placeholder: lighten($text-color, 30%);
 
-// Panels
-$panel-default-heading-bg: #fff;
-
 // Breadcrumbs
 $breadcrumb-item-padding: .25rem;
 $breadcrumb-divider: quote(">");
diff --git a/resources/sass/app-dark_unrounded.scss b/resources/sass/app-dark_unrounded.scss
new file mode 100644
index 000000000..3be68ff65
--- /dev/null
+++ b/resources/sass/app-dark_unrounded.scss
@@ -0,0 +1,5 @@
+// Variables
+@import "variables-override-dark_unrounded";
+@import "variables";
+
+@import "app-base";
\ No newline at end of file
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index af97fc3ee..a8c32f18d 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -1,54 +1,4 @@
 // Variables
 @import "variables";
 
-// Bootstrap
-@import "~bootstrap/scss/bootstrap";
-@import "bootstrap";
-
-// tree-component
-@import "~tree-component/dist/tree.min.css";
-@import "tree";
-
-// vue-upload-component
-@import "upload";
-
-// multiselect
-@import "~@vueform/multiselect/themes/default";
-@import "multiselect";
-
-// code highlighting
-@import "highlight.js/styles/atom-one-dark.css";
-
-// map
-@import "map";
-
-// v-modal
-@import "modal";
-
-// dat.gui
-@import "datgui";
-
-// color gradient
-@import "gradient";
-
-// Search components
-@import "search";
-
-// Datepicker
-@import "~vue-datepicker-next/scss/index";
-@import "datepicker";
-
-// Popover
-@import "popover";
-
-// Markdown Editor (based on Milkdown)
-@import "markdown";
-
-// Spacialist utility classes
-@import "utilities";
-
-// Spacialist specific
-@import "style";
-
-// Spacialist specific
-@import "animations";
+@import "app-base";
\ No newline at end of file
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 2e31bdd56..d4214a127 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -13,7 +13,7 @@
 
     <!-- Styles -->
     <link href="css/vue-multiselect.min.css" rel="stylesheet">
-    <link href="css/app.css" rel="stylesheet">
+    <link href="css/app{{$p['prefs.color']}}.css" rel="stylesheet">
 </head>
 <body>
     <div id="app" class="d-flex flex-column"></div>
diff --git a/resources/views/layouts/laravel.blade.php b/resources/views/layouts/laravel.blade.php
index cfd4f783e..1b3321b27 100644
--- a/resources/views/layouts/laravel.blade.php
+++ b/resources/views/layouts/laravel.blade.php
@@ -13,7 +13,7 @@
 
     <!-- Styles -->
     <link href="/css/vue-multiselect.min.css" rel="stylesheet">
-    <link href="/css/app.css" rel="stylesheet">
+    <link href="/css/app{{$p['prefs.color']}}.css" rel="stylesheet">
 </head>
 <body>
     <div id="app" class="d-flex flex-column">
diff --git a/webpack.mix.js b/webpack.mix.js
index 866ffde93..622317ffb 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -34,6 +34,7 @@ const appPath = process.env.MIX_APP_PATH;
 
 mix.js('resources/js/app.js', 'public/js').vue()
    .sass('resources/sass/app.scss', 'public/css')
+   .sass('resources/sass/app-dark_unrounded.scss', 'public/css')
 //    .copy(
 //        'node_modules/vue-multiselect/dist/vue-multiselect.min.css',
 //        'public/css'
@@ -45,6 +46,16 @@ mix.js('resources/js/app.js', 'public/js').vue()
    })
    .webpackConfig(webpack => {
        return {
+            module: {
+                rules: [{
+                    test: /\.m?js$/,
+                    resolve: {
+                        fullySpecified: false
+                    },
+                    include: /node_modules/,
+                    type: 'javascript/auto',
+                }]
+            },
            resolve: {
             //    alias: {
             //        videojs: 'video.js',