diff --git a/src/components.d.ts b/src/components.d.ts
index 75305de..bf84984 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -52,6 +52,10 @@ export namespace Components {
           * @default 24 * 60 * 60 * 1000
          */
         "defaultTTL": number;
+        /**
+          * If this flag is set to true, the component will reset the cache and database on every load and disconnect. Already existing data will be deleted.
+         */
+        "doNotCacheOrStoreInDatabase": boolean;
         /**
           * Determines whether components should be emphasized towards their surrounding by border and shadow. If set to true, border and shadows will be shown around the component. It not set, the component won't be surrounded by border and shadow. (optional)
           * @type {boolean}
@@ -168,6 +172,10 @@ declare namespace LocalJSX {
           * @default 24 * 60 * 60 * 1000
          */
         "defaultTTL"?: number;
+        /**
+          * If this flag is set to true, the component will reset the cache and database on every load and disconnect. Already existing data will be deleted.
+         */
+        "doNotCacheOrStoreInDatabase"?: boolean;
         /**
           * Determines whether components should be emphasized towards their surrounding by border and shadow. If set to true, border and shadows will be shown around the component. It not set, the component won't be surrounded by border and shadow. (optional)
           * @type {boolean}
diff --git a/src/components/copy-button/copy-button.tsx b/src/components/copy-button/copy-button.tsx
index 47eb567..e3d87cc 100644
--- a/src/components/copy-button/copy-button.tsx
+++ b/src/components/copy-button/copy-button.tsx
@@ -13,6 +13,19 @@ export class CopyButton {
   @Prop() value!: string;
 
   render() {
+    const normalClasses: string[] = [
+      'hover:bg-blue-200',
+      'dark:hover:bg-blue-800',
+      'hover:text-slate-900',
+      'dark:hover:text-slate-100',
+      'bg-white',
+      'dark:bg-gray-800',
+      'text-black',
+      'dark:text-white',
+    ];
+
+    const highlightClasses: string[] = ['bg-green-200', 'dark:bg-green-800'];
+
     /**
      * Copies the given value to the clipboard and changes the text of the button to "✓ Copied!" for 1.5 seconds.
      * @param event The event that triggered this function.
@@ -46,15 +59,13 @@ export class CopyButton {
       function showSuccess() {
         const el = event.target as HTMLButtonElement;
         el.innerText = '✓ Copied!';
-        el.classList.remove('hover:bg-blue-200');
-        el.classList.remove('bg-white');
-        el.classList.add('bg-green-200');
+        el.classList.remove(...normalClasses);
+        el.classList.add(...highlightClasses);
 
         // Reset the button after 1.5 seconds.
         setTimeout(() => {
-          el.classList.remove('bg-green-200');
-          el.classList.add('hover:bg-blue-200');
-          el.classList.add('bg-white');
+          el.classList.remove(...highlightClasses);
+          el.classList.add(...normalClasses);
           el.innerText = 'Copy';
         }, 1500);
       }
@@ -63,9 +74,7 @@ export class CopyButton {
     return (
       <Host class={'inline-block align-baseline text-xs'}>
         <button
-          class={
-            'bg-white border border-slate-500 text-slate-800 font-medium font-mono rounded-md px-2 py-0.5 hover:bg-blue-200 hover:text-slate-900 flex-none max-h-min items-center'
-          }
+          class={'border border-slate-500 font-medium font-mono rounded-md px-2 py-0.5 flex-none max-h-min items-center ' + normalClasses.join(' ')}
           onClick={event => copyValue(event, this.value)}
         >
           Copy
diff --git a/src/components/pid-component/pid-component.stories.ts b/src/components/pid-component/pid-component.stories.ts
index 5bbd077..859626f 100644
--- a/src/components/pid-component/pid-component.stories.ts
+++ b/src/components/pid-component/pid-component.stories.ts
@@ -147,6 +147,22 @@ const meta: Meta = {
         },
       },
     },
+    doNotCacheOrStoreInDatabase: {
+      name: 'do-not-cache-or-store-in-database',
+      description: 'If this flag is set to true, the component will reset the cache and database on every load and disconnect. Already existing data will be deleted.',
+      defaultValue: false,
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: {
+          summary: 'false',
+        },
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
   },
   args: {
     value: '21.11152/B88E78D4-E1EE-40F7-96CE-EC1AFCFF6343',
@@ -158,6 +174,7 @@ const meta: Meta = {
     levelOfSubcomponents: 1,
     currentLevelOfSubcomponents: 0,
     defaultTTL: 24 * 60 * 60 * 1000,
+    doNotCacheOrStoreInDatabase: false,
   },
 };
 const textDecorator = (story: () => unknown) =>
diff --git a/src/components/pid-component/pid-component.tsx b/src/components/pid-component/pid-component.tsx
index 848c3eb..755966d 100644
--- a/src/components/pid-component/pid-component.tsx
+++ b/src/components/pid-component/pid-component.tsx
@@ -2,7 +2,7 @@ import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
 import { GenericIdentifierType } from '../../utils/GenericIdentifierType';
 import { FoldableItem } from '../../utils/FoldableItem';
 import { FoldableAction } from '../../utils/FoldableAction';
-import { getEntity } from '../../utils/IndexedDBUtil';
+import { clearEntities, getEntity } from '../../utils/IndexedDBUtil';
 import { clearCache } from '../../utils/DataCache';
 
 @Component({
@@ -106,6 +106,12 @@ export class PidComponent {
    */
   @Prop() defaultTTL: number = 24 * 60 * 60 * 1000;
 
+  /**
+   * If this flag is set to true, the component will reset the cache and database on every load and disconnect.
+   * Already existing data will be deleted.
+   */
+  @Prop() doNotCacheOrStoreInDatabase: boolean = false;
+
   /**
    * Stores the parsed identifier object.
    */
@@ -166,6 +172,12 @@ export class PidComponent {
    * Parses the value and settings, generates the items and actions and sets the displayStatus to "loaded".
    */
   async connectedCallback() {
+    if (this.doNotCacheOrStoreInDatabase) {
+      console.log('Clearing cache and database for ', this.value);
+      clearCache();
+      clearEntities();
+    }
+
     let settings: {
       type: string;
       values: {
@@ -216,7 +228,7 @@ export class PidComponent {
    */
   render() {
     return (
-      <Host class="inline flex-grow max-w-full font-sans flex-wrap align-baseline items-center text-xs">
+      <Host class="inline flex-grow max-w-full font-sans flex-wrap align-baseline items-center text-xs dark:text-white">
         {
           // Check if there are any items or actions to show
           (this.items.length === 0 && this.actions.length === 0) || this.hideSubcomponents ? (
@@ -227,12 +239,12 @@ export class PidComponent {
                   this.currentLevelOfSubcomponents === 0
                     ? //(w/o sub components)
                       'group ' +
-                      (this.emphasizeComponent || this.temporarilyEmphasized ? 'rounded-md shadow-md border px-1 bg-white ' : 'bg-white/40') +
+                      (this.emphasizeComponent || this.temporarilyEmphasized ? 'rounded-md shadow-md border px-1 bg-white dark:bg-gray-800' : 'bg-white/40 dark:bg-gray-800/40') +
                       'text-xs text-clip inline-flex flex-grow open:align-top open:w-full ease-in-out transition-all duration-200 overflow-y-hidden font-bold font-mono cursor-pointer list-none overflow-x-hidden space-x-3 flex-nowrap flex-shrink-0 items-center'
                     : ''
                 }
               >
-                <span class={'font-medium font-mono inline-flex flex-nowrap overflow-x-auto text-xs select-all'}>
+                <span class={'font-medium font-mono inline-flex flex-nowrap overflow-x-auto text-xs select-none'}>
                   {
                     // Render the preview of the identifier object defined in the specific implementation of GenericIdentifierType
                     this.identifierObject.renderPreview()
@@ -245,8 +257,8 @@ export class PidComponent {
               </span>
             ) : (
               <span class={'inline-flex items-center transition ease-in-out'}>
-                <svg class="animate-spin ml-1 mr-3 h-5 w-5 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                <svg class="animate-spin ml-1 mr-3 h-5 w-5 text-black dark:text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                  <circle class="opacity-25 dark:opacity-75" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
                   <path
                     class="opacity-75"
                     fill="currentColor"
@@ -260,7 +272,7 @@ export class PidComponent {
             <details
               class={
                 'group ' +
-                (this.emphasizeComponent || this.temporarilyEmphasized ? 'rounded-md border pl-0.5 py-0 bg-white bg-opacity-0' : 'bg-white/60') +
+                (this.emphasizeComponent || this.temporarilyEmphasized ? 'bg-white dark:bg-gray-800 rounded-md border pl-0.5 py-0' : 'bg-white/60 dark:bg-gray-800/60') +
                 'text-clip inline flex-grow font-sans open:align-top open:w-full ease-in-out transition-all duration-200'
               }
               open={this.openByDefault}
@@ -288,7 +300,7 @@ export class PidComponent {
                   ) : (
                     ''
                   )}
-                  <span class={'font-medium font-mono inline-flex flex-nowrap overflow-x-auto text-sm select-all'}>
+                  <span class={'font-medium font-mono inline-flex flex-nowrap overflow-x-auto text-sm select-none'}>
                     {
                       // Render the preview of the identifier object defined in the specific implementation of GenericIdentifierType
                       this.identifierObject.renderPreview()
@@ -308,15 +320,9 @@ export class PidComponent {
                 // If there are any items to show, render the table
                 this.items.length > 0 ? (
                   <div>
-                    <div class="resize-y divide-y text-sm leading-6 bg-gray-100 m-1 p-0.5 h-64 max-h-fit overflow-y-scroll border rounded min-h-[4rem]">
+                    <div class="resize-y divide-y text-sm leading-6 bg-gray-100 dark:bg-gray-900 m-1 p-0.5 h-64 max-h-fit overflow-y-scroll border rounded min-h-[4rem]">
                       <table class="text-left w-full text-sm font-sans select-text">
-                        <thead class="bg-slate-600 flex text-slate-200 w-full rounded-t">
-                          <tr class="flex w-full rounded font-semibold">
-                            <th class="px-1 w-1/4">Key</th>
-                            <th class="px-1 w-3/4">Value</th>
-                          </tr>
-                        </thead>
-                        <tbody class="bg-grey-100 flex flex-col items-center justify-between overflow-y-scroll w-full rounded-b">
+                        <tbody class="bg-grey-100 dark:bg-gray-900 flex flex-col items-center justify-between overflow-y-scroll w-full rounded-b">
                           {this.items
                             .filter((_, index) => {
                               // Filter out items that are not on the current page
@@ -325,17 +331,17 @@ export class PidComponent {
                             .map(value => (
                               // Render a row for every item
                               // return (
-                              <tr class={'odd:bg-slate-200 flex w-full'}>
-                                <td class={'overflow-x-auto p-1 w-1/4 font-mono'}>
+                              <tr class={'odd:bg-slate-200 dark:odd:bg-slate-800 flex w-full'}>
+                                <td class={'overflow-x-auto p-1 w-1/6 font-mono'}>
                                   <a
                                     role="link"
-                                    class="right-0 focus:outline-none focus:ring-gray-300 rounded-md focus:ring-offset-2 focus:ring-2 focus:bg-gray-200 relative md:mt-0 inline flex-nowrap"
+                                    class="right-0 focus:outline-none focus:ring-gray-300 dark:focus:ring-gray-700 rounded-md focus:ring-offset-2 focus:ring-2 focus:bg-gray-200 dark:focus:bg-gray-800 relative md:mt-0 inline flex-nowrap"
                                     onMouseOver={this.showTooltip}
                                     onFocus={this.showTooltip}
                                     onMouseOut={this.hideTooltip}
                                   >
                                     <div class="cursor-pointer align-top justify-between flex-nowrap">
-                                      <a href={value.keyLink} target={'_blank'} rel={'noopener noreferrer'} class={'mr-2 text-blue-400 justify-start float-left'}>
+                                      <a href={value.keyLink} target={'_blank'} rel={'noopener noreferrer'} class={'mr-2 text-blue-500 justify-start float-left'}>
                                         {value.keyTitle}
                                       </a>
                                       <svg
@@ -359,13 +365,13 @@ export class PidComponent {
                                     </div>
                                     <p
                                       role="tooltip"
-                                      class="hidden z-20 mt-1 transition duration-100 ease-in-out shadow-md bg-white rounded text-xs text-gray-600 p-1 flex-wrap overflow-clip"
+                                      class="hidden z-20 mt-1 transition duration-100 ease-in-out shadow-md bg-white dark:bg-gray-800 rounded text-xs text-gray-500 p-1 flex-wrap overflow-clip"
                                     >
                                       {value.keyTooltip}
                                     </p>
                                   </a>
                                 </td>
-                                <td class={'align-top overflow-x-auto text-sm p-1 w-3/4 select-text flex '}>
+                                <td class={'align-top overflow-x-auto text-sm p-1 w-5/6 select-text flex '}>
                                   <span class={'flex-grow'}>
                                     {
                                       // Load a foldable subcomponent if subcomponents are not disabled (hideSubcomponents), and the current level of subcomponents is not the total level of subcomponents. If the subcomponent is on the bottom level of the hierarchy, render just a preview. If the value should not be resolved (isFoldable), just render the value as text.
@@ -400,10 +406,10 @@ export class PidComponent {
                         </tbody>
                       </table>
                     </div>
-                    <div class="flex items-center justify-between border-t border-gray-200 bg-white px-1 py-1 sm:px-1 max-h-12">
+                    <div class="flex items-center justify-between border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-800 px-1 py-1 sm:px-1 max-h-12">
                       <div class="hidden sm:flex sm:flex-1 sm:flex-nowrap sm:items-center sm:justify-between text-sm">
                         <div class={''}>
-                          <p class="text-sm text-gray-700">
+                          <p class="text-sm text-gray-700 dark:text-gray-300">
                             Showing
                             <span class="font-medium"> {1 + this.tablePage * this.amountOfItems} </span>
                             to
@@ -420,10 +426,10 @@ export class PidComponent {
                                 onClick={() => {
                                   this.tablePage = Math.max(this.tablePage - 1, 0);
                                 }}
-                                class="relative inline-flex items-center rounded-l-md px-1 py-1 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0"
+                                class="fill-current relative inline-flex items-center rounded-l-md px-1 py-1 text-gray-500 ring-1 ring-inset ring-gray-300 dark:ring-gray-700 hover:bg-gray-50 dark:hover:bg-gray-950 focus:z-20 focus:outline-offset-0"
                               >
                                 <span class="sr-only">Previous</span>
-                                <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                <svg class="h-5 w-5" viewBox="0 0 20 20" aria-hidden="true">
                                   <path
                                     fill-rule="evenodd"
                                     d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
@@ -439,8 +445,8 @@ export class PidComponent {
                                       onClick={() => (this.tablePage = index)}
                                       class={
                                         index === this.tablePage
-                                          ? 'relative z-10 inline-flex items-center bg-blue-600 px-2 py-1 text-sm font-semibold text-white focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
-                                          : 'relative hidden items-center px-2 py-1 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 md:inline-flex'
+                                          ? 'relative z-10 inline-flex items-center bg-blue-500 px-2 py-1 text-sm font-semibold text-white focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500'
+                                          : 'relative hidden items-center px-2 py-1 text-sm font-semibold text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 hover:bg-gray-50 dark:hover:bg-gray-950 focus:z-20 focus:outline-offset-0 md:inline-flex'
                                       }
                                     >
                                       {index + 1}
@@ -451,10 +457,10 @@ export class PidComponent {
                                 onClick={() => {
                                   this.tablePage = Math.min(this.tablePage + 1, Math.floor(this.items.length / this.amountOfItems));
                                 }}
-                                class="relative inline-flex items-center rounded-r-md px-1 py-1 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0"
+                                class="fill-current relative inline-flex items-center rounded-r-md px-1 py-1 text-gray-500 ring-1 ring-inset ring-gray-300 dark:ring-gray-700 hover:bg-gray-50 dark:hover:bg-gray-950 focus:z-20 focus:outline-offset-0"
                               >
                                 <span class="sr-only">Next</span>
-                                <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                <svg class="h-5 w-5" viewBox="0 0 20 20" aria-hidden="true">
                                   <path
                                     fill-rule="evenodd"
                                     d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
@@ -484,7 +490,7 @@ export class PidComponent {
                         style += 'bg-blue-500 text-white';
                         break;
                       case 'secondary':
-                        style += 'bg-slate-200 text-blue-500';
+                        style += 'bg-slate-200 dark:bg-slate-800 text-blue-500';
                         break;
                       case 'danger':
                         style += 'bg-red-500 text-white';
@@ -508,6 +514,15 @@ export class PidComponent {
     );
   }
 
+  disconnectedCallback() {
+    console.log('Disconnected callback for ', this.value);
+    if (this.doNotCacheOrStoreInDatabase) {
+      console.log('Clearing cache and database for ', this.value);
+      clearCache();
+      clearEntities();
+    }
+  }
+
   /**
    * Toggles the loadSubcomponents property if the current level of subcomponents is not the total level of subcomponents.
    */
diff --git a/src/components/pid-component/readme.md b/src/components/pid-component/readme.md
index e7e677a..14d9483 100644
--- a/src/components/pid-component/readme.md
+++ b/src/components/pid-component/readme.md
@@ -5,18 +5,19 @@
 
 ## Properties
 
-| Property                      | Attribute                        | Description                                                                                                                                                                                                                                                                                                                                            | Type      | Default               |
-| ----------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------- | --------------------- |
-| `amountOfItems`               | `amount-of-items`                | The number of items to show in the table per page. Defaults to 10. (optional)                                                                                                                                                                                                                                                                          | `number`  | `10`                  |
-| `currentLevelOfSubcomponents` | `current-level-of-subcomponents` | The current level of subcomponents. Defaults to 0. (optional)                                                                                                                                                                                                                                                                                          | `number`  | `0`                   |
-| `defaultTTL`                  | `default-t-t-l`                  | Determines the default time to live (TTL) for entries in the IndexedDB. Defaults to 24 hours. Units are in milliseconds. (optional)                                                                                                                                                                                                                    | `number`  | `24 * 60 * 60 * 1000` |
-| `emphasizeComponent`          | `emphasize-component`            | Determines whether components should be emphasized towards their surrounding by border and shadow. If set to true, border and shadows will be shown around the component. It not set, the component won't be surrounded by border and shadow. (optional)                                                                                               | `boolean` | `true`                |
-| `hideSubcomponents`           | `hide-subcomponents`             | Determines whether subcomponents should generally be shown or not. If set to true, the component won't show any subcomponents. If not set, the component will show subcomponents if the current level of subcomponents is not the total level of subcomponents or greater. (optional)                                                                  | `boolean` | `undefined`           |
-| `levelOfSubcomponents`        | `level-of-subcomponents`         | The total number of levels of subcomponents to show. Defaults to 1. (optional)                                                                                                                                                                                                                                                                         | `number`  | `1`                   |
-| `openByDefault`               | `open-by-default`                | Determines whether the component is open or not by default. (optional)                                                                                                                                                                                                                                                                                 | `boolean` | `undefined`           |
-| `settings`                    | `settings`                       | A stringified JSON object containing settings for this component. The resulting object is passed to every subcomponent, so that every component has the same settings. Values and the according type are defined by the components themselves. (optional)  Schema: ```typescript {  type: string,  values: {   name: string,   value: any  }[] }[] ``` | `string`  | `undefined`           |
-| `showTopLevelCopy`            | `show-top-level-copy`            | Determines whether on the top level the copy button is shown. If set to true, the copy button is shown also on the top level. It not set, the copy button is only shown for sub-components. (optional)                                                                                                                                                 | `boolean` | `true`                |
-| `value`                       | `value`                          | The value to parse, evaluate and render.                                                                                                                                                                                                                                                                                                               | `string`  | `undefined`           |
+| Property                      | Attribute                           | Description                                                                                                                                                                                                                                                                                                                                            | Type      | Default               |
+| ----------------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------- | --------------------- |
+| `amountOfItems`               | `amount-of-items`                   | The number of items to show in the table per page. Defaults to 10. (optional)                                                                                                                                                                                                                                                                          | `number`  | `10`                  |
+| `currentLevelOfSubcomponents` | `current-level-of-subcomponents`    | The current level of subcomponents. Defaults to 0. (optional)                                                                                                                                                                                                                                                                                          | `number`  | `0`                   |
+| `defaultTTL`                  | `default-t-t-l`                     | Determines the default time to live (TTL) for entries in the IndexedDB. Defaults to 24 hours. Units are in milliseconds. (optional)                                                                                                                                                                                                                    | `number`  | `24 * 60 * 60 * 1000` |
+| `doNotCacheOrStoreInDatabase` | `do-not-cache-or-store-in-database` | If this flag is set to true, the component will reset the cache and database on every load and disconnect. Already existing data will be deleted.                                                                                                                                                                                                      | `boolean` | `false`               |
+| `emphasizeComponent`          | `emphasize-component`               | Determines whether components should be emphasized towards their surrounding by border and shadow. If set to true, border and shadows will be shown around the component. It not set, the component won't be surrounded by border and shadow. (optional)                                                                                               | `boolean` | `true`                |
+| `hideSubcomponents`           | `hide-subcomponents`                | Determines whether subcomponents should generally be shown or not. If set to true, the component won't show any subcomponents. If not set, the component will show subcomponents if the current level of subcomponents is not the total level of subcomponents or greater. (optional)                                                                  | `boolean` | `undefined`           |
+| `levelOfSubcomponents`        | `level-of-subcomponents`            | The total number of levels of subcomponents to show. Defaults to 1. (optional)                                                                                                                                                                                                                                                                         | `number`  | `1`                   |
+| `openByDefault`               | `open-by-default`                   | Determines whether the component is open or not by default. (optional)                                                                                                                                                                                                                                                                                 | `boolean` | `undefined`           |
+| `settings`                    | `settings`                          | A stringified JSON object containing settings for this component. The resulting object is passed to every subcomponent, so that every component has the same settings. Values and the according type are defined by the components themselves. (optional)  Schema: ```typescript {  type: string,  values: {   name: string,   value: any  }[] }[] ``` | `string`  | `undefined`           |
+| `showTopLevelCopy`            | `show-top-level-copy`               | Determines whether on the top level the copy button is shown. If set to true, the copy button is shown also on the top level. It not set, the copy button is only shown for sub-components. (optional)                                                                                                                                                 | `boolean` | `true`                |
+| `value`                       | `value`                             | The value to parse, evaluate and render.                                                                                                                                                                                                                                                                                                               | `string`  | `undefined`           |
 
 
 ## Dependencies
diff --git a/src/rendererModules/EmailType.tsx b/src/rendererModules/EmailType.tsx
index eda4a19..00b3389 100644
--- a/src/rendererModules/EmailType.tsx
+++ b/src/rendererModules/EmailType.tsx
@@ -36,9 +36,19 @@ export class EmailType extends GenericIdentifierType {
                 href={'mailto:' + email}
                 rel={'noopener noreferrer'}
                 target="_blank"
-                class={'items-center inline-flex font-mono text-sm text-blue-400 border border-slate-400 bg-white/60 rounded-md px-1 py-0.5'}
+                class={
+                  'items-center inline-flex font-mono text-sm text-blue-400 dark:text-blue-600 border border-slate-400 dark:border-slate-600  bg-white/60 dark:bg-gray-800/60 rounded-md px-1 py-0.5'
+                }
               >
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" viewBox="0 0 24 24" stroke-width="1" stroke="black" height="20px" class={'mr-2'}>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  aria-hidden="true"
+                  viewBox="0 0 24 24"
+                  stroke-width="1"
+                  height="20px"
+                  class={'mr-2 stroke-black dark:stroke-white'}
+                >
                   <path
                     stroke-linecap="round"
                     stroke-linejoin="round"