Add a theme changer action for Carbon

Author: Pierstoval

src/lib/themes/svelte/carbon/index.ts

@@ -119,3 +119,5 @@ const theme: ThemeConfig = {
 };
 
 export default theme;
+
+export { default as ThemeChangerAction } from './lib/ThemeChangeMenu';

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> = T | null | undefined;
+
+type CarbonTheme = "white"|"g10"|"g80"|"g90"|"g100";
+
+export default class ThemeChangeMenu extends Submenu
+{
+	static readonly availableThemes: Array<CarbonTheme> = ["white", "g10", "g80", "g90", "g100"];
+
+	constructor(icon?: Optional<ActionIcon>, options?: ActionOptions) {
+		const links: Array<MenuLink> = 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);
+	}
+}

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;

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;

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: [