Also added link color option, not yet used.
Cleaned up tabbed interface control design as part of this.
'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',
'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',
'app_disable_comments_desc' => 'Disables comments across all pages in the application. <br> Existing comments are not shown.',
// Color settings
- 'content_colors' => 'Content Colors',
- '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' => 'Application Color Scheme',
+ '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',
}
}
+.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 {
.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 {
- padding: $-m;
+ .tab-item {
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 {
- border-right: 0;
+ &:hover, &:focus {
+ @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;
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">
</div>
</div>
- <!-- Primary Color -->
- <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 -->
+ <!-- App Color Scheme -->
<div class="pb-l">
- <div>
- <label class="setting-list-label">{{ trans('settings.content_colors') }}</label>
- <p class="small">{!! trans('settings.content_colors_desc') !!}</p>
+ <div class="mb-l">
+ <label class="setting-list-label">{{ trans('settings.color_scheme') }}</label>
+ <p class="small">{{ trans('settings.color_scheme_desc') }}</p>
</div>
- <div class="grid half pt-m">
- <div>
- @include('settings.parts.setting-entity-color-picker', ['type' => 'bookshelf'])
- @include('settings.parts.setting-entity-color-picker', ['type' => 'book'])
- @include('settings.parts.setting-entity-color-picker', ['type' => 'chapter'])
+
+ @php
+ $darkMode = boolval(setting()->getForCurrentUser('dark-mode-enabled'));
+ @endphp
+ <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>
- @include('settings.parts.setting-entity-color-picker', ['type' => 'page'])
- @include('settings.parts.setting-entity-color-picker', ['type' => 'page-draft'])
+ <div class="sub-card">
+ <div refs="tabs@contentLight attachments@list" class="{{ $darkMode ? 'hidden' : '' }} p-m">
+ @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>
{{--
- @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:current="{{ setting($type .'-color') }}"
+ option:setting-color-picker:default="{{ config('setting-defaults.'. $type .'-color' . $keyAppends) }}"
+ 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>
<div>
<input type="color"
refs="setting-color-picker@input"
- value="{{ setting($type .'-color') }}"
- name="setting-{{ $type }}-color"
- id="setting-{{ $type }}-color"
- placeholder="{{ config('setting-defaults.'. $type .'-color') }}"
+ value="{{ setting($type . '-color' . $keyAppends) }}"
+ name="setting-{{ $type }}-color{{ $keyAppends }}"
+ id="setting-{{ $type }}-color{{ $keyAppends }}"
+ placeholder="{{ config('setting-defaults.'. $type .'-color' . $keyAppends) }}"
class="small">
</div>
</div>
--- /dev/null
+{{--
+ @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>
\ No newline at end of file
projects / bookstack / commitdiff