3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-14 00:32:47 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(website): improve prism themes (#6214)

Browse source 
* feat(website): modify Prism dark theme

* update

* Use vsDark

* update crowdin config

* fix light theme as well

* revert comment changes
This commit is contained in:
Joshua Chen 2021-12-29 21:25:01 +08:00 • committed by GitHub
parent ae9f43fbc0
commit 96dbb8e7ef
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 221 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

2
website/src/css/custom.css
View file

@ -50,7 +50,7 @@ html[data-theme='dark'] {
}
html[data-theme='dark'] .docusaurus-highlight-code-line {
background-color: rgba(0, 0, 0, 0.3);
background-color: rgba(66, 66, 66, 0.3);
}
.header-github-link:hover {

80
website/src/utils/prismDark.js Normal file
View file

@ -0,0 +1,80 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
// eslint-disable-next-line import/no-extraneous-dependencies
const darkTheme = require('prism-react-renderer/themes/vsDark');
module.exports = {
plain: {
color: '#D4D4D4',
backgroundColor: '#1E1E1E',
},
styles: [
...darkTheme.styles,
{
types: ['title'],
style: {
color: '#569CD6',
fontWeight: 'bold',
},
},
{
types: ['property', 'parameter'],
style: {
color: '#9CDCFE',
},
},
{
types: ['script'],
style: {
color: '#D4D4D4',
},
},
{
types: ['boolean', 'arrow', 'atrule', 'tag'],
style: {
color: '#569CD6',
},
},
{
types: ['number', 'color', 'unit'],
style: {
color: '#B5CEA8',
},
},
{
types: ['font-matter'],
style: {
color: '#CE9178',
},
},
{
types: ['keyword', 'rule'],
style: {
color: '#C586C0',
},
},
{
types: ['regex'],
style: {
color: '#D16969',
},
},
{
types: ['maybe-class-name'],
style: {
color: '#4EC9B0',
},
},
{
types: ['constant'],
style: {
color: '#4FC1FF',
},
},
],
};

95
website/src/utils/prismLight.js Normal file
View file

@ -0,0 +1,95 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
// eslint-disable-next-line import/no-extraneous-dependencies
const lightTheme = require('prism-react-renderer/themes/github');
module.exports = {
...lightTheme,
styles: [
...lightTheme.styles,
{
types: ['title'],
style: {
color: '#0550AE',
fontWeight: 'bold',
},
},
{
types: ['parameter'],
style: {
color: '#953800',
},
},
{
types: ['boolean', 'rule', 'color', 'number', 'constant', 'property'],
style: {
color: '#005CC5',
},
},
{
types: ['atrule', 'tag'],
style: {
color: '#22863A',
},
},
{
types: ['script'],
style: {
color: '#24292E',
},
},
{
types: ['operator', 'unit', 'rule'],
style: {
color: '#D73A49',
},
},
{
types: ['font-matter', 'string', 'attr-value'],
style: {
color: '#E3116C',
},
},
{
types: ['class-name'],
style: {
color: '#116329',
},
},
{
types: ['attr-name'],
style: {
color: '#0550AE',
},
},
{
types: ['keyword'],
style: {
color: '#CF222E',
},
},
{
types: ['function'],
style: {
color: '#8250DF',
},
},
{
types: ['selector'],
style: {
color: '#6F42C1',
},
},
{
types: ['variable'],
style: {
color: '#E36209',
},
},
],
};