Skip to content

Commit

Permalink
website: add dark theme.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jaywcjlove
jaywcjlove committed Mar 19, 2022
1 parent cbbfad8 commit e3210bf
Show file tree
Hide file tree
Showing 8 changed files with 43 additions and 37 deletions.
5 changes: 3 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,10 +45,11 @@
"@kkt/less-modules": "~7.1.1",
"@kkt/raw-modules": "~7.1.1",
"@kkt/scope-plugin-options": "~7.1.1",
"@uiw/react-monacoeditor": "~3.5.2",
"@uiw/react-monacoeditor": "~3.5.3",
"@types/turndown": "~5.0.1",
"@types/react": "~17.0.39",
"@types/react-dom": "~17.0.13",
"@wcj/dark-mode": "^1.0.13",
"cheerio": "~1.0.0-rc.10",
"compile-less-cli": "~1.8.11",
"domhandler": "~4.3.0",
Expand All @@ -57,7 +58,7 @@
"kkt": "~7.1.5",
"lint-staged": "~12.3.5",
"monaco-editor-webpack-plugin": "~7.0.1",
"prettier": "~2.5.1",
"prettier": "~2.6.0",
"pretty-quick": "~3.1.3",
"react": "~17.0.2",
"react-dom": "~17.0.2",
Expand Down
20 changes: 15 additions & 5 deletions website/App.css
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,25 @@
[data-color-mode*='dark'],
[data-color-mode*='dark'] body {
--color-theme-hover-text: #ffffff33;
}
[data-color-mode*='light'],
[data-color-mode*='light'] body {
--color-theme-hover-text: #c9d1d9;
}

body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
'Droid Sans', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

html, body {
background-color: #1e1e1e;
html,
body {
background-color: var(--color-theme-bg);
color: var(--color-theme-text);
}

.App {
Expand Down
9 changes: 8 additions & 1 deletion website/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import './App.css';
import '../';

const App: React.FC = () => {
const [theme, setTheme] = useState(document.documentElement.dataset.colorMode === 'dark' || !document.documentElement.dataset.colorMode ? 'vs-dark' : 'vs');
const [content, setContent] = useState(nginxStr || '');
const [contentDownload, setContentDownload] = useState(content || nginxStr || '');
const editor = useRef<RefEditorInstance>(null);
Expand All @@ -21,6 +22,10 @@ const App: React.FC = () => {
if (editor.current && window) {
window.addEventListener('resize', resizeHandle, false);
}
setTheme(document.documentElement.dataset.colorMode === 'dark' ? 'vs-dark' : 'vs');
document.addEventListener('colorschemechange', (e) => {
setTheme(e.detail.colorScheme === 'dark' ? 'vs-dark' : 'vs');
});
return () => {
window && window.removeEventListener('resize', resizeHandle, false);
};
Expand All @@ -38,7 +43,9 @@ const App: React.FC = () => {
onChange={(value) => {
setContentDownload(value);
}}
theme="nginx-theme"
options={{
theme,
}}
language="nginx"
value={content}
height="calc(100vh - 36px)"
Expand Down
7 changes: 1 addition & 6 deletions website/Header.module.less
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,11 @@
.header {
background-color: #252526;
color: #b9b9b9;
height: 32px;
display: flex;
padding: 0 10px;
align-items: center;
user-select: none;
> svg {
color: #4c9849;
}
a {
color: #b9b9b9;
color: var(--color-theme-text);
display: flex;
align-items: center;
}
Expand Down
28 changes: 7 additions & 21 deletions website/Header.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,9 @@
import styles from 'Header.module.less';
import { useState } from 'react';
import '@wcj/dark-mode';
import styles from 'Header.module.less';
import LoadFile, { LoadFileProps } from './LoadFile';

const Logo = () => (
<svg viewBox="0 0 1024 1024" width="18" height="18">
<path
fill="currentColor"
d="M512 0L68.48 256v512L512 1024l443.52-256V256L512 0z m256 707.84c0 30.08-27.562667 55.04-65.237333 55.04-26.922667 0-57.642667-10.88-76.842667-34.56l-256-304.682667v284.16c0 30.762667-24.32 55.04-54.357333 55.04H312.32c-30.762667 0-55.04-25.6-55.04-55.04V316.16c0-30.08 26.88-55.04 64-55.04 27.562667 0 58.88 10.88 78.08 34.56l254.72 304.682667V316.16c0-30.762667 25.6-55.04 55.04-55.04h3.2c30.72 0 55.04 25.6 55.04 55.04v391.68H768z"
/>
</svg>
);

const GitHub = () => (
<svg viewBox="0 0 1024 1024" width="18" height="18">
<path
fill="currentColor"
d="M512 0C229.12 0 0 229.12 0 512c0 226.56 146.56 417.92 350.08 485.76 25.6 4.48 35.2-10.88 35.2-24.32 0-12.16-0.64-52.48-0.64-95.36-128.64 23.68-161.92-31.36-172.16-60.16-5.76-14.72-30.72-60.16-52.48-72.32-17.92-9.6-43.52-33.28-0.64-33.92 40.32-0.64 69.12 37.12 78.72 52.48 46.08 77.44 119.68 55.68 149.12 42.24 4.48-33.28 17.92-55.68 32.64-68.48-113.92-12.8-232.96-56.96-232.96-252.8 0-55.68 19.84-101.76 52.48-137.6-5.12-12.8-23.04-65.28 5.12-135.68 0 0 42.88-13.44 140.8 52.48 40.96-11.52 84.48-17.28 128-17.28 43.52 0 87.04 5.76 128 17.28 97.92-66.56 140.8-52.48 140.8-52.48 28.16 70.4 10.24 122.88 5.12 135.68 32.64 35.84 52.48 81.28 52.48 137.6 0 196.48-119.68 240-233.6 252.8 18.56 16 34.56 46.72 34.56 94.72 0 68.48-0.64 123.52-0.64 140.8 0 13.44 9.6 29.44 35.2 24.32A512.832 512.832 0 0 0 1024 512C1024 229.12 794.88 0 512 0z"
/>
</svg>
);
import { ReactComponent } from './github.svg';
import { ReactComponent as NginxLogo } from './nginx.svg';

type HeaderProps = LoadFileProps & {};

Expand All @@ -27,7 +12,7 @@ export default function Header(props: HeaderProps) {
const [filename, setFilename] = useState('nginx.example.conf');
return (
<div className={styles.header}>
<Logo />
<NginxLogo />
<div className={styles.title}>nginx editor</div>
<div className={styles.filename}>{filename}</div>
<LoadFile
Expand All @@ -38,8 +23,9 @@ export default function Header(props: HeaderProps) {
onLoadContent && onLoadContent(text, evn);
}}
/>
<dark-mode permanent></dark-mode>
<a href="https://github.com/jaywcjlove/nginx-editor" target="__blank" style={{ marginLeft: 6 }}>
<GitHub />
<ReactComponent />
</a>
</div>
);
Expand Down
5 changes: 3 additions & 2 deletions website/LoadFile.module.less
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
.button {
border: 0;
background-color: transparent !important;
color: #b9b9b9;
// color: #b9b9b9;
color: var(--color-theme-text);
padding: 2px 5px;
transition: background-color 0.3s;
cursor: pointer;
Expand All @@ -10,7 +11,7 @@
outline: 0;
}
&:hover {
background-color: #00000094 !important;
background-color: var(--color-theme-hover-text) !important;
}
+ .button {
margin-right: 3px;
Expand Down
3 changes: 3 additions & 0 deletions website/github.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions website/nginx.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

1 comment on commit e3210bf

@vercel
Copy link

@vercel vercel bot commented on e3210bf Mar 19, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.