Updated settings view to have dark-mode color options

Also added link color option, not yet used.
Cleaned up tabbed interface control design as part of this.

app/Config/setting-defaults.php

@@ -16,6 +16,7 @@ return [
     'app-editor'           => 'wysiwyg',
     'app-color'            => '#206ea7',
     'app-color-light'      => 'rgba(32,110,167,0.15)',
+    'link-color'           => '#206ea7',
     'bookshelf-color'      => '#a94747',
     'book-color'           => '#077b70',
     'chapter-color'        => '#af4d0d',

resources/lang/en/settings.php

@@ -36,8 +36,6 @@ return [
     'app_logo_desc' => 'This is used in the application header bar, among other areas. This image should be 86px in height. Large images will be scaled down.',
     'app_icon' => 'Application Icon',
     'app_icon_desc' => 'This icon is used for browser tabs and shortcut icons. This should be a 256px square PNG image.',
-    'app_primary_color' => 'Application Primary Color',
-    'app_primary_color_desc' => 'Sets the primary color for the application including the banner, buttons, and links.',
     'app_homepage' => 'Application Homepage',
     'app_homepage_desc' => 'Select a view to show on the homepage instead of the default view. Page permissions are ignored for selected pages.',
     'app_homepage_select' => 'Select a page',
@@ -51,8 +49,12 @@ return [
     'app_disable_comments_desc' => 'Disables comments across all pages in the application. <br> Existing comments are not shown.',
 
     // Color settings
-    'content_colors' => 'Content Colors',
+    'color_scheme' => 'Application Color Scheme',
-    'content_colors_desc' => 'Sets colors for all elements in the page organisation hierarchy. Choosing colors with a similar brightness to the default colors is recommended for readability.',
+    'color_scheme_desc' => 'Set the colors to use in the BookStack interface. Colors can be configured separately for dark and light mode to best fit the theme and ensure legibility.',
+    'ui_colors_desc' => 'Set the primary and link colors used in BookStack. The primary color is mainly used for the header banner, buttons and UI decorations, in addition to a few other components.',
+    'app_color' => 'Primary Color',
+    'link_color' => 'Link Color',
+    'content_colors_desc' => 'Set colors for all elements in the page organisation hierarchy. Choosing colors with a similar brightness to the default colors is recommended for readability.',
     'bookshelf_color' => 'Shelf Color',
     'book_color' => 'Book Color',
     'chapter_color' => 'Chapter Color',

resources/sass/_blocks.scss

@@ -237,6 +237,13 @@
   }
 }
 
+.sub-card {
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+  border: 1.5px solid;
+  @include lightDark(border-color, #E2E2E2, #444);
+  border-radius: 4px;
+}
+
 .outline-hover {
   border: 1px solid transparent !important;
   &:hover {

resources/sass/_components.scss

@@ -608,36 +608,39 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
 
 
 .tab-container .nav-tabs {
+  display: flex;
+  align-items: end;
+  justify-items: start;
   text-align: start;
   border-bottom: 1px solid #DDD;
   @include lightDark(border-color, #ddd, #444);
   margin-bottom: $-m;
-  .tab-item {
-    padding: $-s;
-    @include lightDark(color, #666, #999);
-    &.selected {
-      border-bottom-width: 3px;
-    }
-  }
 }
 
 .nav-tabs {
   text-align: center;
-  a, .tab-item {
+  .tab-item {
-    padding: $-m;
     display: inline-block;
-    @include lightDark(color, #666, #999);
+    padding: $-s;
+    @include lightDark(color, rgba(0, 0, 0, .5), rgba(255, 255, 255, .5));
     cursor: pointer;
-    border-right: 1px solid rgba(0, 0, 0, 0.1);
     border-bottom: 2px solid transparent;
+    margin-bottom: -1px;
     &.selected {
-      border-bottom: 2px solid var(--color-primary);
+      color: var(--color-primary) !important;
+      border-bottom-color: var(--color-primary) !important;
     }
-    &:last-child {
+    &:hover, &:focus {
-      border-right: 0;
+      @include lightDark(color, rgba(0, 0, 0, .8), rgba(255, 255, 255, .8));
+      @include lightDark(border-bottom-color,  rgba(0, 0, 0, .2), rgba(255, 255, 255, .2));
     }
   }
 }
+.nav-tabs.controls-card {
+  margin-bottom: 0;
+  border-bottom: 0;
+  padding: 0 $-xs;
+}
 
 .image-picker .none {
   display: none;

resources/views/pages/parts/image-manager.blade.php

@@ -21,10 +21,10 @@
                                 type="button" class="tab-item selected" title="{{ trans('components.image_all_title') }}">@icon('images') {{ trans('components.image_all') }}</button>
                         <button refs="image-manager@filterTabs"
                                 data-filter="book"
-                                type="button" class="tab-item" title="{{ trans('components.image_book_title') }}">@icon('book', ['class' => 'text-book svg-icon']) {{ trans('entities.book') }}</button>
+                                type="button" class="tab-item" title="{{ trans('components.image_book_title') }}">@icon('book', ['class' => 'svg-icon']) {{ trans('entities.book') }}</button>
                         <button refs="image-manager@filterTabs"
                                 data-filter="page"
-                                type="button" class="tab-item" title="{{ trans('components.image_page_title') }}">@icon('page', ['class' => 'text-page svg-icon']) {{ trans('entities.page') }}</button>
+                                type="button" class="tab-item" title="{{ trans('components.image_page_title') }}">@icon('page', ['class' => 'svg-icon']) {{ trans('entities.page') }}</button>
                     </div>
                     <div>
                         <form refs="image-manager@searchForm" class="contained-search-box">

resources/views/settings/customization.blade.php

@@ -69,42 +69,32 @@
                 </div>
             </div>
 
-            <!-- Primary Color -->
+            <!-- App Color Scheme -->
-            <div class="grid half gap-xl">
-                <div>
-                    <label class="setting-list-label">{{ trans('settings.app_primary_color') }}</label>
-                    <p class="small">{!! trans('settings.app_primary_color_desc') !!}</p>
-                </div>
-                <div component="setting-app-color-picker setting-color-picker"
-                     option:setting-color-picker:default="#206ea7"
-                     option:setting-color-picker:current="{{ setting('app-color') }}"
-                     class="text-m-right pt-xs">
-                    <input refs="setting-color-picker@input setting-app-color-picker@input" type="color" value="{{ setting('app-color') }}" name="setting-app-color" id="setting-app-color" placeholder="#206ea7">
-                    <input refs="setting-app-color-picker@light-input" type="hidden" value="{{ setting('app-color-light') }}" name="setting-app-color-light" id="setting-app-color-light">
-                    <div class="pr-s">
-                        <button refs="setting-color-picker@default-button" type="button" class="text-button text-muted mt-s">{{ trans('common.default') }}</button>
-                        <span class="sep">|</span>
-                        <button refs="setting-color-picker@reset-button" type="button" class="text-button text-muted mt-s">{{ trans('common.reset') }}</button>
-                    </div>
-
-                </div>
-            </div>
-
-            <!-- Entity Color -->
             <div class="pb-l">
-                <div>
+                <div class="mb-l">
-                    <label class="setting-list-label">{{ trans('settings.content_colors') }}</label>
+                    <label class="setting-list-label">{{ trans('settings.color_scheme') }}</label>
-                    <p class="small">{!! trans('settings.content_colors_desc') !!}</p>
+                    <p class="small">{{ trans('settings.color_scheme_desc') }}</p>
                 </div>
-                <div class="grid half pt-m">
+
-                    <div>
+                @php
-                        @include('settings.parts.setting-entity-color-picker', ['type' => 'bookshelf'])
+                    $darkMode = boolval(setting()->getForCurrentUser('dark-mode-enabled'));
-                        @include('settings.parts.setting-entity-color-picker', ['type' => 'book'])
+                @endphp
-                        @include('settings.parts.setting-entity-color-picker', ['type' => 'chapter'])
+                <div component="tabs" class="tab-container">
+                    <div class="nav-tabs controls-card">
+                        <button refs="tabs@toggleLight"
+                                type="button"
+                                class="{{ $darkMode ? '' : 'selected' }} tab-item">@icon('light-mode'){{ trans('common.light_mode') }}</button>
+                        <button refs="tabs@toggleDark"
+                                type="button"
+                                class="{{ $darkMode ? 'selected' : '' }} tab-item">@icon('dark-mode'){{ trans('common.dark_mode') }}</button>
                     </div>
-                    <div>
+                    <div class="sub-card">
-                        @include('settings.parts.setting-entity-color-picker', ['type' => 'page'])
+                        <div refs="tabs@contentLight attachments@list" class="{{ $darkMode ? 'hidden' : '' }} p-m">
-                        @include('settings.parts.setting-entity-color-picker', ['type' => 'page-draft'])
+                            @include('settings.parts.setting-color-scheme', ['mode' => 'light'])
+                        </div>
+                        <div refs="tabs@contentDark" class="{{ $darkMode ? '' : 'hidden' }} p-m">
+                            @include('settings.parts.setting-color-scheme', ['mode' => 'dark'])
+                        </div>
                     </div>
                 </div>
             </div>

resources/views/settings/parts/setting-color-picker.blade.php

@@ -1,12 +1,15 @@
 {{--
-    @type - Name of entity type
+    @type - Name of color setting
 --}}
+@php
+    $keyAppends = ($mode === 'light' ? '' : '-' . $mode);
+@endphp
 <div component="setting-color-picker"
-     option:setting-color-picker:default="{{ config('setting-defaults.'. $type .'-color') }}"
+     option:setting-color-picker:default="{{ config('setting-defaults.'. $type .'-color' . $keyAppends) }}"
-     option:setting-color-picker:current="{{ setting($type .'-color') }}"
+     option:setting-color-picker:current="{{ setting($type .'-color' . $keyAppends) }}"
      class="grid no-break half mb-l">
     <div>
-        <label for="setting-{{ $type }}-color" class="text-dark">{{ trans('settings.'. str_replace('-', '_', $type) .'_color') }}</label>
+        <label for="setting-{{ $type }}-color{{ $keyAppends }}" class="text-dark">{{ trans('settings.'. str_replace('-', '_', $type) .'_color') }}</label>
         <button refs="setting-color-picker@default-button" type="button" class="text-button text-muted">{{ trans('common.default') }}</button>
         <span class="sep">|</span>
         <button refs="setting-color-picker@reset-button" type="button" class="text-button text-muted">{{ trans('common.reset') }}</button>
@@ -14,10 +17,10 @@
     <div>
         <input type="color"
                refs="setting-color-picker@input"
-               value="{{ setting($type .'-color') }}"
+               value="{{ setting($type . '-color' . $keyAppends) }}"
-               name="setting-{{ $type }}-color"
+               name="setting-{{ $type }}-color{{ $keyAppends }}"
-               id="setting-{{ $type }}-color"
+               id="setting-{{ $type }}-color{{ $keyAppends }}"
-               placeholder="{{ config('setting-defaults.'. $type .'-color') }}"
+               placeholder="{{ config('setting-defaults.'. $type .'-color' . $keyAppends) }}"
                class="small">
     </div>
 </div>

resources/views/settings/parts/setting-color-scheme.blade.php

@@ -0,0 +1,25 @@
+{{--
+    @mode - 'light' or 'dark'.
+--}}
+<p class="small">{{ trans('settings.ui_colors_desc') }}</p>
+<div class="grid half pt-m">
+    <div>
+        @include('settings.parts.setting-color-picker', ['type' => 'app', 'mode' => $mode])
+    </div>
+    <div>
+        @include('settings.parts.setting-color-picker', ['type' => 'link', 'mode' => $mode])
+    </div>
+</div>
+<hr>
+<p class="small">{!! trans('settings.content_colors_desc') !!}</p>
+<div class="grid half pt-m">
+    <div>
+        @include('settings.parts.setting-color-picker', ['type' => 'bookshelf', 'mode' => $mode])
+        @include('settings.parts.setting-color-picker', ['type' => 'book', 'mode' => $mode])
+        @include('settings.parts.setting-color-picker', ['type' => 'chapter', 'mode' => $mode])
+    </div>
+    <div>
+        @include('settings.parts.setting-color-picker', ['type' => 'page', 'mode' => $mode])
+        @include('settings.parts.setting-color-picker', ['type' => 'page-draft', 'mode' => $mode])
+    </div>
+</div>