newthuhole/hole_thu_frontend
4
6
Fork 2
Code Issues 8 Pull Requests Projects Releases Wiki Activity

add dark mode

Browse Source
This commit is contained in:
xmcp
2019-08-22 23:15:58 +08:00
parent 480969519c
commit 29a921cf26
9 changed files with 152 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/Common.js
View File

@@ -17,6 +17,15 @@ export function build_highlight_re(txt,split) {
return txt ? new RegExp(`(${txt.split(split).filter((x)=>!!x).map(escape_regex).join('|')})`,'g') : /^$/g;
}
function ColoredSpan(props) {
return (
<span className="colored-span" style={{
'--coloredspan-bgcolor-light': props.colors[0],
'--coloredspan-bgcolor-dark': props.colors[1],
}}>{props.children}</span>
)
}
export class HighlightedText extends PureComponent {
render() {
function normalize_url(url) {
@@ -31,7 +40,7 @@ export class HighlightedText extends PureComponent {
rule==='url_pid' ? <span className="url-pid-link" title={p}>/hole/##</span> :
rule==='url' ? <a href={normalize_url(p)} target="_blank" rel="noopener">{p}</a> :
rule==='pid' ? <a href={'##'+p} onClick={(e)=>{e.preventDefault(); this.props.show_pid(p);}}>{p}</a> :
rule==='nickname' ? <span style={{backgroundColor: this.props.color_picker.get(p)}}>{p}</span> :
rule==='nickname' ? <ColoredSpan colors={this.props.color_picker.get(p)}>{p}</ColoredSpan> :
rule==='search' ? <span className="search-query-highlight">{p}</span> :
p
}</span>