feat(ui-next): Adds appearance dialog with theme presets and custom theme support (#6041)

platform/app/public/config/netlify.js

@@ -2,6 +2,9 @@
 
 window.config = {
   routerBasename: null,
+  customizationService: [
+    '@ohif/extension-default.customizationModule.theme',
+  ],
   extensions: [],
   modes: [],
   showStudyList: true,

platform/app/src/routes/WorkList/StudyListSettingsPopover.tsx

@@ -30,7 +30,7 @@ export function defaultSettingsMenuItems({
   const items: SettingsMenuItem[] = [
     {
       id: 'about',
-      label: 'About OHIF Viewer',
+      label: t('Header:About'),
       onClick: () => {
         const AboutModal = customizationService.getCustomization('ohif.aboutModal');
         show({
@@ -42,7 +42,7 @@ export function defaultSettingsMenuItems({
     },
     {
       id: 'userPreferences',
-      label: 'User Preferences',
+      label: t('Header:Preferences'),
       onClick: () => {
         const UserPreferencesModal = customizationService.getCustomization(
           'ohif.userPreferencesModal'
@@ -57,6 +57,21 @@ export function defaultSettingsMenuItems({
     },
   ];
 
+  const AppearanceModal = customizationService.getCustomization('ohif.appearanceModal');
+  if (AppearanceModal) {
+    items.splice(1, 0, {
+      id: 'appearance',
+      label: AppearanceModal.menuTitle ?? t('Header:Appearance'),
+      onClick: () => {
+        show({
+          content: AppearanceModal,
+          title: AppearanceModal.title ?? t('AppearanceModal:Appearance'),
+          containerClassName: AppearanceModal.containerClassName ?? 'max-w-md',
+        });
+      },
+    });
+  }
+
   if (appConfig.oidc) {
     items.push({
       id: 'logout',