---
id: markdown-features
title: Style Guide - Markdown Features
sidebar_label: Markdown Features
---

import { Dark, Light } from '/src/components/ColorMode';

## Overview

We have developed several [React](https://reactjs.org/) components for assisting with writing documentation.

## Features

### Light/Dark Mode Switch

#### Usage:

```jsx
import { Dark, Light } from '/src/components/ColorMode';
<Dark>
  <p>Dark</p>
</Dark>
<Light>
  <p>Light</p>
</Light>

```

#### Demo:

<Dark>
  <div className="not-prose rounded-lg bg-primary shadow-md">
    <p className="p-2 text-lg font-medium">This is only shown in dark mode.</p>
    <img
      src="https://picsum.photos/id/101/600/200"
      className="w-full rounded-lg shadow-md"
    />
  </div>
</Dark>
<Light>
  <div className="not-prose rounded-lg border bg-primary shadow-md">
    <p className="p-2 text-lg font-medium">This is only shown in light mode.</p>
    <img
      src="https://picsum.photos/id/1028/600/200"
      className="w-full rounded-lg shadow-md"
    />
  </div>
</Light>