Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

[Bug]: Table header not respecting container-level dark mode

Open
  • Is something wrong?
#4,111 9 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 2 days

@ernst-dev is already working on this.

Since Jul 22, 2026.

  • #132 by @TrevorBurnham — closed without merging
  • #4765 by @ernst-dev — open

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
25/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Stale
Tech stack
react, scss, typescript
Domain
frontend

Research direction

Use the reproduction in pages/table/dark-mode-container.page.tsx and run npm start:dev to inspect the table inside a dark-mode container on a light-mode page. Trace the table header styles involved in that case; done means the header background renders correctly there while the table still looks correct when the whole page is in dark mode. An open pull request is already linked to this issue.

Written by the indexing model from the issue text.

Description

enhancement
Browser

No response

Package version

v3.0.1156

React version

No response

Description

I have a table that renders inside of a div with the dark mode class. Previously, that table rendered with the correct dark mode styles. However, the background color in the table header recently became incorrect:

Image

To be clear, the table looks fine if the whole page is in dark mode. The styles are only broken if the page is in light mode but the container around the table is in dark mode.

Source code

No response

Reproduction

Add this demo to pages/table/dark-mode-container.page.tsx and run npm start:dev:

// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React from 'react';

import Header from '~components/header';
import Link from '~components/link';
import Table, { TableProps } from '~components/table';

import ScreenshotArea from '../utils/screenshot-area';
import { ARIA_LABELS, createSimpleItems, simpleColumns } from './shared-configs';

const items = createSimpleItems(5);

const columnDefinitions: TableProps.ColumnDefinition<(typeof items)[number]>[] = [
  {
    id: 'text',
    cell: item => <Link>{item.text}</Link>,
    header: 'Text',
  },
  {
    id: 'number',
    cell: item => item.number,
    header: 'Number',
  },
];

export default function DarkModeContainerPage() {
  return (
    <>
      <h1>Table in dark mode container</h1>
      <ScreenshotArea disableAnimations={true}>
        <div className="awsui-dark-mode" style={{ padding: '20px', background: '#0f1b2a' }}>
          <Table
            header={<Header>Table in dark mode</Header>}
            columnDefinitions={columnDefinitions}
            items={items}
            ariaLabels={ARIA_LABELS}
          />
        </div>
      </ScreenshotArea>
    </>
  );
}
Code of Conduct
Dominant language
TypeScript
Stars
2.7k
Forks
248
Avg merge
3d 14h
Merged PRs (30d)
83

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from cloudscape-design/components

All issues in cloudscape-design/components

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.