# Accessible theme, light and dark (Chartist example)

> Four bar series in the color-blind-safe theme, on a light and on a dark background.

`src/main.ts`:

```ts
import 'chartist/styles.css';
import 'chartist/themes/accessible.css';
import './style.css';
import { barChart } from 'chartist';

// The opt-in color-blind-safe palette, on a light and on a dark area.
document.body.classList.add('ct-theme-accessible');
for (const cell of document.querySelectorAll('.cell')) {
  barChart(
    cell,
    {
      labels: ['Q1', 'Q2', 'Q3', 'Q4'],
      series: [
        [5, 4, 3, 7],
        [3, 2, 9, 5],
        [1, 5, 8, 4],
        [6, 3, 4, 2]
      ]
    },
    { seriesBarDistance: 12 }
  );
}
```

`index.html`:

```html
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script type="module" src="/src/main.ts"></script>
  </head>
  <body>
    <div id="chart">
      <div class="cell"></div>
      <div class="cell dark"></div>
    </div>
  </body>
</html>
```

`src/style.css`:

```css
#chart {
  display: flex;
  gap: 24px;
}

.cell {
  width: 480px;
  height: 300px;
  padding: 12px;
  border-radius: 12px;
}

/* A dark area: color-scheme picks the theme's dark values. */
.dark {
  color-scheme: dark;
  background: #1c1718;
  --ct-label-color: rgb(255 255 255 / 0.6);
  --ct-grid-color: rgb(255 255 255 / 0.2);
}

/* Narrower windows: the two charts share the width, and fit the height. */
@media (max-width: 1000px) {
  #chart {
    gap: 12px;
  }

  .cell {
    box-sizing: border-box;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: min(300px, calc(100vh - 40px));
  }
}
```