feat(material): add materialLightInit/materialDarkInit/materialLight method to material theme.

Author: jaywcjlove

core/README.md

@@ -68,7 +68,7 @@ npm install @uiw/react-codemirror --save
 | `@uiw/codemirror-theme-eclipse` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-eclipse.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-eclipse) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-eclipse.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-eclipse) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/eclipse) |
 | `@uiw/codemirror-theme-github` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-github.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-github) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-github.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-github) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/github) |
 | `@uiw/codemirror-theme-gruvbox-dark` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-gruvbox-dark.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-gruvbox-dark) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-gruvbox-dark.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-gruvbox-dark) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/gruvbox/dark) |
-| `@uiw/codemirror-theme-material` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-material.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-material) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-material.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-material) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/material)  |
+| `@uiw/codemirror-theme-material` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-material.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-material) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-material.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-material) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/material/dark) |
 | `@uiw/codemirror-theme-noctis-lilac` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-noctis-lilac.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-noctis-lilac) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-noctis-lilac.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-noctis-lilac) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/noctis-lilac) |
 | `@uiw/codemirror-theme-nord` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-nord.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-nord) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-nord.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-nord) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/nord) |
 | `@uiw/codemirror-theme-okaidia` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-okaidia.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-okaidia) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-okaidia.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-okaidia) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/okaidia) |

themes/material/README.md

@@ -8,18 +8,25 @@
 
 This package implements the [Material](https://material.io/tools/color/) Dark theme for the CodeMirror code editor.
 
-<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/material">
+<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/material/dark">
  <img width="436" alt="codemirror-theme-material" src="https://user-images.githubusercontent.com/1680273/205537793-79f9c99c-831a-4ce3-8189-78b42896656f.png">
 </a>
 
+<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/material/light">
+ <img width="436" alt="codemirror-theme-material" src="https://user-images.githubusercontent.com/1680273/206124615-b3896e2c-d299-4609-b1d9-523ea1cf9f5b.png">
+</a>
+
 ## Install
 
 ```bash
 npm install @uiw/codemirror-theme-material --save
 ```
 
 ```jsx
-import { material, materialInit } from '@uiw/codemirror-theme-material';
+import { materialDark, materialDarkInit, materialLight, materialLightInit } from '@uiw/codemirror-theme-material';
+
+// materialInit === materialDarkInit
+// material === materialDark
 
 <CodeMirror theme={material} />
 <CodeMirror
@@ -37,7 +44,11 @@ import { material, materialInit } from '@uiw/codemirror-theme-material';
 ```tsx
 import { CreateThemeOptions } from '@uiw/codemirror-themes';
 export declare const materialInit: (options?: CreateThemeOptions) => import('@codemirror/state').Extension;
+export declare const materialDarkInit: (options?: CreateThemeOptions) => import('@codemirror/state').Extension;
+export declare const materialDark: import('@codemirror/state').Extension;
 export declare const material: import('@codemirror/state').Extension;
+export declare const materialLightInit: (options?: CreateThemeOptions) => import('@codemirror/state').Extension;
+export declare const materialLight: import('@codemirror/state').Extension;
 ```
 
 ## Usage

themes/material/src/index.ts

@@ -116,4 +116,50 @@ export const materialInit = (options?: CreateThemeOptions) => {
  });
 };
 
+export const materialDarkInit = materialInit;
+export const materialDark = materialInit();
 export const material = materialInit();
+
+export const materialLightInit = (options?: CreateThemeOptions) => {
+ const { theme = 'light', settings = {}, styles = [] } = options || {};
+ return createTheme({
+ theme: theme,
+ settings: {
+ background: '#FAFAFA',
+ foreground: '#90A4AE',
+ caret: '#272727',
+ selection: '#80CBC440',
+ selectionMatch: '#FAFAFA',
+ gutterBackground: '#FAFAFA',
+ gutterForeground: '#90A4AE',
+ gutterBorder: 'transparent',
+ lineHighlight: '#CCD7DA50',
+ ...settings,
+ },
+ styles: [
+ { tag: t.keyword, color: '#39ADB5' },
+ { tag: [t.name, t.deleted, t.character, t.macroName], color: '#90A4AE' },
+ { tag: [t.propertyName], color: '#6182B8' },
+ { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: '#91B859' },
+ { tag: [t.function(t.variableName), t.labelName], color: '#6182B8' },
+ { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#39ADB5' },
+ { tag: [t.definition(t.name), t.separator], color: '#90A4AE' },
+ { tag: [t.className], color: '#E2931D' },
+ { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#F76D47' },
+ { tag: [t.typeName], color: '#E2931D', fontStyle: '#E2931D' },
+ { tag: [t.operator, t.operatorKeyword], color: '#39ADB5' },
+ { tag: [t.url, t.escape, t.regexp, t.link], color: '#91B859' },
+ { tag: [t.meta, t.comment], color: '#90A4AE' },
+ { tag: t.strong, fontWeight: 'bold' },
+ { tag: t.emphasis, fontStyle: 'italic' },
+ { tag: t.link, textDecoration: 'underline' },
+ { tag: t.heading, fontWeight: 'bold', color: '#39ADB5' },
+ { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#90A4AE' },
+ { tag: t.invalid, color: '#E5393570' },
+ { tag: t.strikethrough, textDecoration: 'line-through' },
+ ...styles,
+ ],
+ });
+};
+
+export const materialLight = materialLightInit();

themes/theme/README.md

@@ -200,10 +200,14 @@ export default App;
 
 **material**
 
-<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/material">
+<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/material/dark">
  <img width="436" alt="codemirror-theme-material" src="https://user-images.githubusercontent.com/1680273/205537793-79f9c99c-831a-4ce3-8189-78b42896656f.png">
 </a>
 
+<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/material/light">
+ <img width="436" alt="codemirror-theme-material" src="https://user-images.githubusercontent.com/1680273/206124615-b3896e2c-d299-4609-b1d9-523ea1cf9f5b.png">
+</a>
+
 **noctis-lilac**
 
 <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/noctis-lilac">

www/src/pages/theme/home/index.tsx

@@ -7,13 +7,7 @@ import { langs } from '@uiw/codemirror-extensions-langs';
 import { SiderMenus } from '../themes/SiderMenus';
 import { Warpper } from '../../../components/Warpper';
 import { themeData } from '../themes/Datas';
-import { toSnakeCase } from '../themes/Document';
-
-export const toTitleCase = (str: string = '') =>
- str
- .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
- ?.map((x) => x.charAt(0).toUpperCase() + x.slice(1))
- .join(' ');
+import { toSnakeCase, toTitleCase } from '../../../utils/utils';
 
 const ThemesWarpper = styled.div`
  grid-template-columns: repeat(3, minmax(0, 1fr));

www/src/pages/theme/themes/Datas.ts

@@ -31,7 +31,7 @@ import { dracula } from '@uiw/codemirror-theme-dracula';
 import { darcula } from '@uiw/codemirror-theme-darcula';
 import { eclipse } from '@uiw/codemirror-theme-eclipse';
 import { bespin } from '@uiw/codemirror-theme-bespin';
-import { material } from '@uiw/codemirror-theme-material';
+import { materialLight, materialDark } from '@uiw/codemirror-theme-material';
 import { noctisLilac } from '@uiw/codemirror-theme-noctis-lilac';
 import { vscodeDark } from '@uiw/codemirror-theme-vscode';
 import { duotoneLight, duotoneDark } from '@uiw/codemirror-theme-duotone';
@@ -62,7 +62,8 @@ export const mdSource = {
  githubDark: githubMd.source,
  gruvboxDark: gruvboxDarkMd.source,
  gruvboxLight: gruvboxDarkMd.source,
- material: materialMd.source,
+ materialDark: materialMd.source,
+ materialLight: materialMd.source,
  noctisLilac: noctisLilacMd.source,
  nord: nordMd.source,
  okaidia: okaidiaMd.source,
@@ -93,7 +94,8 @@ export const themeData = {
  githubDark,
  gruvboxDark,
  gruvboxLight,
- material,
+ materialLight,
+ materialDark,
  noctisLilac,
  nord,
  okaidia,

www/src/pages/theme/themes/Document.tsx

@@ -4,13 +4,7 @@ import styled from 'styled-components';
 import { PreCode } from './PreCode';
 import { mdSource } from './Datas';
 import { Warpper } from '../../../components/Warpper';
-
-export const toSnakeCase = (str: string = '') =>
- str
- .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
- ?.map((x) => x.toLowerCase())
- .join(',')
- .split(',');
+import { toSnakeCase, toCamelCase } from '../../../utils/utils';
 
 export const Button = styled.button``;
 
@@ -42,11 +36,6 @@ interface DocumentProps {
 export const Document: FC<PropsWithChildren<DocumentProps>> = ({ children, themeName }) => {
  const [previewDoc, setPreviewDoc] = useState(false);
  const [source, setSource] = useState(mdSource.okaidia);
- useEffect(() => {
- if (themeName) {
- setSource(mdSource[themeName as keyof typeof mdSource]);
- }
- }, [themeName]);
 
  let pkgName: string | undefined = themeName;
  if (/(gruvbox)/i.test(themeName || '')) {
@@ -55,6 +44,11 @@ export const Document: FC<PropsWithChildren<DocumentProps>> = ({ children, theme
  pkgName = themeName?.replace(/\s+?(dark|light)/gi, '');
  }
  const _name = toSnakeCase(pkgName || '') || [];
+ useEffect(() => {
+ if (themeName) {
+ setSource(mdSource[toCamelCase(themeName) as keyof typeof mdSource]);
+ }
+ }, [themeName]);
  return (
  <Warpper>
  <Header>

www/src/pages/theme/themes/SiderMenus.tsx

@@ -1,8 +1,8 @@
 import styled from 'styled-components';
 import { NavLink } from 'react-router-dom';
-import { toSnakeCase } from './Document';
 import { Sider } from '../editor';
 import { themeData } from './Datas';
+import { toSnakeCase } from '../../../utils/utils';
 
 export const MenuItem = styled(NavLink)`
  cursor: pointer;

www/src/pages/theme/themes/index.tsx

@@ -4,15 +4,7 @@ import { Document } from './Document';
 import { Sample } from './Sample';
 import { themeData } from './Datas';
 import { SiderMenus } from './SiderMenus';
-
-export const toCamelCase = (str: string = '') => {
- const s =
- str
- .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
- ?.map((x) => x.slice(0, 1).toUpperCase() + x.slice(1).toLowerCase())
- .join('') || '';
- return s.slice(0, 1).toLowerCase() + s.slice(1);
-};
+import { toCamelCase } from '../../../utils/utils';
 
 export const ThemeOkaidia = () => {
  const { name = '', ...other } = useParams();

www/src/utils/utils.ts

@@ -0,0 +1,21 @@
+export const toSnakeCase = (str: string = '') =>
+ str
+ .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
+ ?.map((x) => x.toLowerCase())
+ .join(',')
+ .split(',');
+
+export const toTitleCase = (str: string = '') =>
+ str
+ .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
+ ?.map((x) => x.charAt(0).toUpperCase() + x.slice(1))
+ .join(' ');
+
+export const toCamelCase = (str: string = '') => {
+ const s =
+ str
+ .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
+ ?.map((x) => x.slice(0, 1).toUpperCase() + x.slice(1).toLowerCase())
+ .join('') || '';
+ return s.slice(0, 1).toLowerCase() + s.slice(1);
+};