u

src/theme/index.js

@@ -0,0 +1,14 @@
+export { PANEL_TILE_KEYS } from './panelTiles';
+export {
+  getActiveTheme,
+  getActiveThemeId,
+  getTheme,
+  listThemeIds,
+  registerTheme,
+  setActiveTheme,
+} from './themeManager';
+export { createDefaultTheme, defaultThemeId } from './themes/default';
+
+import { getActiveTheme } from './themeManager';
+
+export default getActiveTheme();

src/theme/panelTiles.js

@@ -0,0 +1,11 @@
+/** Semantic keys for article view panel tile backgrounds. */
+export const PANEL_TILE_KEYS = {
+  name: 'name',
+  photo: 'photo',
+  stock: 'stock',
+  brand: 'brand',
+  identifiers: 'identifiers',
+  price: 'price',
+  content: 'content',
+  lists: 'lists',
+};

src/theme/themeManager.js

@@ -0,0 +1,38 @@
+import { createDefaultTheme, defaultThemeId } from './themes/default.js';
+
+const themes = {
+  [defaultThemeId]: createDefaultTheme(),
+};
+
+let activeThemeId = defaultThemeId;
+
+export function getTheme(themeId = activeThemeId) {
+  const theme = themes[themeId];
+  if (!theme) {
+    throw new Error(`Unknown theme: ${themeId}`);
+  }
+  return theme;
+}
+
+export function getActiveTheme() {
+  return getTheme(activeThemeId);
+}
+
+export function getActiveThemeId() {
+  return activeThemeId;
+}
+
+export function setActiveTheme(themeId) {
+  if (!themes[themeId]) {
+    throw new Error(`Unknown theme: ${themeId}`);
+  }
+  activeThemeId = themeId;
+}
+
+export function listThemeIds() {
+  return Object.keys(themes);
+}
+
+export function registerTheme(themeId, theme) {
+  themes[themeId] = theme;
+}

src/theme/themes/default.js

@@ -0,0 +1,42 @@
+import { createTheme } from '@mui/material/styles';
+import { MAIN_BACKGROUND } from '../../colors';
+import { PANEL_TILE_KEYS } from '../panelTiles';
+
+const nav = {
+  background: '#1a3533',
+  mainBackground: MAIN_BACKGROUND,
+  item: '#9cb8b4',
+  itemHover: '#243f3d',
+  itemHoverText: '#d4ebe8',
+  itemActive: '#2a5a56',
+  itemActiveText: '#6ee7d8',
+  itemActiveAccent: '#2dd4bf',
+};
+
+const panelTiles = {
+  [PANEL_TILE_KEYS.name]: '#ffffff',
+  [PANEL_TILE_KEYS.photo]: '#fde68a',
+  [PANEL_TILE_KEYS.stock]: '#bbf7d0',
+  [PANEL_TILE_KEYS.brand]: '#e9d5ff',
+  [PANEL_TILE_KEYS.identifiers]: '#e2e8f0',
+  [PANEL_TILE_KEYS.price]: '#bfdbfe',
+  [PANEL_TILE_KEYS.content]: '#99f6e4',
+  [PANEL_TILE_KEYS.lists]: '#fbcfe8',
+};
+
+export const defaultThemeId = 'default';
+
+export function createDefaultTheme() {
+  return createTheme({
+    palette: {
+      mode: 'light',
+      primary: { main: '#0d9488' },
+      background: {
+        default: nav.mainBackground,
+        paper: '#ffffff',
+      },
+    },
+    nav,
+    panelTiles,
+  });
+}