import React, { useState } from "react";
import Box from "../box";
import Text from "../text";
import JSONPretty from "react-json-pretty";
import Base from "../themes/base";
import Dark from "../themes/dark";
import Heading from "../heading";
import Checkbox from "../checkbox";
import ThemeProvider from "./";
export default {
title: "Components/ThemeProvider",
component: ThemeProvider,
parameters: {
docs: {
description: {
component: `Custom theme provider based on [Theme Provider](https://www.styled-components.com/docs/advanced).
List of themes:
- [Base theme](https://dotnet.onlyoffice.com:8084/?path=/story/components-themeprovider--base-theme)
- [Dark theme](https://dotnet.onlyoffice.com:8084/?path=/story/components-themeprovider--dark-theme)
You can change the CSS styles in the theme, and they will be applied to all children components of ThemeProvider`,
},
},
},
};
const Template = (args) => {
const [value, setValue] = useState(false);
return (
setValue(!value)}
label={value ? "Dark" : "Light"}
/>
);
};
export const Default = Template.bind({});
const BaseTemplate = (args) => {
const jsonTheme = {
main: "line-height:1.5;background:#FFF;overflow:auto;",
error: "line-height:1.5;background:#FFF;overflow:auto;",
key: "color:#444;",
string: "color:#00873D;",
};
return (
Base theme:
);
};
export const BaseTheme = BaseTemplate.bind({});
const DarkTemplate = (args) => {
const jsonTheme = {
main: "line-height:1.5;background:#1F2933;overflow:auto;",
error: "line-height:1.5;background:#1F2933;overflow:auto;",
key: "color:#1F97CA;",
string: "color:#00873D;",
};
return (
Dark theme:
);
};
export const DarkTheme = DarkTemplate.bind({});