mirror of
https://github.com/meshtastic/meshtastic.git
synced 2024-11-15 10:04:24 -08:00
50 lines
1 KiB
Plaintext
50 lines
1 KiB
Plaintext
|
---
|
||
|
|
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 dark mode.</p>
|
||
|
|
<img
|
||
|
|
src="https://picsum.photos/id/1028/600/200"
|
||
|
|
className="w-full rounded-lg shadow-md"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</Light>
|