diff --git a/renderers/angular/src/v0_8/components/datetime-input.ts b/renderers/angular/src/v0_8/components/datetime-input.ts
index 1ff8e0b4a..6ced9d08a 100644
--- a/renderers/angular/src/v0_8/components/datetime-input.ts
+++ b/renderers/angular/src/v0_8/components/datetime-input.ts
@@ -41,6 +41,11 @@ import { Types } from '../types';
     :host {
       display: block;
     }
+    input,
+    input::-webkit-datetime-edit,
+    input::-webkit-datetime-edit-fields-wrapper {
+      color: #333;
+    }
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
diff --git a/renderers/angular/src/v0_9/catalog/basic/date-time-input.component.ts b/renderers/angular/src/v0_9/catalog/basic/date-time-input.component.ts
index 3050c22fa..1de7a2fce 100644
--- a/renderers/angular/src/v0_9/catalog/basic/date-time-input.component.ts
+++ b/renderers/angular/src/v0_9/catalog/basic/date-time-input.component.ts
@@ -79,6 +79,11 @@ import { BoundProperty } from '../../core/types';
         font-family: inherit;
         flex: 1;
       }
+      .a2ui-date-time-input,
+      .a2ui-date-time-input::-webkit-datetime-edit,
+      .a2ui-date-time-input::-webkit-datetime-edit-fields-wrapper {
+        color: #333;
+      }
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/renderers/lit/src/0.8/ui/datetime-input.ts b/renderers/lit/src/0.8/ui/datetime-input.ts
index 388a31b03..6263ffff8 100644
--- a/renderers/lit/src/0.8/ui/datetime-input.ts
+++ b/renderers/lit/src/0.8/ui/datetime-input.ts
@@ -58,6 +58,12 @@ export class DateTimeInput extends Root {
         border: 1px solid #ccc;
         width: 100%;
       }
+
+      input,
+      input::-webkit-datetime-edit,
+      input::-webkit-datetime-edit-fields-wrapper {
+        color: #333;
+      }
     `,
   ];
 
diff --git a/renderers/lit/src/v0_9/catalogs/basic/components/DateTimeInput.ts b/renderers/lit/src/v0_9/catalogs/basic/components/DateTimeInput.ts
index ea7012467..3b0cb987b 100644
--- a/renderers/lit/src/v0_9/catalogs/basic/components/DateTimeInput.ts
+++ b/renderers/lit/src/v0_9/catalogs/basic/components/DateTimeInput.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { html, nothing } from "lit";
+import { css, html, nothing } from "lit";
 import { customElement } from "lit/decorators.js";
 import { DateTimeInputApi } from "@a2ui/web_core/v0_9/basic_catalog";
 import { A2uiLitElement, A2uiController } from "@a2ui/lit/v0_9";
@@ -27,6 +27,14 @@ export class A2uiDateTimeInputElement extends A2uiLitElement<
     return new A2uiController(this, DateTimeInputApi);
   }
 
+  static styles = css`
+    input,
+    input::-webkit-datetime-edit,
+    input::-webkit-datetime-edit-fields-wrapper {
+      color: #333;
+    }
+  `;
+
   render() {
     const props = this.controller.props;
     if (!props) return nothing;
diff --git a/renderers/react/src/v0_8/styles/index.ts b/renderers/react/src/v0_8/styles/index.ts
index f7f41ac44..7ac57024d 100644
--- a/renderers/react/src/v0_8/styles/index.ts
+++ b/renderers/react/src/v0_8/styles/index.ts
@@ -293,6 +293,11 @@ export const componentSpecificStyles: string = `
   border: 1px solid #ccc;
   width: 100%;
 }
+:where(.a2ui-surface .a2ui-datetime-input) input,
+:where(.a2ui-surface .a2ui-datetime-input) input::-webkit-datetime-edit,
+:where(.a2ui-surface .a2ui-datetime-input) input::-webkit-datetime-edit-fields-wrapper {
+  color: #333;
+}
 
 .a2ui-surface *,
 .a2ui-surface *::before,
diff --git a/renderers/react/src/v0_9/catalog/basic/components/DateTimeInput.tsx b/renderers/react/src/v0_9/catalog/basic/components/DateTimeInput.tsx
index 2537c99c3..b84159df2 100644
--- a/renderers/react/src/v0_9/catalog/basic/components/DateTimeInput.tsx
+++ b/renderers/react/src/v0_9/catalog/basic/components/DateTimeInput.tsx
@@ -37,8 +37,13 @@ export const DateTimeInput = createReactComponent(DateTimeInputApi, ({props}) =>
     border: STANDARD_BORDER,
     borderRadius: STANDARD_RADIUS,
     boxSizing: 'border-box',
+    color: '#333',
   };
 
+  // CSS class scoped to this instance for pseudo-element rules that
+  // cannot be expressed as React inline styles (WebKit date/time inputs).
+  const scopeClass = `a2ui-dti-${uniqueId.replace(/:/g, '')}`;
+
   return (
     <div
       style={{
@@ -49,6 +54,13 @@ export const DateTimeInput = createReactComponent(DateTimeInputApi, ({props}) =>
         margin: LEAF_MARGIN,
       }}
     >
+      <style>{`
+        .${scopeClass},
+        .${scopeClass}::-webkit-datetime-edit,
+        .${scopeClass}::-webkit-datetime-edit-fields-wrapper {
+          color: #333;
+        }
+      `}</style>
       {props.label && (
         <label htmlFor={uniqueId} style={{fontSize: '14px', fontWeight: 'bold'}}>
           {props.label}
@@ -56,6 +68,7 @@ export const DateTimeInput = createReactComponent(DateTimeInputApi, ({props}) =>
       )}
       <input
         id={uniqueId}
+        className={scopeClass}
         type={type}
         style={style}
         value={props.value || ''}