diff --git a/app/Config/setting-defaults.php b/app/Config/setting-defaults.php
index c6080df1d..d84c0c264 100644
--- a/app/Config/setting-defaults.php
+++ b/app/Config/setting-defaults.php
@@ -16,6 +16,11 @@ return [
'app-editor' => 'wysiwyg',
'app-color' => '#206ea7',
'app-color-light' => 'rgba(32,110,167,0.15)',
+ 'bookshelf-color' => '#a94747',
+ 'book-color' => '#077b70',
+ 'chapter-color' => '#af4d0d',
+ 'page-color' => '#206ea7',
+ 'page-draft-color' => '#7e50b1',
'app-custom-head' => false,
'registration-enabled' => false,
diff --git a/resources/js/components/index.js b/resources/js/components/index.js
index 14cf08ae2..bbe059898 100644
--- a/resources/js/components/index.js
+++ b/resources/js/components/index.js
@@ -26,6 +26,7 @@ import permissionsTable from "./permissions-table";
import customCheckbox from "./custom-checkbox";
import bookSort from "./book-sort";
import settingAppColorPicker from "./setting-app-color-picker";
+import settingColorPicker from "./setting-color-picker";
import entityPermissionsEditor from "./entity-permissions-editor";
import templateManager from "./template-manager";
import newUserPassword from "./new-user-password";
@@ -59,6 +60,7 @@ const componentMapping = {
'custom-checkbox': customCheckbox,
'book-sort': bookSort,
'setting-app-color-picker': settingAppColorPicker,
+ 'setting-color-picker': settingColorPicker,
'entity-permissions-editor': entityPermissionsEditor,
'template-manager': templateManager,
'new-user-password': newUserPassword,
diff --git a/resources/js/components/setting-app-color-picker.js b/resources/js/components/setting-app-color-picker.js
index 6c0c0b31d..02512e109 100644
--- a/resources/js/components/setting-app-color-picker.js
+++ b/resources/js/components/setting-app-color-picker.js
@@ -6,11 +6,16 @@ class SettingAppColorPicker {
this.colorInput = elem.querySelector('input[type=color]');
this.lightColorInput = elem.querySelector('input[name="setting-app-color-light"]');
this.resetButton = elem.querySelector('[setting-app-color-picker-reset]');
+ this.defaultButton = elem.querySelector('[setting-app-color-picker-default]')
this.colorInput.addEventListener('change', this.updateColor.bind(this));
this.colorInput.addEventListener('input', this.updateColor.bind(this));
this.resetButton.addEventListener('click', event => {
- this.colorInput.value = '#206ea7';
+ this.colorInput.value = this.colorInput.dataset.current;
+ this.updateColor();
+ });
+ this.defaultButton.addEventListener('click', event => {
+ this.colorInput.value = this.colorInput.dataset.default;
this.updateColor();
});
}
@@ -53,4 +58,4 @@ class SettingAppColorPicker {
}
-export default SettingAppColorPicker;
\ No newline at end of file
+export default SettingAppColorPicker;
diff --git a/resources/js/components/setting-color-picker.js b/resources/js/components/setting-color-picker.js
new file mode 100644
index 000000000..4d8ce0f93
--- /dev/null
+++ b/resources/js/components/setting-color-picker.js
@@ -0,0 +1,18 @@
+
+class SettingColorPicker {
+
+ constructor(elem) {
+ this.elem = elem;
+ this.colorInput = elem.querySelector('input[type=color]');
+ this.resetButton = elem.querySelector('[setting-color-picker-reset]');
+ this.defaultButton = elem.querySelector('[setting-color-picker-default]');
+ this.resetButton.addEventListener('click', event => {
+ this.colorInput.value = this.colorInput.dataset.current;
+ });
+ this.defaultButton.addEventListener('click', event => {
+ this.colorInput.value = this.colorInput.dataset.default;
+ });
+ }
+}
+
+export default SettingColorPicker;
diff --git a/resources/lang/en/settings.php b/resources/lang/en/settings.php
index 56e0868e4..efb849077 100755
--- a/resources/lang/en/settings.php
+++ b/resources/lang/en/settings.php
@@ -33,7 +33,7 @@ return [
'app_logo' => 'Application Logo',
'app_logo_desc' => 'This image should be 43px in height.
Large images will be scaled down.',
'app_primary_color' => 'Application Primary Color',
- 'app_primary_color_desc' => 'This should be a hex value.
Leave empty to reset to the default 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',
@@ -41,6 +41,19 @@ return [
'app_disable_comments_toggle' => 'Disable comments',
'app_disable_comments_desc' => 'Disables comments across all pages in the application.
Existing comments are not shown.',
+ // Color settings
+ 'bookshelf_color' => 'Shelf Color',
+ 'bookshelf_color_desc' => 'Sets the color indicator for shelves.',
+ 'book_color' => 'Book Color',
+ 'book_color_desc' => 'Sets the color indicator for books.',
+ 'chapter_color' => 'Chapter Color',
+ 'chapter_color_desc' => 'Sets the color indicator for chapters.',
+ 'page_color' => 'Page Color',
+ 'page_color_desc' => 'Sets the color indicator for pages.',
+ 'page_draft_color' => 'Page Draft Color',
+ 'page_draft_color_desc' => 'Sets the color indicator for page drafts.',
+
+
// Registration Settings
'reg_settings' => 'Registration',
'reg_enable' => 'Enable Registration',
diff --git a/resources/views/partials/custom-styles.blade.php b/resources/views/partials/custom-styles.blade.php
index 908079082..f81939109 100644
--- a/resources/views/partials/custom-styles.blade.php
+++ b/resources/views/partials/custom-styles.blade.php
@@ -2,5 +2,10 @@
:root {
--color-primary: {{ setting('app-color') }};
--color-primary-light: {{ setting('app-color-light') }};
+ --color-bookshelf: {{ setting('bookshelf-color')}};
+ --color-book: {{ setting('book-color')}};
+ --color-chapter: {{ setting('chapter-color')}};
+ --color-page: {{ setting('page-color')}};
+ --color-page-draft: {{ setting('page-draft-color')}};
}
-
\ No newline at end of file
+
diff --git a/resources/views/settings/index.blade.php b/resources/views/settings/index.blade.php
index a52774186..4da1d90b0 100644
--- a/resources/views/settings/index.blade.php
+++ b/resources/views/settings/index.blade.php
@@ -130,19 +130,97 @@
+
{!! trans('settings.app_primary_color_desc') !!}
{!! trans('settings.bookshelf_color_desc') !!}
+{!! trans('settings.book_color_desc') !!}
+{!! trans('settings.chapter_color_desc') !!}
+{!! trans('settings.page_color_desc') !!}
+{!! trans('settings.page_draft_color_desc') !!}
+