Browse Source

Adjust theme

Set colors for dark and light theme.
tags/0.3.0
TheoryOfNekomata 3 years ago
parent
commit
db7ee9046a
4 changed files with 74 additions and 54 deletions
  1. +14
    -0
      packages/react-common-docs/public/theme/dark.css
  2. +16
    -2
      packages/react-common-docs/public/theme/light.css
  3. +1
    -1
      packages/react-common-docs/src/components/Playground/Playground.tsx
  4. +43
    -51
      packages/react-common-docs/src/utilities/prism-themes/dark.ts

+ 14
- 0
packages/react-common-docs/public/theme/dark.css View File

@@ -49,6 +49,7 @@
}

:root {
--color-shade: #000;
--color-active: #f90;
--font-family-base: 'Encode Sans Semi Expanded', 'Encode Sans', system-ui;
--font-stretch-base: semi-expanded;
@@ -66,6 +67,19 @@
--opacity-light: 0.25;
--opacity-lighter: 0.5;
--opacity-lightest: 0.75;

--color-code-number: #74f95e;
--color-code-keyword: #ff4389;
--color-code-type: #5097D2;
--color-code-instance-attribute: #76a7d2;
--color-code-function: #67c252;
--color-code-parameter: #915ec2;
--color-code-property: #ffa1c9;
--color-code-string: #eed371;
--color-code-variable: #8bc275;
--color-code-regexp: #74A72B;
--color-code-url: #0099CC;
--color-code-global: #C28050;
}

:root {


+ 16
- 2
packages/react-common-docs/public/theme/light.css View File

@@ -49,8 +49,9 @@
}

:root {
--color-negative: #eee;
--color-positive: #222;
--color-shade: #fff;
--color-negative: #f8f8f8;
--color-positive: #333;
--color-accent: #ba6a9c;
--color-active: #f90;
--font-family-base: 'Encode Sans Semi Expanded', 'Encode Sans', system-ui;
@@ -66,6 +67,19 @@
--opacity-light: 0.5;
--opacity-lighter: 0.75;
--opacity-lightest: 0.875;

--color-code-number: #72b507;
--color-code-keyword: #ee5189;
--color-code-type: #427fb1;
--color-code-instance-attribute: #76a7d2;
--color-code-function: #5a984a;
--color-code-parameter: #915ec2;
--color-code-property: #b76e8d;
--color-code-string: #b59e36;
--color-code-variable: #61864e;
--color-code-regexp: #4f7e03;
--color-code-url: #0099CC;
--color-code-global: #C28050;
}

/*@media (prefers-color-scheme: dark) {*/


+ 1
- 1
packages/react-common-docs/src/components/Playground/Playground.tsx View File

@@ -17,7 +17,7 @@ const Figure = styled('figure')({
position: 'absolute',
content: "''",
zIndex: -1,
backgroundColor: 'black',
backgroundColor: 'var(--color-shade)',
opacity: 0.125,
top: 0,
left: 0,


+ 43
- 51
packages/react-common-docs/src/utilities/prism-themes/dark.ts View File

@@ -2,139 +2,131 @@ import { PrismTheme } from 'prism-react-renderer'

const theme: PrismTheme = {
plain: {
backgroundColor: "transparent",
color: "#ffffff"
backgroundColor: 'transparent',
color: 'currentColor',
},
styles: [
{
types: ["comment", "prolog", "doctype", "cdata"],
types: ['comment', 'prolog', 'doctype', 'cdata'],
style: {
// color: "#6c6783"
// color: '#6c6783'
opacity: 0.3,
fontStyle: 'italic',
}
},
{
types: ["namespace"],
types: ['namespace'],
style: {
opacity: 0.7
}
},
{
types: ["number", "boolean", "hexcode"],
types: ['number', 'boolean', 'hexcode'],
style: {
color: "#74f95e",
color: 'var(--color-code-number)',
fontWeight: 'bold',
}
},
{
types: ["tag", "operator", "keyword", "atrule", "selector"],
types: ['tag', 'operator', 'keyword', 'atrule', 'selector', 'important'],
style: {
color: "#ff4389",
color: 'var(--color-code-keyword)',
fontWeight: 'bold',
}
},
{
types: ["type", "class"],
types: ['type'],
style: {
color: "#5097D2",
color: 'var(--color-code-type)',
fontWeight: 'bold',
}
},
{
types: ["punctuation"],
types: ['punctuation'],
style: {
color: "#ffffff"
color: 'currentColor'
}
},
{
types: ["function"],
types: ['function'],
style: {
color: "#67c252",
color: 'var(--color-code-function)',
fontStyle: 'italic',
}
},
{
types: ["parameter"],
types: ['parameter'],
style: {
color: "#915ec2"
color: 'var(--color-code-parameter)'
}
},
{
types: ["property"],
types: ['property', 'attr-name'],
style: {
color: "#ffa1c9"
color: 'var(--color-code-property)'
}
},
{
types: ["tag-id", "atrule-id"],
types: ['string', 'attr-value', 'unit'],
style: {
color: "#eeebff"
color: 'var(--color-code-string)'
}
},
{
types: ["attr-name"],
types: ['variable'],
style: {
color: "#ffa1c9"
color: 'var(--color-code-variable)'
}
},
{
types: ["string", "attr-value", 'unit'],
types: [
'regex',
],
style: {
color: "#eed371"
color: 'var(--color-code-regexp)'
}
},
{
types: ["variable"],
types: [
'entity',
],
style: {
color: "#8bc275"
}
fontWeight: 'bold',
},
},
{
types: [
"entity",
"url",
"control",
"directive",
"statement",
"regex",

"placeholder",
'url',
],
style: {
color: "#ffcc99"
color: 'var(--color-code-url)',
textDecorationLine: 'underline',
}
},
{
types: ["deleted"],
types: ['deleted'],
style: {
textDecorationLine: "line-through"
textDecorationLine: 'line-through'
}
},
{
types: ["inserted"],
types: ['inserted'],
style: {
textDecorationLine: "underline"
textDecorationLine: 'underline'
}
},
{
types: ["italic"],
types: ['italic'],
style: {
fontStyle: "italic"
fontStyle: 'italic'
}
},
{
types: ["important", "bold"],
types: ['bold'],
style: {
fontWeight: "bold"
fontWeight: 'bold'
}
},
{
types: ["important"],
style: {
color: "#c4b9fe"
}
}
]
}



Loading…
Cancel
Save