diff --git a/packages/theme-switcher/README.md b/packages/theme-switcher/README.md index 2f6445811e3fe962b7035624831c3a4c95718299..1c9c016dd8d41041bc5bd2ae8c91c3d69a5eff62 100644 --- a/packages/theme-switcher/README.md +++ b/packages/theme-switcher/README.md @@ -121,13 +121,15 @@ A full example can be found in each application in the `index.html` of the `app- themes='[{"class": "light-theme", "icon": "sun", "name": "Light Mode"}, {"class": "dark-theme", "icon": "night", "name": "Dark Mode"}]'> </dbp-theme-switcher>` -- `darkModeThemeOverride` (optional) +- `dark-mode-theme-override` (optional) - Options: - - `darkModeThemeOverride` not set: the theme switcher detects if the browser uses the dark mode and add + - `dark-mode-theme-override` not set: the theme switcher detects if the browser uses the dark mode and add the `dark-theme` class automatically to the body if it is in the themes array and no user preference is set - - `darkModeThemeOverride` is set: the theme switcher not detects the browser color mode - - `darkModeThemeOverride` is set with a string: e.g.: `darkModeThemeOverride="dunkles-theme`, the theme switcher + - `dark-mode-theme-override` is set: the theme switcher not detects the browser color mode + - `dark-mode-theme-override` is set with a string: e.g.: `dark-mode-theme-override="dunkles-theme`, the theme switcher detects if the browser uses the dark mode and handles the given string as dark mode class +- `dropdown-right` (optional, default: `false`): boolean which indicates that you want the dropdown from the theme menu on the right side, default on the left side + - example: `<dbp-file-source dropdown-right></dbp-file-source>` ## Note diff --git a/packages/theme-switcher/src/theme-switcher.js b/packages/theme-switcher/src/theme-switcher.js index 6a236f82bf33f0c9e92274891dc31540aee4a2ad..fc2dd9822427bf8b719cec234e6cc6a1d5097dfd 100644 --- a/packages/theme-switcher/src/theme-switcher.js +++ b/packages/theme-switcher/src/theme-switcher.js @@ -16,6 +16,7 @@ export class ThemeSwitcher extends ScopedElementsMixin(AdapterLitElement) { this.detectBrowserDarkMode = false; this.darkModeClass = 'dark-theme'; this.langDir = ''; + this.dropdownRight = false; } static get properties() { @@ -24,6 +25,7 @@ export class ThemeSwitcher extends ScopedElementsMixin(AdapterLitElement) { lang: {type: String}, themes: {type: Array, attribute: 'themes'}, darkModeThemeOverride: {type: String, attribute: 'dark-mode-theme-override'}, + dropdownRight: {type: Boolean, attribute: 'dropdown-right'}, langDir: {type: String, attribute: 'lang-dir'}, }; } @@ -223,6 +225,16 @@ export class ThemeSwitcher extends ScopedElementsMixin(AdapterLitElement) { .icon { margin-right: 10px; } + + #theme-menu{ + position: relative; + } + + + .ul-right{ + right: 0px; + }; + `; } @@ -230,7 +242,7 @@ export class ThemeSwitcher extends ScopedElementsMixin(AdapterLitElement) { const i18n = this._i18n; return html` - <div class="${classMap({hidden: this.themes.length <= 1})}"> + <div id="theme-menu" class="${classMap({hidden: this.themes.length <= 1})}"> <a class="mode-button" title="${i18n.t('color-mode')}" @@ -239,7 +251,7 @@ export class ThemeSwitcher extends ScopedElementsMixin(AdapterLitElement) { }}"> <dbp-icon name="contrast"></dbp-icon> </a> - <ul class="extended-menu hidden"> + <ul class="extended-menu hidden ${classMap({'ul-right':this.dropdownRight})}"> ${this.themes.map( (theme) => html` <li class="" id="${theme.class}">