inovex · TobiasHeimGalindo · Nov 22, 2023 · Nov 27, 2023 · Nov 27, 2023 · Nov 27, 2023
diff --git a/packages/elements/src/components/ino-accordion/ino-accordion.scss b/packages/elements/src/components/ino-accordion/ino-accordion.scss
@@ -6,6 +6,11 @@ $animation-time: 200ms;
 .ino-accordion {
   &:hover {
     background: theme.$p-1;
+    /*
+    TODO: Switch to CSS variables for light- & dark theme support.
+    Replace the above line with the following once the global styles.scss file has been updated with a dark-theme import:
+    background: var(--inovex-elements-p-1);
+    */
   }
   border-radius: 24px;
 
@@ -35,7 +40,7 @@ $animation-time: 200ms;
   }
 
   &--expanded {
-    background: theme.$p-1;
+    background: var(--inovex-elements-p-1); //Example for CSS variable usage
   }
 
   .ino-accordion__content-wrapper {

diff --git a/packages/elements/src/global/styles.scss b/packages/elements/src/global/styles.scss
@@ -1,6 +1,9 @@
 @use '../components/base/typography-new';
 @use '../components/base/theme';
 @use '../components/base/new-theme' as new-theme;
+/*
+@use '../components/base/dark-theme' as dark-theme;
+*/
 
 .inovex-elements-typo {
   font-family: Lato, Verdana, sans-serif;
@@ -91,8 +94,8 @@
     @include typography-new.typo(body-s);
   }
 }
-
-.inovex-elements-theme {
+// Light Theme Variables (Default)
+.inovex-elements-theme/*-light*/ {
   --inovex-elements-white: #{new-theme.$white};
   --inovex-elements-black: #{new-theme.$black};
   --inovex-elements-transparent: #{new-theme.$transparent};
@@ -138,3 +141,23 @@
   --inovex-elements-warning: #{new-theme.$warning};
   --inovex-elements-warning-light: #{new-theme.$warning-light};
 }
+
+// Dark Theme Variables
+.inovex-elements-theme-dark {
+  --inovex-elements-p-1: #48ec4a;
+  // ...
+
+  /*
+  TODO:
+  Continue defining dark theme colors for other categories.
+  */
+
+  /* Theme Switching Documentation
+   * -----------------------------
+   * The elements package is designed to be theme-aware, supporting light and dark themes.
+   * The actual theme switching should be implemented in the application using this library (our next.js landingpage or storybook).
+   * The application can switch themes at runtime by toggling between the 
+   * '.inovex-elements-theme-light' and '.inovex-elements-theme-dark' classes on a high-level element (like 'body').
+   * This allows for dynamic theme changes without the need to reload or recompile the application.
+   */
+}
diff --git a/packages/landingpage/components/layout.tsx b/packages/landingpage/components/layout.tsx
@@ -4,12 +4,14 @@ import styles from './layout.module.scss';
 import Footer from './layout/footer/footer';
 import Header from './layout/header/header';
 import { UiContext, UiContextType } from '../utils/context/UiContext';
+import { useTheme } from '../utils/context/ThemeContext';
 
 export default function Layout({ children }: { children: ReactNode }) {
   const { isFooterHidden } = useContext(UiContext) as UiContextType;
+  const { theme } = useTheme();
 
   return (
-    <div className="inovex-elements-typo inovex-elements-theme">
+    <div className={`inovex-elements-typo ${theme}`}>
       <Head>
         <meta
           name="viewport"

diff --git a/packages/landingpage/components/layout/header/desktop/navbar.tsx b/packages/landingpage/components/layout/header/desktop/navbar.tsx
@@ -2,15 +2,19 @@ import { useRouter } from 'next/router';
 import styles from './navbar.module.scss';
 import { Routes } from '../../../../utils/routes';
 import LinkItem from '../../linkItem';
-import { InoPopover } from '@elements';
+import { InoPopover, InoSwitch } from '@elements';
 import useTranslation from 'utils/hooks/useTranslation';
 import { ContactButton } from '../../../shared/contactButton';
+import { useTheme } from 'utils/context/ThemeContext';
+import { inDevEnvironment } from 'utils/in-dev-mode';
 
 const POPOVER_OFFSET = 10;
 
 export default function Navbar() {
   const router = useRouter();
   const { t } = useTranslation();
+  const { theme, toggleTheme } = useTheme();
+  const isDarkMode = theme === 'inovex-elements-theme-dark';
 
   function isRouteActive(mainRouteUrl: string, mainRouteName: string) {
     const pathSplit = router.pathname.split('/');
@@ -59,6 +63,13 @@ export default function Navbar() {
         </div>
       ))}
       <ContactButton />
+      {/* TODO: add a toggle Icon with Sun & Moon icons for light and dark mode toggle */}
+      {inDevEnvironment && (
+        <InoSwitch
+          checked={isDarkMode}
+          onCheckedChange={toggleTheme}
+        ></InoSwitch>
+      )}
     </nav>
   );
 }
diff --git a/packages/landingpage/pages/_app.tsx b/packages/landingpage/pages/_app.tsx
@@ -13,6 +13,7 @@ import useDefaultLocale from '../translations/useDefaultLocale';
 import { useMount } from 'react-use';
 import UiContextProvider from '../utils/context/UiContext';
 import { VersionProvider } from '../utils/context/VersionContext';
+import { ThemeProvider } from 'utils/context/ThemeContext';
 
 function MyApp({ Component, pageProps }: AppProps) {
   useEffect(() => {
@@ -28,9 +29,11 @@ function MyApp({ Component, pageProps }: AppProps) {
     <UiContextProvider>
       <LanguageProvider localization={pageProps.localization}>
         <VersionProvider>
-          <Layout>
-            <Component {...pageProps} />
-          </Layout>
+          <ThemeProvider>
+            <Layout>
+              <Component {...pageProps} />
+            </Layout>
+          </ThemeProvider>
         </VersionProvider>
       </LanguageProvider>
     </UiContextProvider>

diff --git a/packages/landingpage/utils/context/ThemeContext.tsx b/packages/landingpage/utils/context/ThemeContext.tsx
@@ -0,0 +1,29 @@
+import { ReactNode, createContext, useContext, useState } from 'react';
+import { inDevEnvironment } from 'utils/in-dev-mode';
+
+const ThemeContext = createContext({
+  theme: 'inovex-elements-theme',
+  toggleTheme: () => {},
+});
+
+export const useTheme = () => useContext(ThemeContext);
+
+export const ThemeProvider = ({ children }: { children: ReactNode }) => {
+  const [theme, setTheme] = useState('inovex-elements-theme');
+
+  const toggleTheme = () => {
+    if (!inDevEnvironment) return;
+
+    setTheme((current) =>
+      current === 'inovex-elements-theme'
+        ? 'inovex-elements-theme-dark'
+        : 'inovex-elements-theme',
+    );
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
diff --git a/packages/storybook/config/main.js b/packages/storybook/config/main.js
@@ -14,6 +14,7 @@ module.exports = {
   addons: [
     '@storybook/addon-essentials',
     '@pxtrn/storybook-addon-docs-stencil',
+    'storybook-addon-themes',
   ],
   managerEntries: ['./addons/post-current-story'],
   typescript: {

diff --git a/packages/storybook/config/preview.js b/packages/storybook/config/preview.js
@@ -27,6 +27,8 @@ setStencilDocJson(docsJson);
 
 applyPolyfills().then(() => defineCustomElements(window));
 
+const isInDevEnvironment = process && process.env.NODE_ENV === 'development';
+
 // Explicit order for the docs section
 export const parameters = {
   viewMode: 'docs',
@@ -58,4 +60,14 @@ export const parameters = {
       ],
     },
   },
+  // using storybook-addon-themes https://storybook.js.org/addons/storybook-addon-themes
+  ...(isInDevEnvironment && {
+    themes: {
+      default: 'light',
+      list: [
+        { name: 'light', class: 'inovex-elements-theme', color: '#ffffff' },
+        { name: 'dark', class: 'inovex-elements-theme-dark', color: '#000000' },
+      ],
+    },
+  }),
 };
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
@@ -63,6 +63,7 @@
     "sass": "^1.49.7",
     "sass-loader": "^12.6.0",
     "story-description-loader": "^1.0.0",
+    "storybook-addon-themes": "^6.1.0",
     "typescript": "^4.5.5",
     "webpack": "^5.0.0"
   },

diff --git a/packages/storybook/src/stories/ino-chip/ino-chip.stories.ts b/packages/storybook/src/stories/ino-chip/ino-chip.stories.ts
@@ -111,12 +111,14 @@ const templateFilter = new TemplateGenerator<Components.InoChip>(
     return html`
       <div class="ino-chip-story">
         ${values.map(
-          (value) => html` <ino-chip
-            value="${value}"
-            selectable
-            @chipClicked="${(ev) => handleClick(ev.target)}"
-            >${value}
-          </ino-chip>`,
+          (value) => html`
+            <ino-chip
+              value="${value}"
+              selectable
+              @chipClicked="${(ev) => handleClick(ev.target)}"
+              >${value}
+            </ino-chip>
+          `,
         )}
       </div>
     `;
@@ -137,12 +139,14 @@ const templateRemove = new TemplateGenerator<Components.InoChip>(
     return html`
       <div class="ino-chip-story">
         ${chips.map(
-          (value, index) => html` <ino-chip
-            value="${value}"
-            removable="${index !== 0}"
-            @chipRemoved="${(ev) => handleClick(ev.target)}"
-            >${value}
-          </ino-chip>`,
+          (value, index) => html`
+            <ino-chip
+              value="${value}"
+              removable="${index !== 0}"
+              @chipRemoved="${(ev) => handleClick(ev.target)}"
+              >${value}
+            </ino-chip>
+          `,
         )}
       </div>
     `;

diff --git a/packages/storybook/src/stories/ino-list-item/ino-list-item.stories.ts b/packages/storybook/src/stories/ino-list-item/ino-list-item.stories.ts
@@ -47,12 +47,14 @@ export default {
   },
 } as Meta;
 
-const exampleImg = html` <ino-img
-  slot="leading"
-  src="https://cdn-images-1.medium.com/max/1600/1*HP8l7LMMt7Sh5UoO1T-yLQ.png"
-  ratio-width="1"
-  ratio-height="1"
-></ino-img>`;
+const exampleImg = html`
+  <ino-img
+    slot="leading"
+    src="https://cdn-images-1.medium.com/max/1600/1*HP8l7LMMt7Sh5UoO1T-yLQ.png"
+    ratio-width="1"
+    ratio-height="1"
+  ></ino-img>
+`;
 
 const template = new TemplateGenerator<Components.InoListItem>(
   'ino-list-item',
@@ -95,9 +97,10 @@ const templateGraphicAndMeta = new TemplateGenerator<InoListVariants>(
     <ino-list>
       <ino-list-item text="Lorem ipsum dolor sit">
         ${args.avatar && exampleImg}
-        ${args.checkbox && html` <ino-checkbox slot="leading"></ino-checkbox>`}
-        ${args.meta && html`<p slot="trailing">$10.00</p>`}
-        ${args.radio && html` <ino-radio slot="leading" selection></ino-radio>`}
+        ${args.checkbox && html` <ino-checkbox slot="leading"></ino-checkbox> `}
+        ${args.meta && html` <p slot="trailing">$10.00</p> `}
+        ${args.radio &&
+        html` <ino-radio slot="leading" selection></ino-radio> `}
       </ino-list-item>
     </ino-list>
   `,

diff --git a/packages/storybook/src/stories/ino-nav-item/ino-nav-item.stories.ts b/packages/storybook/src/stories/ino-nav-item/ino-nav-item.stories.ts
@@ -19,7 +19,7 @@ type InoNavItemExtended = Components.InoNavItem & {
   icon: boolean;
 };
 
-const icon = html`<ino-icon icon="onboarding"></ino-icon>`; // eslint-disable-next-line no-unexpected-multiline
+const icon = html` <ino-icon icon="onboarding"></ino-icon> `; // eslint-disable-next-line no-unexpected-multiline
 
 const template = new TemplateGenerator<InoNavItemExtended>(
   'ino-nav-item',

diff --git a/packages/storybook/src/stories/ino-popover/ino-popover.stories.ts b/packages/storybook/src/stories/ino-popover/ino-popover.stories.ts
@@ -130,10 +130,12 @@ const templateColors = new TemplateGenerator<InoPopoverExtended>(
     const idDark = 'popover-dark';
     const idPrimary = 'popover-primary';
 
-    const content = html`<p style="padding: 0.5rem">
-      Lorem ipsum do lor sit amet, con sete tur amet ipsum do, con sete tur amet
-      ipsum do.
-    </p>`;
+    const content = html`
+      <p style="padding: 0.5rem">
+        Lorem ipsum do lor sit amet, con sete tur amet ipsum do, con sete tur
+        amet ipsum do.
+      </p>
+    `;
 
     return html`
       <ino-button id="${idLight}">Light</ino-button>

diff --git a/packages/storybook/src/stories/ino-table/ino-table.stories.ts b/packages/storybook/src/stories/ino-table/ino-table.stories.ts
@@ -48,7 +48,8 @@ export default {
   },
 };
 
-const tableContent = html`<tr slot="header-row"></tr>
+const tableContent = html`
+  <tr slot="header-row"></tr>
   <ino-table-header-cell
     column-id="id"
     sort-start="asc"
@@ -144,7 +145,8 @@ const tableContent = html`<tr slot="header-row"></tr>
     <td>95%</td>
     <td>Some information</td>
     <td>Some information</td>
-  </tr> `;
+  </tr>
+`;
 
 const template = new TemplateGenerator<Components.InoTable>(
   'ino-table',
@@ -157,12 +159,14 @@ const template = new TemplateGenerator<Components.InoTable>(
       sticky-header="${args.stickyHeader}"
     >
       ${args.loading
-        ? html`<ino-progress-bar
-            slot="loading-indicator"
-            indeterminate
-            debounce="200"
-            active
-          ></ino-progress-bar>`
+        ? html`
+            <ino-progress-bar
+              slot="loading-indicator"
+              indeterminate
+              debounce="200"
+              active
+            ></ino-progress-bar>
+          `
         : html``}
       ${tableContent}
     </ino-table>

diff --git a/packages/storybook/src/stories/utils.ts b/packages/storybook/src/stories/utils.ts
@@ -48,7 +48,7 @@ export const decorateStoryWithClass = (
   story: () => StoryFnHtmlReturnType,
   className?: string,
 ): StoryFnHtmlReturnType => {
-  return html`<div class="${className ?? ''}">${story()}</div>`;
+  return html` <div class="${className ?? ''}">${story()}</div> `;
 };
 
 export const showSnackbar = (message: string) => {