diff --git a/addon/components/mox/text-area.hbs b/addon/components/mox/text-area.hbs
index 584f2d5..ee39958 100644
--- a/addon/components/mox/text-area.hbs
+++ b/addon/components/mox/text-area.hbs
@@ -4,9 +4,13 @@
 <textarea
   id={{@id}}
   type="text"
-  class="px-4 py-2 w-full bg-gray-800 text-white text-sm rounded block resize-none
-  disabled:bg-gray-700 disabled:text-gray-500
-  {{if this.isValid 'border-gray-500 focus:border-cyan-500 focus:ring-cyan-500' 'border-red-800 active:border-red-900 focus:border-red-900 focus:ring-red-900'}}"
+  class="resize-none px-4 py-2 w-full text-gray-800 dark:text-white text-sm rounded bg-white dark:bg-gray-800
+    read-only:text-gray-800 dark:read-only:text-white disabled:text-gray-600 dark:disabled:text-gray-500
+    disabled:bg-gray-200 read-only:bg-gray-50 disabled:border-gray-200 read-only:border-gray-400
+    dark:disabled:bg-gray-700 dark:read-only:bg-gray-700 dark:disabled:border-gray-700 dark:read-only:border-gray-700 disabled:cursor-not-allowed
+    read-only:focus:border-cyan-500 dark:read-only:focus:border-white dark:ready-only:focus:ring-white
+    {{if this.isValid 'border-gray-400 dark:border-gray-500 focus:border-cyan-500 focus:ring-cyan-500'
+    'border-red-500 dark:border-red-800 active:border-red-500 dark:active:border-red-900 focus:border-red-500 dark:focus:border-red-900 focus:ring-red-500 dark:focus:ring-red-900'}}"
   value={{@value}}
   placeholder={{@placeholder}}
   {{on "input" @onInput}}
diff --git a/stories/mox-text-area-light.stories.js b/stories/mox-text-area-light.stories.js
new file mode 100644
index 0000000..e592c9c
--- /dev/null
+++ b/stories/mox-text-area-light.stories.js
@@ -0,0 +1,73 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+export default {
+  title: 'Mox Light/Mox::TextArea',
+  parameters: {
+    backgrounds: {
+      default: 'Mute',
+      values: [
+        {
+          name: 'White',
+          value: '#ffffff',
+        },
+        {
+          name: 'Mute',
+          value: '#F3F4F6',
+        },
+      ],
+    },
+  },
+};
+
+const Template = (args) => ({
+  template: hbs`<Mox::TextArea class="mb-2"
+    @value={{this.value}} @onInput={{this.inputAction}}
+    @placeholder={{this.placeholder}} @label={{this.label}}
+    disabled={{this.isDisabled}} @isRequired={{this.isRequired}}
+    @isValid={{this.isValid}} @error={{this.error}} />`,
+  context: args,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  value: 'Moon',
+  placeholder: 'Name',
+  label: 'Name',
+  inputAction: () => {},
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  value: 'Sun',
+  isDisabled: true,
+  label: 'Name',
+  inputAction: () => {},
+};
+
+export const Placeholder = Template.bind({});
+Placeholder.args = {
+  value: '',
+  placeholder: 'Name',
+  label: 'Name',
+  inputAction: () => {},
+};
+
+export const Required = Template.bind({});
+Required.args = {
+  value: 'Neptune',
+  placeholder: 'Your Name',
+  label: 'Name',
+  isRequired: true,
+  inputAction: () => {},
+};
+
+export const Errors = Template.bind({});
+Errors.args = {
+  value: '',
+  placeholder: 'e.g. Saturn',
+  label: 'Planet Name',
+  isRequired: true,
+  isValid: false,
+  error: 'You forgot to specify a planet',
+  inputAction: () => {},
+};
diff --git a/stories/mox-text-area.stories.js b/stories/mox-text-area.stories.js
index ae894d5..19bd6cc 100644
--- a/stories/mox-text-area.stories.js
+++ b/stories/mox-text-area.stories.js
@@ -10,11 +10,14 @@ export default {
 };
 
 const Template = (args) => ({
-  template: hbs`<Mox::TextArea class="mb-2"
+  template: hbs`
+  <div class="dark">
+    <Mox::TextArea class="mb-2"
     @value={{this.value}} @onInput={{this.inputAction}}
     @placeholder={{this.placeholder}} @label={{this.label}}
     disabled={{this.isDisabled}} @isRequired={{this.isRequired}}
-    @isValid={{this.isValid}} @error={{this.error}} />`,
+    @isValid={{this.isValid}} @error={{this.error}} />
+  </div>`,
   context: args,
 });
 
diff --git a/tests/integration/components/mox/text-area-test.js b/tests/integration/components/mox/text-area-test.js
index daae45d..f905aa0 100644
--- a/tests/integration/components/mox/text-area-test.js
+++ b/tests/integration/components/mox/text-area-test.js
@@ -39,35 +39,6 @@ module('Integration | Component | mox/text-area', function (hooks) {
     assert.dom('[data-test-mox-text-area]').isDisabled();
   });
 
-  test('it highlights the field if it is invalid', async function (assert) {
-    this.set('onInput', () => {});
-
-    await render(
-      hbs`<Mox::TextArea @onInput={{this.onInput}} @isValid={{false}} />`
-    );
-
-    assert.dom('[data-test-mox-text-area]').hasClass('border-red-800');
-  });
-
-  test('it allows to validate and invalidate the field after rendering', async function (assert) {
-    this.set('onInput', () => {});
-    this.set('isValid', null);
-
-    await render(
-      hbs`<Mox::TextArea @onInput={{this.onInput}} @isValid={{this.isValid}} />`
-    );
-
-    assert.dom('[data-test-mox-text-area]').doesNotHaveClass('border-red-800');
-
-    this.set('isValid', false);
-
-    assert.dom('[data-test-mox-text-area]').hasClass('border-red-800');
-
-    this.set('isValid', true);
-
-    assert.dom('[data-test-mox-text-area]').doesNotHaveClass('border-red-800');
-  });
-
   test('it may display a validation error alongside the field', async function (assert) {
     this.set('onInput', () => {});
 
@@ -80,37 +51,165 @@ module('Integration | Component | mox/text-area', function (hooks) {
       .includesText(`Name can't be blank`);
   });
 
-  test('the disabled input state is accessible (dark mode)', async function (assert) {
-    this.set('onInput', () => {});
-
-    await render(hbs`
-      <div class="dark bg-gray-900 p-4">
-      <Mox::TextArea @onInput={{this.onInput}} @label="Address" @id="address-field" disabled />
-      </div>`);
-    await a11yAudit();
-    assert.ok(true, 'no accessibility errors');
-  });
-
-  test('the disabled input state used together with an external label is accessible', async function (assert) {
-    this.set('onInput', () => {});
-
-    await render(hbs`
-      <div class="dark bg-gray-900 p-4">
-      <label for="address-field">Address</label>
-      <Mox::TextArea @onInput={{this.onInput}} id="address-field" disabled />
-      </div>
-    `);
-    await a11yAudit();
-    assert.ok(true, 'no accessibility errors');
+  module('dark mode', function () {
+    test('the disabled input state is accessible (dark mode)', async function (assert) {
+      this.set('onInput', () => {});
+
+      await render(hbs`
+        <div class="dark bg-gray-900 p-4">
+        <Mox::TextArea @onInput={{this.onInput}} @label="Address" @id="address-field" disabled />
+        </div>`);
+      await a11yAudit();
+      assert.ok(true, 'no accessibility errors');
+    });
+
+    test('the disabled input state used together with an external label is accessible', async function (assert) {
+      this.set('onInput', () => {});
+
+      await render(hbs`
+        <div class="dark bg-gray-900 p-4">
+        <label for="address-field">Address</label>
+        <Mox::TextArea @onInput={{this.onInput}} id="address-field" disabled />
+        </div>
+      `);
+      await a11yAudit();
+      assert.ok(true, 'no accessibility errors');
+    });
+
+    test('the invalid input state is accessible', async function (assert) {
+      this.set('onInput', () => {});
+
+      await render(
+        hbs`<div class="dark bg-gray-900 p-4"><Mox::TextArea @onInput={{this.onInput}} @label="Address" @id="address-field" @isValid={{false}} @error="Missing something?" /></div>`
+      );
+      await a11yAudit();
+      assert.ok(true, 'no accessibility errors');
+    });
+
+    test('it highlights the field if it is invalid', async function (assert) {
+      this.set('onInput', () => {});
+
+      await render(
+        hbs`<div class="dark bg-gray-900 p-4"><Mox::TextArea @onInput={{this.onInput}} @isValid={{false}} /></div>`
+      );
+
+      assert.dom('[data-test-mox-text-area]').hasClass('dark:border-red-800');
+      assert
+        .dom('[data-test-mox-text-area]')
+        .hasStyle({ borderColor: 'rgb(153, 27, 27)' });
+    });
+
+    test('it allows to validate and invalidate the field after rendering', async function (assert) {
+      this.set('onInput', () => {});
+      this.set('isValid', null);
+
+      await render(
+        hbs`<div class="dark bg-gray-900 p-4"><Mox::TextArea @onInput={{this.onInput}} @isValid={{this.isValid}} /></div>`
+      );
+
+      assert
+        .dom('[data-test-mox-text-area]')
+        .doesNotHaveClass('dark:border-red-800');
+      assert
+        .dom('[data-test-mox-text-area]')
+        .hasStyle({ borderColor: 'rgb(107, 114, 128)' });
+
+      this.set('isValid', false);
+
+      assert.dom('[data-test-mox-text-area]').hasClass('dark:border-red-800');
+      assert
+        .dom('[data-test-mox-text-area]')
+        .hasStyle({ borderColor: 'rgb(153, 27, 27)' });
+
+      this.set('isValid', true);
+
+      assert
+        .dom('[data-test-mox-text-area]')
+        .doesNotHaveClass('dark:border-red-800');
+      assert
+        .dom('[data-test-mox-text-area]')
+        .hasStyle({ borderColor: 'rgb(107, 114, 128)' });
+    });
   });
 
-  test('the invalid input state is accessible', async function (assert) {
-    this.set('onInput', () => {});
-
-    await render(
-      hbs`<div class="dark bg-gray-900 p-4"><Mox::TextArea @onInput={{this.onInput}} @label="Address" @id="address-field" @isValid={{false}} @error="Missing something?" /></div>`
-    );
-    await a11yAudit();
-    assert.ok(true, 'no accessibility errors');
+  module('light mode', function () {
+    test('the disabled input state is accessible (light mode)', async function (assert) {
+      this.set('onInput', () => {});
+
+      await render(hbs`
+        <div class="bg-gray-50 p-4">
+          <Mox::TextArea @onInput={{this.onInput}} @label="Address" @id="address-field" disabled />
+        </div>`);
+      await a11yAudit();
+      assert.ok(true, 'no accessibility errors');
+    });
+
+    test('the disabled input state used together with an external label is accessible', async function (assert) {
+      this.set('onInput', () => {});
+
+      await render(hbs`
+        <div class="bg-gray-50 p-4">
+          <label for="address-field">Address</label>
+          <Mox::TextArea @onInput={{this.onInput}} id="address-field" disabled />
+        </div>
+      `);
+      await a11yAudit();
+      assert.ok(true, 'no accessibility errors');
+    });
+
+    test('the invalid input state is accessible', async function (assert) {
+      this.set('onInput', () => {});
+
+      await render(
+        hbs`<div class="bg-gray-50 p-4"><Mox::TextArea @onInput={{this.onInput}} @label="Address" @id="address-field" @isValid={{false}} @error="Missing something?" /></div>`
+      );
+      await a11yAudit();
+      assert.ok(true, 'no accessibility errors');
+    });
+
+    test('it highlights the field if it is invalid', async function (assert) {
+      this.set('onInput', () => {});
+
+      await render(
+        hbs`<div class="bg-gray-50 p-4"><Mox::TextArea @onInput={{this.onInput}} @isValid={{false}} /></div>`
+      );
+
+      assert.dom('[data-test-mox-text-area]').hasClass('border-red-500');
+      assert
+        .dom('[data-test-mox-text-area]')
+        .hasStyle({ borderColor: 'rgb(239, 68, 68)' });
+    });
+
+    test('it allows to validate and invalidate the field after rendering', async function (assert) {
+      this.set('onInput', () => {});
+      this.set('isValid', null);
+
+      await render(
+        hbs`<div class="bg-gray-50 p-4"><Mox::TextArea @onInput={{this.onInput}} @isValid={{this.isValid}} /></div>`
+      );
+
+      assert
+        .dom('[data-test-mox-text-area]')
+        .doesNotHaveClass('border-red-500');
+      assert
+        .dom('[data-test-mox-text-area]')
+        .hasStyle({ borderColor: 'rgb(156, 163, 175)' });
+
+      this.set('isValid', false);
+
+      assert.dom('[data-test-mox-text-area]').hasClass('border-red-500');
+      assert
+        .dom('[data-test-mox-text-area]')
+        .hasStyle({ borderColor: 'rgb(239, 68, 68)' });
+
+      this.set('isValid', true);
+
+      assert
+        .dom('[data-test-mox-text-area]')
+        .doesNotHaveClass('border-red-500');
+      assert
+        .dom('[data-test-mox-text-area]')
+        .hasStyle({ borderColor: 'rgb(156, 163, 175)' });
+    });
   });
 });