diff options
Diffstat (limited to 'apps/theming/src/components')
| -rw-r--r-- | apps/theming/src/components/BackgroundSettings.vue | 18 |
1 files changed, 17 insertions, 1 deletions
diff --git a/apps/theming/src/components/BackgroundSettings.vue b/apps/theming/src/components/BackgroundSettings.vue index aa65a333f0f..3767cebf815 100644 --- a/apps/theming/src/components/BackgroundSettings.vue +++ b/apps/theming/src/components/BackgroundSettings.vue @@ -32,6 +32,17 @@ @click="pickFile"> {{ t('theming', 'Pick from Files') }} </button> + <NcColorPicker v-model="Theming.color" @input="pickColor"> + <button class="background color" + :class="{ active: background === Theming.color}" + tabindex="0" + :data-color="Theming.color" + :data-color-bright="invertTextColor(Theming.color)" + :style="{ backgroundColor: Theming.color, color: invertTextColor(Theming.color) ? '#000000' : '#ffffff'}" + @click="pickColor"> + {{ t('theming', 'Custom color') }} + </button> + </NcColorPicker> <!-- Default background --> <button class="background default" @@ -43,7 +54,7 @@ <!-- Default admin primary color --> <button class="background color" - :class="{ active: background.startsWith('#') }" + :class="{ active: background === Theming.defaultColor }" tabindex="0" :data-color="Theming.defaultColor" :data-color-bright="invertTextColor(Theming.defaultColor)" @@ -68,6 +79,7 @@ <script> import axios from '@nextcloud/axios' import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip' +import NcColorPicker from '@nextcloud/vue/dist/Components/NcColorPicker' import { generateUrl } from '@nextcloud/router' import { loadState } from '@nextcloud/initial-state' import { getBackgroundUrl } from '../helpers/getBackgroundUrl.js' @@ -81,6 +93,10 @@ export default { Tooltip, }, + components: { + NcColorPicker, + }, + props: { background: { type: String, |