diff --git a/app/Config/setting-defaults.php b/app/Config/setting-defaults.php
index 5e1e4348a..88c4612ca 100644
--- a/app/Config/setting-defaults.php
+++ b/app/Config/setting-defaults.php
@@ -16,11 +16,20 @@ 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',
'page-color' => '#206ea7',
'page-draft-color' => '#7e50b1',
+ 'app-color-dark' => '#195785',
+ 'app-color-light-dark' => 'rgba(32,110,167,0.15)',
+ 'link-color-dark' => '#429fe3',
+ 'bookshelf-color-dark' => '#ff5454',
+ 'book-color-dark' => '#389f60',
+ 'chapter-color-dark' => '#ee7a2d',
+ 'page-color-dark' => '#429fe3',
+ 'page-draft-color-dark' => '#a66ce8',
'app-custom-head' => false,
'registration-enabled' => false,
diff --git a/database/migrations/2023_01_28_141230_copy_color_settings_for_dark_mode.php b/database/migrations/2023_01_28_141230_copy_color_settings_for_dark_mode.php
new file mode 100644
index 000000000..eb779fc7b
--- /dev/null
+++ b/database/migrations/2023_01_28_141230_copy_color_settings_for_dark_mode.php
@@ -0,0 +1,69 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Support\Facades\DB;
+
+class CopyColorSettingsForDarkMode extends Migration
+{
+ /**
+ * Run the migrations.
+ *
+ * @return void
+ */
+ public function up()
+ {
+ $colorSettings = [
+ 'app-color',
+ 'app-color-light',
+ 'bookshelf-color',
+ 'book-color',
+ 'chapter-color',
+ 'page-color',
+ 'page-draft-color',
+ ];
+
+ $existing = DB::table('settings')
+ ->whereIn('setting_key', $colorSettings)
+ ->get()->toArray();
+
+ $newData = [];
+ foreach ($existing as $setting) {
+ $newSetting = (array) $setting;
+ $newSetting['setting_key'] .= '-dark';
+ $newData[] = $newSetting;
+
+ if ($newSetting['setting_key'] === 'app-color-dark') {
+ $newSetting['setting_key'] = 'link-color';
+ $newData[] = $newSetting;
+ $newSetting['setting_key'] = 'link-color-dark';
+ $newData[] = $newSetting;
+ }
+ }
+
+ DB::table('settings')->insert($newData);
+ }
+
+ /**
+ * Reverse the migrations.
+ *
+ * @return void
+ */
+ public function down()
+ {
+ $colorSettings = [
+ 'app-color-dark',
+ 'link-color',
+ 'link-color-dark',
+ 'app-color-light-dark',
+ 'bookshelf-color-dark',
+ 'book-color-dark',
+ 'chapter-color-dark',
+ 'page-color-dark',
+ 'page-draft-color-dark',
+ ];
+
+ DB::table('settings')
+ ->whereIn('setting_key', $colorSettings)
+ ->delete();
+ }
+}
diff --git a/resources/js/components/attachments.js b/resources/js/components/attachments.js
index b4e400aeb..d8a506270 100644
--- a/resources/js/components/attachments.js
+++ b/resources/js/components/attachments.js
@@ -45,7 +45,7 @@ export class Attachments extends Component {
this.stopEdit();
/** @var {Tabs} */
const tabs = window.$components.firstOnElement(this.mainTabs, 'tabs');
- tabs.show('items');
+ tabs.show('attachment-panel-items');
window.$http.get(`/attachments/get/page/${this.pageId}`).then(resp => {
this.list.innerHTML = resp.data;
window.$components.init(this.list);
diff --git a/resources/js/components/image-manager.js b/resources/js/components/image-manager.js
index a44fffc1b..418b7c98a 100644
--- a/resources/js/components/image-manager.js
+++ b/resources/js/components/image-manager.js
@@ -140,10 +140,9 @@ export class ImageManager extends Component {
}
setActiveFilterTab(filterName) {
- this.filterTabs.forEach(t => t.classList.remove('selected'));
- const activeTab = this.filterTabs.find(t => t.dataset.filter === filterName);
- if (activeTab) {
- activeTab.classList.add('selected');
+ for (const tab of this.filterTabs) {
+ const selected = tab.dataset.filter === filterName;
+ tab.setAttribute('aria-selected', selected ? 'true' : 'false');
}
}
diff --git a/resources/js/components/index.js b/resources/js/components/index.js
index 27bce48db..82136184b 100644
--- a/resources/js/components/index.js
+++ b/resources/js/components/index.js
@@ -41,7 +41,7 @@ export {PagePicker} from "./page-picker.js"
export {PermissionsTable} from "./permissions-table.js"
export {Pointer} from "./pointer.js"
export {Popup} from "./popup.js"
-export {SettingAppColorPicker} from "./setting-app-color-picker.js"
+export {SettingAppColorScheme} from "./setting-app-color-scheme.js"
export {SettingColorPicker} from "./setting-color-picker.js"
export {SettingHomepageControl} from "./setting-homepage-control.js"
export {ShelfSort} from "./shelf-sort.js"
diff --git a/resources/js/components/setting-app-color-picker.js b/resources/js/components/setting-app-color-picker.js
deleted file mode 100644
index 68e5abce5..000000000
--- a/resources/js/components/setting-app-color-picker.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import {Component} from "./component";
-
-export class SettingAppColorPicker extends Component {
-
- setup() {
- this.colorInput = this.$refs.input;
- this.lightColorInput = this.$refs.lightInput;
-
- this.colorInput.addEventListener('change', this.updateColor.bind(this));
- this.colorInput.addEventListener('input', this.updateColor.bind(this));
- }
-
- /**
- * Update the app colors as a preview, and create a light version of the color.
- */
- updateColor() {
- const hexVal = this.colorInput.value;
- const rgb = this.hexToRgb(hexVal);
- const rgbLightVal = 'rgba('+ [rgb.r, rgb.g, rgb.b, '0.15'].join(',') +')';
-
- this.lightColorInput.value = rgbLightVal;
-
- const customStyles = document.getElementById('custom-styles');
- const oldColor = customStyles.getAttribute('data-color');
- const oldColorLight = customStyles.getAttribute('data-color-light');
-
- customStyles.innerHTML = customStyles.innerHTML.split(oldColor).join(hexVal);
- customStyles.innerHTML = customStyles.innerHTML.split(oldColorLight).join(rgbLightVal);
-
- customStyles.setAttribute('data-color', hexVal);
- customStyles.setAttribute('data-color-light', rgbLightVal);
- }
-
- /**
- * Covert a hex color code to rgb components.
- * @attribution https://stackoverflow.com/a/5624139
- * @param {String} hex
- * @returns {{r: Number, g: Number, b: Number}}
- */
- hexToRgb(hex) {
- const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
- return {
- r: result ? parseInt(result[1], 16) : 0,
- g: result ? parseInt(result[2], 16) : 0,
- b: result ? parseInt(result[3], 16) : 0
- };
- }
-
-}
diff --git a/resources/js/components/setting-app-color-scheme.js b/resources/js/components/setting-app-color-scheme.js
new file mode 100644
index 000000000..71b14badc
--- /dev/null
+++ b/resources/js/components/setting-app-color-scheme.js
@@ -0,0 +1,82 @@
+import {Component} from "./component";
+
+export class SettingAppColorScheme extends Component {
+
+ setup() {
+ this.container = this.$el;
+ this.mode = this.$opts.mode;
+ this.lightContainer = this.$refs.lightContainer;
+ this.darkContainer = this.$refs.darkContainer;
+
+ this.container.addEventListener('tabs-change', event => {
+ const panel = event.detail.showing;
+ const newMode = (panel === 'color-scheme-panel-light') ? 'light' : 'dark';
+ this.handleModeChange(newMode);
+ });
+
+ const onInputChange = (event) => {
+ this.updateAppColorsFromInputs();
+
+ if (event.target.name.startsWith('setting-app-color')) {
+ this.updateLightForInput(event.target);
+ }
+ };
+ this.container.addEventListener('change', onInputChange);
+ this.container.addEventListener('input', onInputChange);
+ }
+
+ handleModeChange(newMode) {
+ this.mode = newMode;
+ const isDark = (newMode === 'dark');
+
+ document.documentElement.classList.toggle('dark-mode', isDark);
+ this.updateAppColorsFromInputs();
+ }
+
+ updateAppColorsFromInputs() {
+ const inputContainer = this.mode === 'dark' ? this.darkContainer : this.lightContainer;
+ const inputs = inputContainer.querySelectorAll('input[type="color"]');
+ for (const input of inputs) {
+ const splitName = input.name.split('-');
+ const colorPos = splitName.indexOf('color');
+ let cssId = splitName.slice(1, colorPos).join('-');
+ if (cssId === 'app') {
+ cssId = 'primary';
+ }
+
+ const varName = '--color-' + cssId;
+ document.body.style.setProperty(varName, input.value);
+ }
+ }
+
+ /**
+ * Update the 'light' app color variant for the given input.
+ * @param {HTMLInputElement} input
+ */
+ updateLightForInput(input) {
+ const lightName = input.name.replace('-color', '-color-light');
+ const hexVal = input.value;
+ const rgb = this.hexToRgb(hexVal);
+ const rgbLightVal = 'rgba('+ [rgb.r, rgb.g, rgb.b, '0.15'].join(',') +')';
+
+ console.log(input.name, lightName, hexVal, rgbLightVal)
+ const lightColorInput = this.container.querySelector(`input[name="${lightName}"][type="hidden"]`);
+ lightColorInput.value = rgbLightVal;
+ }
+
+ /**
+ * Covert a hex color code to rgb components.
+ * @attribution https://stackoverflow.com/a/5624139
+ * @param {String} hex
+ * @returns {{r: Number, g: Number, b: Number}}
+ */
+ hexToRgb(hex) {
+ const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+ return {
+ r: result ? parseInt(result[1], 16) : 0,
+ g: result ? parseInt(result[2], 16) : 0,
+ b: result ? parseInt(result[3], 16) : 0
+ };
+ }
+
+}
diff --git a/resources/js/components/setting-color-picker.js b/resources/js/components/setting-color-picker.js
index 876e14f20..bfb2c93ce 100644
--- a/resources/js/components/setting-color-picker.js
+++ b/resources/js/components/setting-color-picker.js
@@ -15,6 +15,6 @@ export class SettingColorPicker extends Component {
setValue(value) {
this.colorInput.value = value;
- this.colorInput.dispatchEvent(new Event('change'));
+ this.colorInput.dispatchEvent(new Event('change', {bubbles: true}));
}
}
\ No newline at end of file
diff --git a/resources/js/components/tabs.js b/resources/js/components/tabs.js
index 46063d240..8d22e3e9b 100644
--- a/resources/js/components/tabs.js
+++ b/resources/js/components/tabs.js
@@ -1,49 +1,49 @@
-import {onSelect} from "../services/dom";
import {Component} from "./component";
/**
* Tabs
- * Works by matching 'tabToggle<Key>' with 'tabContent<Key>' sections.
+ * Uses accessible attributes to drive its functionality.
+ * On tab wrapping element:
+ * - role=tablist
+ * On tabs (Should be a button):
+ * - id
+ * - role=tab
+ * - aria-selected=true/false
+ * - aria-controls=<id-of-panel-section>
+ * On panels:
+ * - id
+ * - tabindex=0
+ * - role=tabpanel
+ * - aria-labelledby=<id-of-tab-for-panel>
+ * - hidden (If not shown by default).
*/
export class Tabs extends Component {
setup() {
- this.tabContentsByName = {};
- this.tabButtonsByName = {};
- this.allContents = [];
- this.allButtons = [];
+ this.container = this.$el;
+ this.tabs = Array.from(this.container.querySelectorAll('[role="tab"]'));
+ this.panels = Array.from(this.container.querySelectorAll('[role="tabpanel"]'));
- for (const [key, elems] of Object.entries(this.$manyRefs || {})) {
- if (key.startsWith('toggle')) {
- const cleanKey = key.replace('toggle', '').toLowerCase();
- onSelect(elems, e => this.show(cleanKey));
- this.allButtons.push(...elems);
- this.tabButtonsByName[cleanKey] = elems;
+ this.container.addEventListener('click', event => {
+ const button = event.target.closest('[role="tab"]');
+ if (button) {
+ this.show(button.getAttribute('aria-controls'));
}
- if (key.startsWith('content')) {
- const cleanKey = key.replace('content', '').toLowerCase();
- this.tabContentsByName[cleanKey] = elems;
- this.allContents.push(...elems);
- }
- }
+ });
}
- show(key) {
- this.allContents.forEach(c => {
- c.classList.add('hidden');
- c.classList.remove('selected');
- });
- this.allButtons.forEach(b => b.classList.remove('selected'));
-
- const contents = this.tabContentsByName[key] || [];
- const buttons = this.tabButtonsByName[key] || [];
- if (contents.length > 0) {
- contents.forEach(c => {
- c.classList.remove('hidden')
- c.classList.add('selected')
- });
- buttons.forEach(b => b.classList.add('selected'));
+ show(sectionId) {
+ for (const panel of this.panels) {
+ panel.toggleAttribute('hidden', panel.id !== sectionId);
}
+
+ for (const tab of this.tabs) {
+ const tabSection = tab.getAttribute('aria-controls');
+ const selected = tabSection === sectionId;
+ tab.setAttribute('aria-selected', selected ? 'true' : 'false');
+ }
+
+ this.$emit('change', {showing: sectionId});
}
}
\ No newline at end of file
diff --git a/resources/js/services/util.js b/resources/js/services/util.js
index 1a56ebf6c..238f8b1d8 100644
--- a/resources/js/services/util.js
+++ b/resources/js/services/util.js
@@ -34,7 +34,7 @@ export function scrollAndHighlightElement(element) {
if (!element) return;
element.scrollIntoView({behavior: 'smooth'});
- const color = document.getElementById('custom-styles').getAttribute('data-color-light');
+ const color = getComputedStyle(document.body).getPropertyValue('--color-primary-light');
const initColor = window.getComputedStyle(element).getPropertyValue('background-color');
element.style.backgroundColor = color;
setTimeout(() => {
diff --git a/resources/lang/en/settings.php b/resources/lang/en/settings.php
index 023cf1beb..6f4376d42 100755
--- a/resources/lang/en/settings.php
+++ b/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',
- '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 modes to best fit the theme and ensure legibility.',
+ 'ui_colors_desc' => 'Set the primary color and default link color for BookStack. The primary color is mainly used for the header banner, buttons and interface decorations. The default link color is used for text-based links and actions, both within written content and in the Bookstack interface.',
+ 'app_color' => 'Primary Color',
+ 'link_color' => 'Default 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',
diff --git a/resources/sass/_blocks.scss b/resources/sass/_blocks.scss
index 2794dd954..1d9bfc272 100644
--- a/resources/sass/_blocks.scss
+++ b/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 {
diff --git a/resources/sass/_buttons.scss b/resources/sass/_buttons.scss
index fb3af06e8..3c6775ad5 100644
--- a/resources/sass/_buttons.scss
+++ b/resources/sass/_buttons.scss
@@ -25,7 +25,6 @@ button {
text-transform: uppercase;
border: 1px solid var(--color-primary);
vertical-align: top;
- @include lightDark(filter, none, saturate(0.8) brightness(0.8));
&:hover, &:focus, &:active {
background-color: var(--color-primary);
text-decoration: none;
@@ -85,10 +84,7 @@ button {
user-select: none;
font-size: 0.75rem;
line-height: 1.4em;
- color: var(--color-primary);
- @include whenDark {
- color: #AAA;
- }
+ color: var(--color-link);
&:active {
outline: 0;
}
@@ -96,8 +92,8 @@ button {
text-decoration: none;
}
&:hover, &:focus {
- color: var(--color-primary);
- fill: var(--color-primary);
+ color: var(--color-link);
+ fill: var(--color-link);
}
}
.text-button.hover-underline:hover {
diff --git a/resources/sass/_colors.scss b/resources/sass/_colors.scss
index c51f01659..aff9ff6d0 100644
--- a/resources/sass/_colors.scss
+++ b/resources/sass/_colors.scss
@@ -9,11 +9,14 @@
background-color: var(--color-primary-light);
@include whenDark {
background: #000;
- .text-primary {
+ .text-link {
color: #AAA !important;
}
}
}
+.link-background {
+ background-color: var(--color-link) !important;
+}
/*
* Status text colors
@@ -41,6 +44,11 @@
fill: var(--color-primary) !important;
}
+.text-link, .text-link:hover, .text-link-hover:hover {
+ color: var(--color-link) !important;
+ fill: var(--color-link) !important;
+}
+
.text-muted {
@include lightDark(color, #575757, #888888, true);
fill: currentColor !important;
diff --git a/resources/sass/_components.scss b/resources/sass/_components.scss
index ab1d506c7..2150f6d07 100644
--- a/resources/sass/_components.scss
+++ b/resources/sass/_components.scss
@@ -607,36 +607,37 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
}
-.tab-container .nav-tabs {
+.tab-container [role="tablist"] {
+ 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;
- display: inline-block;
- @include lightDark(color, #666, #999);
- cursor: pointer;
- border-right: 1px solid rgba(0, 0, 0, 0.1);
- border-bottom: 2px solid transparent;
- &.selected {
- border-bottom: 2px solid var(--color-primary);
- }
- &:last-child {
- border-right: 0;
- }
+.tab-container [role="tablist"] button[role="tab"],
+.image-manager [role="tablist"] button[role="tab"] {
+ display: inline-block;
+ padding: $-s;
+ @include lightDark(color, rgba(0, 0, 0, .5), rgba(255, 255, 255, .5));
+ cursor: pointer;
+ border-bottom: 2px solid transparent;
+ margin-bottom: -1px;
+ &[aria-selected="true"] {
+ color: var(--color-link) !important;
+ border-bottom-color: var(--color-link) !important;
}
+ &: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));
+ }
+}
+.tab-container [role="tablist"].controls-card {
+ margin-bottom: 0;
+ border-bottom: 0;
+ padding: 0 $-xs;
}
.image-picker .none {
diff --git a/resources/sass/_forms.scss b/resources/sass/_forms.scss
index ef14f6221..b7fc52f7d 100644
--- a/resources/sass/_forms.scss
+++ b/resources/sass/_forms.scss
@@ -258,7 +258,6 @@ input[type=color] {
border-radius: 2px;
display: inline-block;
border: 2px solid currentColor;
- opacity: 0.6;
overflow: hidden;
fill: currentColor;
.svg-icon {
diff --git a/resources/sass/_header.scss b/resources/sass/_header.scss
index aa560e8e0..c1b6af4c6 100644
--- a/resources/sass/_header.scss
+++ b/resources/sass/_header.scss
@@ -22,9 +22,6 @@ header {
border-bottom: 1px solid #DDD;
box-shadow: $bs-card;
@include lightDark(border-bottom-color, #DDD, #000);
- @include whenDark {
- filter: saturate(0.8) brightness(0.8);
- }
.header-links {
display: flex;
align-items: center;
diff --git a/resources/sass/_layout.scss b/resources/sass/_layout.scss
index 3fc419046..19333faf7 100644
--- a/resources/sass/_layout.scss
+++ b/resources/sass/_layout.scss
@@ -433,7 +433,7 @@ body.flexbox {
display: none;
}
.tri-layout-left-contents > *, .tri-layout-right-contents > * {
- @include lightDark(opacity, 0.6, 0.7);
+ @include lightDark(opacity, 0.6, 0.75);
transition: opacity ease-in-out 120ms;
&:hover, &:focus-within {
opacity: 1 !important;
@@ -442,7 +442,6 @@ body.flexbox {
opacity: 1 !important;
}
}
-
}
@include smaller-than($m) {
diff --git a/resources/sass/_text.scss b/resources/sass/_text.scss
index 6c68bd12b..edf8ce614 100644
--- a/resources/sass/_text.scss
+++ b/resources/sass/_text.scss
@@ -90,7 +90,7 @@ h2.list-heading {
* Link styling
*/
a {
- color: var(--color-primary);
+ color: var(--color-link);
fill: currentColor;
cursor: pointer;
text-decoration: none;
@@ -107,7 +107,7 @@ a {
display: inline-block;
}
&:focus img:only-child {
- outline: 2px dashed var(--color-primary);
+ outline: 2px dashed var(--color-link);
outline-offset: 2px;
}
}
diff --git a/resources/sass/_variables.scss b/resources/sass/_variables.scss
index e1242bdda..aac9223f9 100644
--- a/resources/sass/_variables.scss
+++ b/resources/sass/_variables.scss
@@ -39,6 +39,7 @@ $fs-s: 12px;
:root {
--color-primary: #206ea7;
--color-primary-light: rgba(32,110,167,0.15);
+ --color-link: #206ea7;
--color-page: #206ea7;
--color-page-draft: #7e50b1;
diff --git a/resources/sass/styles.scss b/resources/sass/styles.scss
index e50a2f96a..668cb5c85 100644
--- a/resources/sass/styles.scss
+++ b/resources/sass/styles.scss
@@ -113,7 +113,7 @@ $loadingSize: 10px;
&:focus {
top: $-xl;
outline-offset: -10px;
- outline: 2px dotted var(--color-primary);
+ outline: 2px dotted var(--color-link);
}
}
diff --git a/resources/views/attachments/manager-list.blade.php b/resources/views/attachments/manager-list.blade.php
index ebb1c24aa..f1dfe2b82 100644
--- a/resources/views/attachments/manager-list.blade.php
+++ b/resources/views/attachments/manager-list.blade.php
@@ -14,13 +14,13 @@
option:event-emit-select:name="insert"
type="button"
title="{{ trans('entities.attachments_insert_link') }}"
- class="drag-card-action text-center text-primary">@icon('link') </button>
+ class="drag-card-action text-center text-link">@icon('link') </button>
<button component="event-emit-select"
option:event-emit-select:name="edit"
option:event-emit-select:id="{{ $attachment->id }}"
type="button"
title="{{ trans('common.edit') }}"
- class="drag-card-action text-center text-primary">@icon('edit')</button>
+ class="drag-card-action text-center text-link">@icon('edit')</button>
<div component="dropdown" class="flex-fill relative">
<button refs="dropdown@toggle"
type="button"
@@ -28,7 +28,7 @@
class="drag-card-action text-center text-neg">@icon('close')</button>
<div refs="dropdown@menu" class="dropdown-menu">
<p class="text-neg small px-m mb-xs">{{ trans('entities.attachments_delete') }}</p>
- <button refs="ajax-delete-row@delete" type="button" class="text-primary small delete text-item">{{ trans('common.confirm') }}</button>
+ <button refs="ajax-delete-row@delete" type="button" class="text-link small delete text-item">{{ trans('common.confirm') }}</button>
</div>
</div>
</div>
diff --git a/resources/views/attachments/manager.blade.php b/resources/views/attachments/manager.blade.php
index 724ca9c8e..7d14d00e7 100644
--- a/resources/views/attachments/manager.blade.php
+++ b/resources/views/attachments/manager.blade.php
@@ -9,25 +9,54 @@
<div class="px-l files">
<div refs="attachments@listContainer">
- <p class="text-muted small">{{ trans('entities.attachments_explain') }} <span class="text-warn">{{ trans('entities.attachments_explain_instant_save') }}</span></p>
+ <p class="text-muted small">{{ trans('entities.attachments_explain') }} <span
+ class="text-warn">{{ trans('entities.attachments_explain_instant_save') }}</span></p>
<div component="tabs" refs="attachments@mainTabs" class="tab-container">
- <div class="nav-tabs">
- <button refs="tabs@toggleItems" type="button" class="selected tab-item">{{ trans('entities.attachments_items') }}</button>
- <button refs="tabs@toggleUpload" type="button" class="tab-item">{{ trans('entities.attachments_upload') }}</button>
- <button refs="tabs@toggleLinks" type="button" class="tab-item">{{ trans('entities.attachments_link') }}</button>
+ <div role="tablist">
+ <button id="attachment-tab-items"
+ role="tab"
+ aria-selected="true"
+ aria-controls="attachment-panel-items"
+ type="button"
+ class="tab-item">{{ trans('entities.attachments_items') }}</button>
+ <button id="attachment-tab-upload"
+ role="tab"
+ aria-selected="false"
+ aria-controls="attachment-panel-upload"
+ type="button"
+ class="tab-item">{{ trans('entities.attachments_upload') }}</button>
+ <button id="attachment-tab-links"
+ role="tab"
+ aria-selected="false"
+ aria-controls="attachment-panel-links"
+ type="button"
+ class="tab-item">{{ trans('entities.attachments_link') }}</button>
</div>
- <div refs="tabs@contentItems attachments@list">
+ <div id="attachment-panel-items"
+ tabindex="0"
+ role="tabpanel"
+ aria-labelledby="attachment-tab-items"
+ refs="attachments@list">
@include('attachments.manager-list', ['attachments' => $page->attachments->all()])
</div>
- <div refs="tabs@contentUpload" class="hidden">
+ <div id="attachment-panel-upload"
+ tabindex="0"
+ role="tabpanel"
+ hidden
+ aria-labelledby="attachment-tab-upload">
@include('form.dropzone', [
'placeholder' => trans('entities.attachments_dropzone'),
'url' => url('/attachments/upload?uploaded_to=' . $page->id),
'successMessage' => trans('entities.attachments_file_uploaded'),
])
</div>
- <div refs="tabs@contentLinks" class="hidden link-form-container">
+ <div id="attachment-panel-links"
+ tabindex="0"
+ role="tabpanel"
+ hidden
+ aria-labelledby="attachment-tab-links"
+ class="link-form-container">
@include('attachments.manager-link-form', ['pageId' => $page->id])
</div>
</div>
diff --git a/resources/views/books/index.blade.php b/resources/views/books/index.blade.php
index dc51a3a80..bf9795b3a 100644
--- a/resources/views/books/index.blade.php
+++ b/resources/views/books/index.blade.php
@@ -35,7 +35,7 @@
<div class="actions mb-xl">
<h5>{{ trans('common.actions') }}</h5>
- <div class="icon-list text-primary">
+ <div class="icon-list text-link">
@if(user()->can('book-create-all'))
<a href="{{ url("/create-book") }}" data-shortcut="new" class="icon-list-item">
<span>@icon('add')</span>
diff --git a/resources/views/books/parts/convert-to-shelf.blade.php b/resources/views/books/parts/convert-to-shelf.blade.php
index dde60aac0..2e52b310b 100644
--- a/resources/views/books/parts/convert-to-shelf.blade.php
+++ b/resources/views/books/parts/convert-to-shelf.blade.php
@@ -17,7 +17,7 @@
<li>
<form action="{{ $book->getUrl('/convert-to-shelf') }}" method="POST">
{!! csrf_field() !!}
- <button type="submit" class="text-primary text-item">{{ trans('common.confirm') }}</button>
+ <button type="submit" class="text-link text-item">{{ trans('common.confirm') }}</button>
</form>
</li>
</ul>
diff --git a/resources/views/books/parts/form.blade.php b/resources/views/books/parts/form.blade.php
index e893bcead..56d385c9e 100644
--- a/resources/views/books/parts/form.blade.php
+++ b/resources/views/books/parts/form.blade.php
@@ -11,7 +11,7 @@
</div>
<div class="form-group collapsible" component="collapsible" id="logo-control">
- <button refs="collapsible@trigger" type="button" class="collapse-title text-primary" aria-expanded="false">
+ <button refs="collapsible@trigger" type="button" class="collapse-title text-link" aria-expanded="false">
<label>{{ trans('common.cover_image') }}</label>
</button>
<div refs="collapsible@content" class="collapse-content">
@@ -27,7 +27,7 @@
</div>
<div class="form-group collapsible" component="collapsible" id="tags-control">
- <button refs="collapsible@trigger" type="button" class="collapse-title text-primary" aria-expanded="false">
+ <button refs="collapsible@trigger" type="button" class="collapse-title text-link" aria-expanded="false">
<label for="tag-manager">{{ trans('entities.book_tags') }}</label>
</button>
<div refs="collapsible@content" class="collapse-content">
diff --git a/resources/views/books/show.blade.php b/resources/views/books/show.blade.php
index 884082456..8bb41c18b 100644
--- a/resources/views/books/show.blade.php
+++ b/resources/views/books/show.blade.php
@@ -91,7 +91,7 @@
<div class="actions mb-xl">
<h5>{{ trans('common.actions') }}</h5>
- <div class="icon-list text-primary">
+ <div class="icon-list text-link">
@if(userCan('page-create', $book))
<a href="{{ $book->getUrl('/create-page') }}" data-shortcut="new" class="icon-list-item">
diff --git a/resources/views/chapters/copy.blade.php b/resources/views/chapters/copy.blade.php
index 3fd5de1ff..6c394716b 100644
--- a/resources/views/chapters/copy.blade.php
+++ b/resources/views/chapters/copy.blade.php
@@ -28,7 +28,7 @@
</div>
<div class="form-group" collapsible>
- <button type="button" class="collapse-title text-primary" collapsible-trigger aria-expanded="false">
+ <button type="button" class="collapse-title text-link" collapsible-trigger aria-expanded="false">
<label for="entity_selection">{{ trans('entities.pages_copy_desination') }}</label>
</button>
<div class="collapse-content" collapsible-content>
diff --git a/resources/views/chapters/parts/convert-to-book.blade.php b/resources/views/chapters/parts/convert-to-book.blade.php
index 516d1117a..3bda32779 100644
--- a/resources/views/chapters/parts/convert-to-book.blade.php
+++ b/resources/views/chapters/parts/convert-to-book.blade.php
@@ -18,7 +18,7 @@
<li>
<form action="{{ $chapter->getUrl('/convert-to-book') }}" method="POST">
{!! csrf_field() !!}
- <button type="submit" class="text-primary text-item">{{ trans('common.confirm') }}</button>
+ <button type="submit" class="text-link text-item">{{ trans('common.confirm') }}</button>
</form>
</li>
</ul>
diff --git a/resources/views/chapters/parts/form.blade.php b/resources/views/chapters/parts/form.blade.php
index 068c033ab..8abcebe13 100644
--- a/resources/views/chapters/parts/form.blade.php
+++ b/resources/views/chapters/parts/form.blade.php
@@ -12,7 +12,7 @@
</div>
<div class="form-group collapsible" component="collapsible" id="logo-control">
- <button refs="collapsible@trigger" type="button" class="collapse-title text-primary" aria-expanded="false">
+ <button refs="collapsible@trigger" type="button" class="collapse-title text-link" aria-expanded="false">
<label for="tags">{{ trans('entities.chapter_tags') }}</label>
</button>
<div refs="collapsible@content" class="collapse-content">
diff --git a/resources/views/chapters/show.blade.php b/resources/views/chapters/show.blade.php
index d2f8cec97..de52888dd 100644
--- a/resources/views/chapters/show.blade.php
+++ b/resources/views/chapters/show.blade.php
@@ -105,7 +105,7 @@
<div class="actions mb-xl">
<h5>{{ trans('common.actions') }}</h5>
- <div class="icon-list text-primary">
+ <div class="icon-list text-link">
@if(userCan('page-create', $chapter))
<a href="{{ $chapter->getUrl('/create-page') }}" data-shortcut="new" class="icon-list-item">
diff --git a/resources/views/common/custom-styles.blade.php b/resources/views/common/custom-styles.blade.php
index f81939109..bfdcc8512 100644
--- a/resources/views/common/custom-styles.blade.php
+++ b/resources/views/common/custom-styles.blade.php
@@ -1,11 +1,15 @@
-<style id="custom-styles" data-color="{{ setting('app-color') }}" data-color-light="{{ setting('app-color-light') }}">
+@php
+ $settingSuffix = setting()->getForCurrentUser('dark-mode-enabled') ? '-dark' : '';
+@endphp
+<style>
: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')}};
+ --color-primary: {{ setting('app-color' . $settingSuffix) }};
+ --color-primary-light: {{ setting('app-color-light' . $settingSuffix) }};
+ --color-link: {{ setting('link-color' . $settingSuffix) }};
+ --color-bookshelf: {{ setting('bookshelf-color' . $settingSuffix)}};
+ --color-book: {{ setting('book-color' . $settingSuffix)}};
+ --color-chapter: {{ setting('chapter-color' . $settingSuffix)}};
+ --color-page: {{ setting('page-color' . $settingSuffix)}};
+ --color-page-draft: {{ setting('page-draft-color' . $settingSuffix)}};
}
</style>
diff --git a/resources/views/entities/favourite-action.blade.php b/resources/views/entities/favourite-action.blade.php
index 24bd40950..35189044b 100644
--- a/resources/views/entities/favourite-action.blade.php
+++ b/resources/views/entities/favourite-action.blade.php
@@ -5,7 +5,7 @@
{{ csrf_field() }}
<input type="hidden" name="type" value="{{ get_class($entity) }}">
<input type="hidden" name="id" value="{{ $entity->id }}">
- <button type="submit" data-shortcut="favourite" class="icon-list-item text-primary">
+ <button type="submit" data-shortcut="favourite" class="icon-list-item text-link">
<span>@icon($isFavourite ? 'star' : 'star-outline')</span>
<span>{{ $isFavourite ? trans('common.unfavourite') : trans('common.favourite') }}</span>
</button>
diff --git a/resources/views/entities/view-toggle.blade.php b/resources/views/entities/view-toggle.blade.php
index e376b878d..7546e230f 100644
--- a/resources/views/entities/view-toggle.blade.php
+++ b/resources/views/entities/view-toggle.blade.php
@@ -4,12 +4,12 @@
{!! method_field('PATCH') !!}
@if ($view === 'list')
- <button type="submit" name="view" value="grid" class="icon-list-item text-primary">
+ <button type="submit" name="view" value="grid" class="icon-list-item text-link">
<span class="icon">@icon('grid')</span>
<span>{{ trans('common.grid_view') }}</span>
</button>
@else
- <button type="submit" name="view" value="list" class="icon-list-item text-primary">
+ <button type="submit" name="view" value="list" class="icon-list-item text-link">
<span>@icon('list')</span>
<span>{{ trans('common.list_view') }}</span>
</button>
diff --git a/resources/views/exports/parts/styles.blade.php b/resources/views/exports/parts/styles.blade.php
index 830b8e49a..f570ff512 100644
--- a/resources/views/exports/parts/styles.blade.php
+++ b/resources/views/exports/parts/styles.blade.php
@@ -10,7 +10,7 @@
<style>
/* Patches for CSS variable colors within PDF exports */
a {
- color: {{ setting('app-color') }};
+ color: {{ setting('app-link') }};
}
blockquote {
diff --git a/resources/views/form/entity-permissions-row.blade.php b/resources/views/form/entity-permissions-row.blade.php
index 1cfb6ec98..6b515af86 100644
--- a/resources/views/form/entity-permissions-row.blade.php
+++ b/resources/views/form/entity-permissions-row.blade.php
@@ -16,7 +16,7 @@ $inheriting - Boolean if the current row should be marked as inheriting default
</span>
@if($role->id !== 0)
<button type="button"
- class="ml-auto flex-none text-small text-primary text-button hover-underline item-list-row-toggle-all hide-under-s"
+ class="ml-auto flex-none text-small text-link text-button hover-underline item-list-row-toggle-all hide-under-s"
refs="permissions-table@toggle-all"
><strong>{{ trans('common.toggle_all') }}</strong></button>
@endif
diff --git a/resources/views/home/books.blade.php b/resources/views/home/books.blade.php
index 75d4ae14a..95c0c9df2 100644
--- a/resources/views/home/books.blade.php
+++ b/resources/views/home/books.blade.php
@@ -11,7 +11,7 @@
@section('right')
<div class="actions mb-xl">
<h5>{{ trans('common.actions') }}</h5>
- <div class="icon-list text-primary">
+ <div class="icon-list text-link">
@if(user()->can('book-create-all'))
<a href="{{ url("/create-book") }}" class="icon-list-item">
<span>@icon('add')</span>
@@ -19,8 +19,8 @@
</a>
@endif
@include('entities.view-toggle', ['view' => $view, 'type' => 'books'])
- @include('home.parts.expand-toggle', ['classes' => 'text-primary', 'target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
- @include('common.dark-mode-toggle', ['classes' => 'icon-list-item text-primary'])
+ @include('home.parts.expand-toggle', ['classes' => 'text-link', 'target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
+ @include('common.dark-mode-toggle', ['classes' => 'icon-list-item text-link'])
</div>
</div>
@stop
diff --git a/resources/views/home/default.blade.php b/resources/views/home/default.blade.php
index f6a337e50..c273db276 100644
--- a/resources/views/home/default.blade.php
+++ b/resources/views/home/default.blade.php
@@ -6,12 +6,12 @@
<div class="grid half">
<div>
<div class="icon-list inline block">
- @include('home.parts.expand-toggle', ['classes' => 'text-muted text-primary', 'target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
+ @include('home.parts.expand-toggle', ['classes' => 'text-muted text-link', 'target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
</div>
</div>
<div class="text-m-right">
<div class="icon-list inline block">
- @include('common.dark-mode-toggle', ['classes' => 'text-muted icon-list-item text-primary'])
+ @include('common.dark-mode-toggle', ['classes' => 'text-muted icon-list-item text-link'])
</div>
</div>
</div>
diff --git a/resources/views/home/shelves.blade.php b/resources/views/home/shelves.blade.php
index fc99b915f..9699d6b96 100644
--- a/resources/views/home/shelves.blade.php
+++ b/resources/views/home/shelves.blade.php
@@ -11,7 +11,7 @@
@section('right')
<div class="actions mb-xl">
<h5>{{ trans('common.actions') }}</h5>
- <div class="icon-list text-primary">
+ <div class="icon-list text-link">
@if(user()->can('bookshelf-create-all'))
<a href="{{ url("/create-shelf") }}" class="icon-list-item">
<span>@icon('add')</span>
@@ -19,8 +19,8 @@
</a>
@endif
@include('entities.view-toggle', ['view' => $view, 'type' => 'bookshelves'])
- @include('home.parts.expand-toggle', ['classes' => 'text-primary', 'target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
- @include('common.dark-mode-toggle', ['classes' => 'icon-list-item text-primary'])
+ @include('home.parts.expand-toggle', ['classes' => 'text-link', 'target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
+ @include('common.dark-mode-toggle', ['classes' => 'icon-list-item text-link'])
</div>
</div>
@stop
diff --git a/resources/views/home/specific-page.blade.php b/resources/views/home/specific-page.blade.php
index 5c8e65b25..10ffe9629 100644
--- a/resources/views/home/specific-page.blade.php
+++ b/resources/views/home/specific-page.blade.php
@@ -19,9 +19,9 @@
@section('right')
<div class="actions mb-xl">
<h5>{{ trans('common.actions') }}</h5>
- <div class="icon-list text-primary">
- @include('home.parts.expand-toggle', ['classes' => 'text-primary', 'target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
- @include('common.dark-mode-toggle', ['classes' => 'icon-list-item text-primary'])
+ <div class="icon-list text-link">
+ @include('home.parts.expand-toggle', ['classes' => 'text-link', 'target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
+ @include('common.dark-mode-toggle', ['classes' => 'icon-list-item text-link'])
</div>
</div>
@stop
\ No newline at end of file
diff --git a/resources/views/layouts/tri.blade.php b/resources/views/layouts/tri.blade.php
index e0f16321f..14016830d 100644
--- a/resources/views/layouts/tri.blade.php
+++ b/resources/views/layouts/tri.blade.php
@@ -11,7 +11,7 @@
refs="tri-layout@tab"
data-tab="info"
aria-label="{{ trans('common.tab_info_label') }}"
- class="tri-layout-mobile-tab px-m py-m text-primary">
+ class="tri-layout-mobile-tab px-m py-m text-link">
{{ trans('common.tab_info') }}
</button>
<button type="button"
@@ -19,7 +19,7 @@
data-tab="content"
aria-label="{{ trans('common.tab_content_label') }}"
aria-selected="true"
- class="tri-layout-mobile-tab px-m py-m text-primary active">
+ class="tri-layout-mobile-tab px-m py-m text-link active">
{{ trans('common.tab_content') }}
</button>
</div>
diff --git a/resources/views/mfa/parts/setup-method-row.blade.php b/resources/views/mfa/parts/setup-method-row.blade.php
index 271ec1bf4..b12028437 100644
--- a/resources/views/mfa/parts/setup-method-row.blade.php
+++ b/resources/views/mfa/parts/setup-method-row.blade.php
@@ -19,7 +19,7 @@
<form action="{{ url('/mfa/' . $method . '/remove') }}" method="post">
{{ csrf_field() }}
{{ method_field('delete') }}
- <button class="text-primary small text-item">{{ trans('common.confirm') }}</button>
+ <button class="text-link small text-item">{{ trans('common.confirm') }}</button>
</form>
</div>
</div>
diff --git a/resources/views/pages/copy.blade.php b/resources/views/pages/copy.blade.php
index 9f249863a..0d153bdf5 100644
--- a/resources/views/pages/copy.blade.php
+++ b/resources/views/pages/copy.blade.php
@@ -29,7 +29,7 @@
</div>
<div class="form-group" collapsible>
- <button type="button" class="collapse-title text-primary" collapsible-trigger aria-expanded="false">
+ <button type="button" class="collapse-title text-link" collapsible-trigger aria-expanded="false">
<label for="entity_selection">{{ trans('entities.pages_copy_desination') }}</label>
</button>
<div class="collapse-content" collapsible-content>
diff --git a/resources/views/pages/parts/editor-toolbar.blade.php b/resources/views/pages/parts/editor-toolbar.blade.php
index fa5cb7374..c29e6de0e 100644
--- a/resources/views/pages/parts/editor-toolbar.blade.php
+++ b/resources/views/pages/parts/editor-toolbar.blade.php
@@ -3,14 +3,14 @@
<div class="action-buttons text-left px-m py-xs">
<a href="{{ $isDraft ? $page->getParent()->getUrl() : $page->getUrl() }}"
- class="text-button text-primary">@icon('back')<span class="hide-under-l">{{ trans('common.back') }}</span></a>
+ class="text-button text-link">@icon('back')<span class="hide-under-l">{{ trans('common.back') }}</span></a>
</div>
<div class="text-center px-m">
<div component="dropdown"
option:dropdown:move-menu="true"
class="dropdown-container draft-display text {{ $draftsEnabled ? '' : 'hidden' }}">
- <button type="button" refs="dropdown@toggle" aria-haspopup="true" aria-expanded="false" title="{{ trans('entities.pages_edit_draft_options') }}" class="text-primary text-button py-s px-m"><span refs="page-editor@draftDisplay" class="faded-text"></span> @icon('more')</button>
+ <button type="button" refs="dropdown@toggle" aria-haspopup="true" aria-expanded="false" title="{{ trans('entities.pages_edit_draft_options') }}" class="text-link text-button py-s px-m"><span refs="page-editor@draftDisplay" class="faded-text"></span> @icon('more')</button>
@icon('check-circle', ['class' => 'text-pos draft-notification svg-icon', 'refs' => 'page-editor@draftDisplayIcon'])
<ul refs="dropdown@menu" class="dropdown-menu" role="menu">
<li>
@@ -68,7 +68,7 @@
<div component="dropdown"
option:dropdown:move-menu="true"
class="dropdown-container">
- <button refs="dropdown@toggle" type="button" aria-haspopup="true" aria-expanded="false" class="text-primary text-button">@icon('edit') <span refs="page-editor@changelogDisplay">{{ trans('entities.pages_edit_set_changelog') }}</span></button>
+ <button refs="dropdown@toggle" type="button" aria-haspopup="true" aria-expanded="false" class="text-link text-button">@icon('edit') <span refs="page-editor@changelogDisplay">{{ trans('entities.pages_edit_set_changelog') }}</span></button>
<ul refs="dropdown@menu" class="wide dropdown-menu">
<li class="px-l py-m">
<p class="text-muted pb-s">{{ trans('entities.pages_edit_enter_changelog_desc') }}</p>
@@ -82,7 +82,7 @@
<span>{{-- Prevents button jumping on menu show --}}</span>
</div>
- <button type="submit" id="save-button" class="float-left text-primary text-button text-pos-hover hide-under-m">@icon('save')<span>{{ trans('entities.pages_save') }}</span></button>
+ <button type="submit" id="save-button" class="float-left text-link text-button text-pos-hover hide-under-m">@icon('save')<span>{{ trans('entities.pages_save') }}</span></button>
</div>
</div>
</div>
\ No newline at end of file
diff --git a/resources/views/pages/parts/form.blade.php b/resources/views/pages/parts/form.blade.php
index 8da5cbf39..a3a118527 100644
--- a/resources/views/pages/parts/form.blade.php
+++ b/resources/views/pages/parts/form.blade.php
@@ -44,7 +44,7 @@
<button type="submit"
id="save-button-mobile"
title="{{ trans('entities.pages_save') }}"
- class="text-primary text-button hide-over-m page-save-mobile-button">@icon('save')</button>
+ class="text-link text-button hide-over-m page-save-mobile-button">@icon('save')</button>
{{--Editor Change Dialog--}}
@component('common.confirm-dialog', ['title' => trans('entities.pages_editor_switch_title'), 'ref' => 'page-editor@switchDialog'])
diff --git a/resources/views/pages/parts/image-manager-list.blade.php b/resources/views/pages/parts/image-manager-list.blade.php
index e5562e10f..22fe7addd 100644
--- a/resources/views/pages/parts/image-manager-list.blade.php
+++ b/resources/views/pages/parts/image-manager-list.blade.php
@@ -3,7 +3,7 @@
<div component="event-emit-select"
option:event-emit-select:name="image"
option:event-emit-select:data="{{ json_encode($image) }}"
- class="image anim fadeIn text-primary"
+ class="image anim fadeIn text-link"
style="animation-delay: {{ $index > 26 ? '160ms' : ($index * 25) . 'ms' }};">
<img src="{{ $image->thumbs['gallery'] }}"
alt="{{ $image->name }}"
diff --git a/resources/views/pages/parts/image-manager.blade.php b/resources/views/pages/parts/image-manager.blade.php
index 50a0cd8c3..5832c0954 100644
--- a/resources/views/pages/parts/image-manager.blade.php
+++ b/resources/views/pages/parts/image-manager.blade.php
@@ -15,16 +15,22 @@
<div class="flex-fill image-manager-body">
<div class="image-manager-content">
- <div class="image-manager-header primary-background-light nav-tabs grid third no-gap">
+ <div role="tablist" class="image-manager-header primary-background-light grid third no-gap">
<button refs="image-manager@filterTabs"
data-filter="all"
- type="button" class="tab-item selected" title="{{ trans('components.image_all_title') }}">@icon('images') {{ trans('components.image_all') }}</button>
+ role="tab"
+ aria-selected="true"
+ type="button" class="tab-item" 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>
+ role="tab"
+ aria-selected="false"
+ 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>
+ role="tab"
+ aria-selected="false"
+ 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">
diff --git a/resources/views/pages/parts/revisions-index-row.blade.php b/resources/views/pages/parts/revisions-index-row.blade.php
index fdc6a772d..db89284bb 100644
--- a/resources/views/pages/parts/revisions-index-row.blade.php
+++ b/resources/views/pages/parts/revisions-index-row.blade.php
@@ -46,7 +46,7 @@
<form action="{{ $revision->getUrl('/restore') }}" method="POST">
{!! csrf_field() !!}
<input type="hidden" name="_method" value="PUT">
- <button type="submit" class="text-primary icon-item">
+ <button type="submit" class="text-link icon-item">
@icon('history')
<div>{{ trans('entities.pages_revisions_restore') }}</div>
</button>
diff --git a/resources/views/pages/show.blade.php b/resources/views/pages/show.blade.php
index e05d9d739..2cbc7fe47 100644
--- a/resources/views/pages/show.blade.php
+++ b/resources/views/pages/show.blade.php
@@ -66,7 +66,7 @@
@foreach($pageNav as $navItem)
<li class="page-nav-item h{{ $navItem['level'] }}">
<a href="{{ $navItem['link'] }}" class="text-limit-lines-1 block">{{ $navItem['text'] }}</a>
- <div class="primary-background sidebar-page-nav-bullet"></div>
+ <div class="link-background sidebar-page-nav-bullet"></div>
</li>
@endforeach
</div>
@@ -143,7 +143,7 @@
<div class="actions mb-xl">
<h5>{{ trans('common.actions') }}</h5>
- <div class="icon-list text-primary">
+ <div class="icon-list text-link">
{{--User Actions--}}
@if(userCan('page-update', $page))
diff --git a/resources/views/settings/customization.blade.php b/resources/views/settings/customization.blade.php
index aa37c30c9..be99cc254 100644
--- a/resources/views/settings/customization.blade.php
+++ b/resources/views/settings/customization.blade.php
@@ -69,42 +69,50 @@
</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>
+ <!-- App Color Scheme -->
+ @php
+ $darkMode = boolval(setting()->getForCurrentUser('dark-mode-enabled'));
+ @endphp
+ <div component="setting-app-color-scheme"
+ option:setting-app-color-scheme:mode="{{ $darkMode ? 'dark' : 'light' }}"
+ class="pb-l">
+ <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 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>
- <label class="setting-list-label">{{ trans('settings.content_colors') }}</label>
- <p class="small">{!! trans('settings.content_colors_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'])
+ <div component="tabs" class="tab-container">
+ <div role="tablist" class="controls-card">
+ <button type="button"
+ role="tab"
+ id="color-scheme-tab-light"
+ aria-selected="{{ $darkMode ? 'false' : 'true' }}"
+ aria-controls="color-scheme-panel-light">@icon('light-mode'){{ trans('common.light_mode') }}</button>
+ <button type="button"
+ role="tab"
+ id="color-scheme-tab-dark"
+ aria-selected="{{ $darkMode ? 'true' : 'false' }}"
+ aria-controls="color-scheme-panel-dark">@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 id="color-scheme-panel-light"
+ refs="setting-app-color-scheme@lightContainer"
+ tabindex="0"
+ role="tabpanel"
+ aria-labelledby="color-scheme-tab-light"
+ @if($darkMode) hidden @endif
+ class="p-m">
+ @include('settings.parts.setting-color-scheme', ['mode' => 'light'])
+ </div>
+ <div id="color-scheme-panel-dark"
+ refs="setting-app-color-scheme@darkContainer"
+ tabindex="0"
+ role="tabpanel"
+ aria-labelledby="color-scheme-tab-light"
+ @if(!$darkMode) hidden @endif
+ class="p-m">
+ @include('settings.parts.setting-color-scheme', ['mode' => 'dark'])
+ </div>
</div>
</div>
</div>
diff --git a/resources/views/settings/parts/setting-entity-color-picker.blade.php b/resources/views/settings/parts/setting-color-picker.blade.php
similarity index 57%
rename from resources/views/settings/parts/setting-entity-color-picker.blade.php
rename to resources/views/settings/parts/setting-color-picker.blade.php
index e7bfc3fe9..d6707fb50 100644
--- a/resources/views/settings/parts/setting-entity-color-picker.blade.php
+++ b/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: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>
@@ -14,10 +17,10 @@
<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>
diff --git a/resources/views/settings/parts/setting-color-scheme.blade.php b/resources/views/settings/parts/setting-color-scheme.blade.php
new file mode 100644
index 000000000..7f8e55ac2
--- /dev/null
+++ b/resources/views/settings/parts/setting-color-scheme.blade.php
@@ -0,0 +1,29 @@
+{{--
+ @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>
+
+<input type="hidden"
+ value="{{ setting('app-color-light' . ($mode === 'dark' ? '-dark' : '')) }}"
+ name="setting-app-color-light{{ $mode === 'dark' ? '-dark' : '' }}">
\ No newline at end of file
diff --git a/resources/views/settings/recycle-bin/index.blade.php b/resources/views/settings/recycle-bin/index.blade.php
index 9e82ba467..ff41cefcc 100644
--- a/resources/views/settings/recycle-bin/index.blade.php
+++ b/resources/views/settings/recycle-bin/index.blade.php
@@ -22,7 +22,7 @@
<form action="{{ url('/settings/recycle-bin/empty') }}" method="POST">
{!! csrf_field() !!}
- <button type="submit" class="text-primary small delete text-item">{{ trans('common.confirm') }}</button>
+ <button type="submit" class="text-link small delete text-item">{{ trans('common.confirm') }}</button>
</form>
</div>
</div>
diff --git a/resources/views/settings/roles/parts/asset-permissions-row.blade.php b/resources/views/settings/roles/parts/asset-permissions-row.blade.php
index df179a985..8bff570cb 100644
--- a/resources/views/settings/roles/parts/asset-permissions-row.blade.php
+++ b/resources/views/settings/roles/parts/asset-permissions-row.blade.php
@@ -1,7 +1,7 @@
<div class="item-list-row flex-container-row items-center wrap">
<div class="flex py-s px-m min-width-s">
<strong>{{ $title }}</strong> <br>
- <a href="#" refs="permissions-table@toggle-row" class="text-small text-primary">{{ trans('common.toggle_all') }}</a>
+ <a href="#" refs="permissions-table@toggle-row" class="text-small text-link">{{ trans('common.toggle_all') }}</a>
</div>
<div class="flex py-s px-m min-width-xxs">
<small class="hide-over-m bold">{{ trans('common.create') }}<br></small>
diff --git a/resources/views/settings/roles/parts/form.blade.php b/resources/views/settings/roles/parts/form.blade.php
index 8534b7fdb..ac5c320d2 100644
--- a/resources/views/settings/roles/parts/form.blade.php
+++ b/resources/views/settings/roles/parts/form.blade.php
@@ -28,7 +28,7 @@
<div component="permissions-table">
<label class="setting-list-label">{{ trans('settings.role_system') }}</label>
- <a href="#" refs="permissions-table@toggle-all" class="text-small text-primary">{{ trans('common.toggle_all') }}</a>
+ <a href="#" refs="permissions-table@toggle-all" class="text-small text-link">{{ trans('common.toggle_all') }}</a>
<div class="toggle-switch-list grid half mt-m">
<div>
@@ -62,7 +62,7 @@
class="item-list toggle-switch-list">
<div class="item-list-row flex-container-row items-center hide-under-m bold">
<div class="flex py-s px-m min-width-s">
- <a href="#" refs="permissions-table@toggle-all" class="text-small text-primary">{{ trans('common.toggle_all') }}</a>
+ <a href="#" refs="permissions-table@toggle-all" class="text-small text-link">{{ trans('common.toggle_all') }}</a>
</div>
<div refs="permissions-table@toggle-column" class="flex py-s px-m min-width-xxs">{{ trans('common.create') }}</div>
<div refs="permissions-table@toggle-column" class="flex py-s px-m min-width-xxs">{{ trans('common.view') }}</div>
diff --git a/resources/views/settings/roles/parts/related-asset-permissions-row.blade.php b/resources/views/settings/roles/parts/related-asset-permissions-row.blade.php
index 1ec3d2257..62fdd6b74 100644
--- a/resources/views/settings/roles/parts/related-asset-permissions-row.blade.php
+++ b/resources/views/settings/roles/parts/related-asset-permissions-row.blade.php
@@ -1,7 +1,7 @@
<div class="item-list-row flex-container-row items-center wrap">
<div class="flex py-s px-m min-width-s">
<strong>{{ $title }}</strong> <br>
- <a href="#" refs="permissions-table@toggle-row" class="text-small text-primary">{{ trans('common.toggle_all') }}</a>
+ <a href="#" refs="permissions-table@toggle-row" class="text-small text-link">{{ trans('common.toggle_all') }}</a>
</div>
<div class="flex py-s px-m min-width-xxs">
<small class="hide-over-m bold">{{ trans('common.create') }}<br></small>
diff --git a/resources/views/shelves/index.blade.php b/resources/views/shelves/index.blade.php
index df3ca83eb..eafc339ce 100644
--- a/resources/views/shelves/index.blade.php
+++ b/resources/views/shelves/index.blade.php
@@ -8,7 +8,7 @@
<div class="actions mb-xl">
<h5>{{ trans('common.actions') }}</h5>
- <div class="icon-list text-primary">
+ <div class="icon-list text-link">
@if(userCan('bookshelf-create-all'))
<a href="{{ url("/create-shelf") }}" data-shortcut="new" class="icon-list-item">
<span>@icon('add')</span>
diff --git a/resources/views/shelves/parts/form.blade.php b/resources/views/shelves/parts/form.blade.php
index a54452703..364f8e0be 100644
--- a/resources/views/shelves/parts/form.blade.php
+++ b/resources/views/shelves/parts/form.blade.php
@@ -44,7 +44,7 @@
<div class="form-group collapsible" component="collapsible" id="logo-control">
- <button refs="collapsible@trigger" type="button" class="collapse-title text-primary" aria-expanded="false">
+ <button refs="collapsible@trigger" type="button" class="collapse-title text-link" aria-expanded="false">
<label>{{ trans('common.cover_image') }}</label>
</button>
<div refs="collapsible@content" class="collapse-content">
@@ -60,7 +60,7 @@
</div>
<div class="form-group collapsible" component="collapsible" id="tags-control">
- <button refs="collapsible@trigger" type="button" class="collapse-title text-primary" aria-expanded="false">
+ <button refs="collapsible@trigger" type="button" class="collapse-title text-link" aria-expanded="false">
<label for="tag-manager">{{ trans('entities.shelf_tags') }}</label>
</button>
<div refs="collapsible@content" class="collapse-content">
diff --git a/resources/views/shelves/show.blade.php b/resources/views/shelves/show.blade.php
index 1ea37992a..25b7a14fc 100644
--- a/resources/views/shelves/show.blade.php
+++ b/resources/views/shelves/show.blade.php
@@ -109,7 +109,7 @@
@section('right')
<div class="actions mb-xl">
<h5>{{ trans('common.actions') }}</h5>
- <div class="icon-list text-primary">
+ <div class="icon-list text-link">
@if(userCan('book-create-all') && userCan('bookshelf-update', $shelf))
<a href="{{ $shelf->getUrl('/create-book') }}" data-shortcut="new" class="icon-list-item">