feat: Add Dark Mode

release
Mohan Raj 2019-12-21 09:25:57 -08:00 committed by Nolan Lawson
parent 830c69a4e1
commit 848fc76396
6 changed files with 45 additions and 13 deletions

View File

@ -4,6 +4,11 @@
line-height: 1.15;
}
.emoji-mart-dark-bg{
color: #fff !important;
background-color: #222 !important;
}
.emoji-mart {
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
font-size: 16px;
@ -143,6 +148,10 @@
border-radius: 100%;
}
.emoji-mart-category .emoji-mart-emoji-dark:hover:before{
background-color: #444;
}
.emoji-mart-category-label {
z-index: 2;
position: relative;
@ -151,13 +160,17 @@
top: 0;
}
.emoji-mart-category-label span {
.emoji-mart-category-label-span {
display: block;
width: 100%;
font-weight: 500;
padding: 5px 6px;
background-color: #fff;
background-color: rgba(255, 255, 255, .95);
background-color: rgb(255, 255, 255, 0.95);
color: #000;
}
.emoji-mart-category-label-span-dark {
background-color: rgba(0, 0, 0, 0.95) !important;
}
.emoji-mart-category-list {

View File

@ -158,6 +158,7 @@ export default class Category extends React.Component {
i18n,
notFound,
notFoundEmoji,
darkMode,
} = this.props,
emojis = this.getEmojis(),
labelStyles = {},
@ -174,10 +175,6 @@ export default class Category extends React.Component {
labelStyles = {
height: 28,
}
labelSpanStyles = {
position: 'absolute',
}
}
return (
@ -193,7 +190,11 @@ export default class Category extends React.Component {
className="emoji-mart-category-label"
>
<span
style={labelSpanStyles}
className={
darkMode
? 'emoji-mart-category-label-span emoji-mart-category-label-span-dark'
: 'emoji-mart-category-label-span'
}
ref={this.setLabelRef}
aria-hidden={true /* already labeled by the section aria-label */}
>
@ -209,7 +210,10 @@ export default class Category extends React.Component {
(emoji.short_names && emoji.short_names.join('_')) || emoji
}
>
{NimbleEmoji({ emoji: emoji, data: this.data, ...emojiProps })}
{NimbleEmoji(
{ emoji: emoji, data: this.data, ...emojiProps },
darkMode,
)}
</li>
))}
</ul>

View File

@ -74,7 +74,7 @@ const _convertStyleToCSS = (style) => {
return div.getAttribute('style')
}
const NimbleEmoji = (props) => {
const NimbleEmoji = (props, darkMode) => {
if (props.data.compressed) {
uncompress(props.data)
}
@ -97,7 +97,9 @@ const NimbleEmoji = (props) => {
let { unified, custom, short_names, imageUrl } = data,
style = {},
children = props.children,
className = 'emoji-mart-emoji',
className = darkMode
? 'emoji-mart-emoji emoji-mart-emoji-dark'
: 'emoji-mart-emoji',
nativeEmoji = unified && unifiedToNative(unified),
// combine the emoji itself and all shortcodes into an accessible label
label = [nativeEmoji]

View File

@ -504,6 +504,7 @@ export default class NimblePicker extends React.PureComponent {
skinEmoji,
notFound,
notFoundEmoji,
darkMode,
} = this.props,
{ skin } = this.state,
width = perLine * (emojiSize + 12) + 12 + 2 + measureScrollbar()
@ -511,12 +512,13 @@ export default class NimblePicker extends React.PureComponent {
return (
<section
style={{ width: width, ...style }}
className="emoji-mart"
className={`emoji-mart ${darkMode && 'emoji-mart-dark-bg'}`}
aria-label={title}
onKeyDown={this.handleKeyDown}
>
<div className="emoji-mart-bar">
<Anchors
darkMode={darkMode}
ref={this.setAnchorsRef}
data={this.data}
i18n={this.i18n}
@ -528,6 +530,7 @@ export default class NimblePicker extends React.PureComponent {
</div>
<Search
darkMode={darkMode}
ref={this.setSearchRef}
onSearch={this.handleSearch}
data={this.data}
@ -547,6 +550,7 @@ export default class NimblePicker extends React.PureComponent {
{this.getCategories().map((category, i) => {
return (
<Category
darkMode={darkMode}
ref={this.setCategoryRef.bind(this, `category-${i}`)}
key={category.name}
id={category.id}

View File

@ -79,7 +79,7 @@ export default class Search extends React.PureComponent {
}
render() {
const { i18n, autoFocus } = this.props
const { i18n, autoFocus, darkMode } = this.props
const { icon, isSearching, id } = this.state
const inputId = `emoji-mart-search-${id}`
@ -92,6 +92,14 @@ export default class Search extends React.PureComponent {
onChange={this.handleChange}
placeholder={i18n.search}
autoFocus={autoFocus}
style={
darkMode
? {
backgroundColor: '#2f2f2f',
color: '#fff',
}
: {}
}
/>
{/*
* Use a <label> in addition to the placeholder for accessibility, but place it off-screen

View File

@ -31,6 +31,7 @@ const PickerDefaultProps = {
emojisToShowFilter: null,
showPreview: true,
showSkinTones: true,
darkMode: false,
emojiTooltip: EmojiDefaultProps.tooltip,
autoFocus: false,
custom: [],