themes: render theme selection based on theme definitions

docs/new-dashboard.markdown

@@ -31,5 +31,3 @@ export default ({ popup }: ThemeProps) => {
 ## Registration
 
 After implementing the React component you need to register the theme in [dashboard/components/dashboardTheme](../src/dashboard/components/dashboardTheme.tsx#L6).
-
-To be able to select the new theme, the next step is to add it to [theme selection options](../src/options/pages/viewPage.tsx#L26)

src/common/components/react-types.ts

@@ -6,6 +6,11 @@ import {
     ViewConfig,
 } from 'common/types';
 
+export interface ThemeDefinition {
+    name: string;
+    theme?: Theme;
+}
+
 export type Theme = React.ComponentType<ThemeProps>;
 
 export interface ThemeProps {

src/dashboard/components/dashboardTheme.tsx

@@ -1,18 +1,25 @@
-import { Theme, ViewConfigContext } from 'common/components/react-types';
+import { ThemeDefinition, ViewConfigContext } from 'common/components/react-types';
 import React, { useContext } from 'react';
 import darkTheme from '../themes/dark/dark';
 import lightTheme from '../themes/light/light';
 
-const themes: Record<string, Theme> = {
-    dark: darkTheme,
-    light: lightTheme,
+export const themeDefinition: Record<string, ThemeDefinition> = {
+    dark: {
+        name: 'Dark',
+        theme: darkTheme,
+    },
+    light: {
+        name: 'Light',
+        theme: lightTheme,
+    },
 };
 
 const DashboardTheme = ({ popup }: { popup: boolean }) => {
     const viewConfig = useContext(ViewConfigContext);
 
     const themeName = viewConfig.theme ?? 'dark';
-    const DashboardActiveTheme = themes[themeName];
+    const DashboardActiveTheme = themeDefinition[themeName].theme;
+    if (!DashboardActiveTheme) throw new Error(`No theme found for ${themeName}`);
     return (
         <div className={`theme theme-${themeName}`}>
             <DashboardActiveTheme popup={popup} />

src/options/pages/viewPage.tsx

@@ -5,7 +5,7 @@ import {
 } from 'common/components/forms/index';
 import { ViewConfigContext } from 'common/components/react-types';
 import core from 'common/core';
-import DashboardTheme from 'dashboard/components/dashboardTheme';
+import DashboardTheme, { themeDefinition } from 'dashboard/components/dashboardTheme';
 import React, { useContext } from 'react';
 import { Col, Container, Form, Row } from 'react-bootstrap';
 
@@ -16,14 +16,17 @@ export default () => {
         core.setViews({ ...viewConfig, [name]: value });
     };
 
+    const themeItems = Object.fromEntries(
+        Object.entries(themeDefinition).map(([key, value]) => [key, value.name]),
+    );
     return (
         <Container>
             <Row>
                 <Col md={5}>
                     <Form>
                         <FormSelectField
                             label={'Theme'}
-                            items={{ dark: 'Dark', light: 'Light' }}
+                            items={themeItems}
                             activeItem={viewConfig.theme}
                             onSelect={value => {
                                 setField('theme', value);