diff --git a/src/lib/themes/svelte/carbon/index.ts b/src/lib/themes/svelte/carbon/index.ts index 00ca768..6ac753c 100644 --- a/src/lib/themes/svelte/carbon/index.ts +++ b/src/lib/themes/svelte/carbon/index.ts @@ -119,3 +119,5 @@ const theme: ThemeConfig = { }; export default theme; + +export { default as ThemeChangerAction } from './lib/ThemeChangeMenu'; diff --git a/src/lib/themes/svelte/carbon/lib/ThemeChangeMenu.ts b/src/lib/themes/svelte/carbon/lib/ThemeChangeMenu.ts new file mode 100644 index 0000000..f32a9b6 --- /dev/null +++ b/src/lib/themes/svelte/carbon/lib/ThemeChangeMenu.ts @@ -0,0 +1,23 @@ +import { type ActionIcon, type ActionOptions, CallbackAction } from '$lib/Actions'; +import { type MenuLink, Submenu } from '$lib/Menu'; + +type Optional = T | null | undefined; + +type CarbonTheme = "white"|"g10"|"g80"|"g90"|"g100"; + +export default class ThemeChangeMenu extends Submenu +{ + static readonly availableThemes: Array = ["white", "g10", "g80", "g90", "g100"]; + + constructor(icon?: Optional, options?: ActionOptions) { + const links: Array = ThemeChangeMenu.availableThemes.map((theme) => { + return new CallbackAction('carbon.theme.'+theme, undefined, () => this.changeTheme(theme)); + }); + + super('carbon.theme.change_action', icon, links, options); + } + + changeTheme(newTheme: CarbonTheme) { + document.documentElement.setAttribute('theme', newTheme); + } +} diff --git a/src/lib/translations/en.ts b/src/lib/translations/en.ts index 50ad653..399a0d6 100644 --- a/src/lib/translations/en.ts +++ b/src/lib/translations/en.ts @@ -34,7 +34,13 @@ const dictionary: Dictionary = { 'datatable.filters.submit_filters': 'Filter results', 'datatable.filters.reset_filters': 'Reset filters', 'filters.date.from': 'From this date', - 'filters.date.to': 'Up to this date' + 'filters.date.to': 'Up to this date', + 'carbon.theme.change_action': 'Change theme', + 'carbon.theme.white': 'White', + 'carbon.theme.g10': 'Light gray (g10)', + 'carbon.theme.g80': 'Gray (g80)', + 'carbon.theme.g90': 'Dark gray (g90)', + 'carbon.theme.g100': 'Dark (g100)', }; export default dictionary; diff --git a/src/lib/translations/fr.ts b/src/lib/translations/fr.ts index 5fbd307..eef4858 100644 --- a/src/lib/translations/fr.ts +++ b/src/lib/translations/fr.ts @@ -35,7 +35,13 @@ const dictionary: Dictionary = { 'datatable.filters.submit_filters': 'Filtrer les résultats', 'datatable.filters.reset_filters': 'Réinitialiser les filtres', 'filters.date.from': 'À partir de cette date', - 'filters.date.to': "Jusqu'à cette date" + 'filters.date.to': "Jusqu'à cette date", + 'carbon.theme.change_action': 'Changer le thème', + 'carbon.theme.white': 'Blanc', + 'carbon.theme.g10': 'Gris clair (g10)', + 'carbon.theme.g80': 'Gris (g80)', + 'carbon.theme.g90': 'Gris foncé (g90)', + 'carbon.theme.g100': 'Sombre (g100)', }; export default dictionary; diff --git a/src/testApp/Dashboard.ts b/src/testApp/Dashboard.ts index f58d5b9..ee0eb7f 100644 --- a/src/testApp/Dashboard.ts +++ b/src/testApp/Dashboard.ts @@ -10,6 +10,7 @@ import { carbon } from '$lib/themes/svelte'; import fr from './translations/fr'; import { bookCrud } from './BookCrud'; import { testCrud } from './TestCrud'; +import { ThemeChangerAction } from '$lib/themes/svelte/carbon'; let newLinkIndex = 1; @@ -45,6 +46,7 @@ export const dashboard = new DashboardDefinition({ ]) ], topLeftMenu: [ + new ThemeChangerAction(), new UrlAction('API Docs', '/apidocs', Document, { htmlAttributes: { rel: 'external' } }) ], topRightMenu: [