feat: Add Dark Mode
parent
830c69a4e1
commit
848fc76396
|
@ -4,6 +4,11 @@
|
||||||
line-height: 1.15;
|
line-height: 1.15;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.emoji-mart-dark-bg{
|
||||||
|
color: #fff !important;
|
||||||
|
background-color: #222 !important;
|
||||||
|
}
|
||||||
|
|
||||||
.emoji-mart {
|
.emoji-mart {
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
|
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
@ -143,6 +148,10 @@
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.emoji-mart-category .emoji-mart-emoji-dark:hover:before{
|
||||||
|
background-color: #444;
|
||||||
|
}
|
||||||
|
|
||||||
.emoji-mart-category-label {
|
.emoji-mart-category-label {
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -151,13 +160,17 @@
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emoji-mart-category-label span {
|
.emoji-mart-category-label-span {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
padding: 5px 6px;
|
padding: 5px 6px;
|
||||||
background-color: #fff;
|
background-color: rgb(255, 255, 255, 0.95);
|
||||||
background-color: rgba(255, 255, 255, .95);
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-mart-category-label-span-dark {
|
||||||
|
background-color: rgba(0, 0, 0, 0.95) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emoji-mart-category-list {
|
.emoji-mart-category-list {
|
||||||
|
|
|
@ -158,6 +158,7 @@ export default class Category extends React.Component {
|
||||||
i18n,
|
i18n,
|
||||||
notFound,
|
notFound,
|
||||||
notFoundEmoji,
|
notFoundEmoji,
|
||||||
|
darkMode,
|
||||||
} = this.props,
|
} = this.props,
|
||||||
emojis = this.getEmojis(),
|
emojis = this.getEmojis(),
|
||||||
labelStyles = {},
|
labelStyles = {},
|
||||||
|
@ -174,10 +175,6 @@ export default class Category extends React.Component {
|
||||||
labelStyles = {
|
labelStyles = {
|
||||||
height: 28,
|
height: 28,
|
||||||
}
|
}
|
||||||
|
|
||||||
labelSpanStyles = {
|
|
||||||
position: 'absolute',
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -193,7 +190,11 @@ export default class Category extends React.Component {
|
||||||
className="emoji-mart-category-label"
|
className="emoji-mart-category-label"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
style={labelSpanStyles}
|
className={
|
||||||
|
darkMode
|
||||||
|
? 'emoji-mart-category-label-span emoji-mart-category-label-span-dark'
|
||||||
|
: 'emoji-mart-category-label-span'
|
||||||
|
}
|
||||||
ref={this.setLabelRef}
|
ref={this.setLabelRef}
|
||||||
aria-hidden={true /* already labeled by the section aria-label */}
|
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
|
(emoji.short_names && emoji.short_names.join('_')) || emoji
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
{NimbleEmoji({ emoji: emoji, data: this.data, ...emojiProps })}
|
{NimbleEmoji(
|
||||||
|
{ emoji: emoji, data: this.data, ...emojiProps },
|
||||||
|
darkMode,
|
||||||
|
)}
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
@ -74,7 +74,7 @@ const _convertStyleToCSS = (style) => {
|
||||||
return div.getAttribute('style')
|
return div.getAttribute('style')
|
||||||
}
|
}
|
||||||
|
|
||||||
const NimbleEmoji = (props) => {
|
const NimbleEmoji = (props, darkMode) => {
|
||||||
if (props.data.compressed) {
|
if (props.data.compressed) {
|
||||||
uncompress(props.data)
|
uncompress(props.data)
|
||||||
}
|
}
|
||||||
|
@ -97,7 +97,9 @@ const NimbleEmoji = (props) => {
|
||||||
let { unified, custom, short_names, imageUrl } = data,
|
let { unified, custom, short_names, imageUrl } = data,
|
||||||
style = {},
|
style = {},
|
||||||
children = props.children,
|
children = props.children,
|
||||||
className = 'emoji-mart-emoji',
|
className = darkMode
|
||||||
|
? 'emoji-mart-emoji emoji-mart-emoji-dark'
|
||||||
|
: 'emoji-mart-emoji',
|
||||||
nativeEmoji = unified && unifiedToNative(unified),
|
nativeEmoji = unified && unifiedToNative(unified),
|
||||||
// combine the emoji itself and all shortcodes into an accessible label
|
// combine the emoji itself and all shortcodes into an accessible label
|
||||||
label = [nativeEmoji]
|
label = [nativeEmoji]
|
||||||
|
|
|
@ -504,6 +504,7 @@ export default class NimblePicker extends React.PureComponent {
|
||||||
skinEmoji,
|
skinEmoji,
|
||||||
notFound,
|
notFound,
|
||||||
notFoundEmoji,
|
notFoundEmoji,
|
||||||
|
darkMode,
|
||||||
} = this.props,
|
} = this.props,
|
||||||
{ skin } = this.state,
|
{ skin } = this.state,
|
||||||
width = perLine * (emojiSize + 12) + 12 + 2 + measureScrollbar()
|
width = perLine * (emojiSize + 12) + 12 + 2 + measureScrollbar()
|
||||||
|
@ -511,12 +512,13 @@ export default class NimblePicker extends React.PureComponent {
|
||||||
return (
|
return (
|
||||||
<section
|
<section
|
||||||
style={{ width: width, ...style }}
|
style={{ width: width, ...style }}
|
||||||
className="emoji-mart"
|
className={`emoji-mart ${darkMode && 'emoji-mart-dark-bg'}`}
|
||||||
aria-label={title}
|
aria-label={title}
|
||||||
onKeyDown={this.handleKeyDown}
|
onKeyDown={this.handleKeyDown}
|
||||||
>
|
>
|
||||||
<div className="emoji-mart-bar">
|
<div className="emoji-mart-bar">
|
||||||
<Anchors
|
<Anchors
|
||||||
|
darkMode={darkMode}
|
||||||
ref={this.setAnchorsRef}
|
ref={this.setAnchorsRef}
|
||||||
data={this.data}
|
data={this.data}
|
||||||
i18n={this.i18n}
|
i18n={this.i18n}
|
||||||
|
@ -528,6 +530,7 @@ export default class NimblePicker extends React.PureComponent {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Search
|
<Search
|
||||||
|
darkMode={darkMode}
|
||||||
ref={this.setSearchRef}
|
ref={this.setSearchRef}
|
||||||
onSearch={this.handleSearch}
|
onSearch={this.handleSearch}
|
||||||
data={this.data}
|
data={this.data}
|
||||||
|
@ -547,6 +550,7 @@ export default class NimblePicker extends React.PureComponent {
|
||||||
{this.getCategories().map((category, i) => {
|
{this.getCategories().map((category, i) => {
|
||||||
return (
|
return (
|
||||||
<Category
|
<Category
|
||||||
|
darkMode={darkMode}
|
||||||
ref={this.setCategoryRef.bind(this, `category-${i}`)}
|
ref={this.setCategoryRef.bind(this, `category-${i}`)}
|
||||||
key={category.name}
|
key={category.name}
|
||||||
id={category.id}
|
id={category.id}
|
||||||
|
|
|
@ -79,7 +79,7 @@ export default class Search extends React.PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { i18n, autoFocus } = this.props
|
const { i18n, autoFocus, darkMode } = this.props
|
||||||
const { icon, isSearching, id } = this.state
|
const { icon, isSearching, id } = this.state
|
||||||
const inputId = `emoji-mart-search-${id}`
|
const inputId = `emoji-mart-search-${id}`
|
||||||
|
|
||||||
|
@ -92,6 +92,14 @@ export default class Search extends React.PureComponent {
|
||||||
onChange={this.handleChange}
|
onChange={this.handleChange}
|
||||||
placeholder={i18n.search}
|
placeholder={i18n.search}
|
||||||
autoFocus={autoFocus}
|
autoFocus={autoFocus}
|
||||||
|
style={
|
||||||
|
darkMode
|
||||||
|
? {
|
||||||
|
backgroundColor: '#2f2f2f',
|
||||||
|
color: '#fff',
|
||||||
|
}
|
||||||
|
: {}
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
{/*
|
{/*
|
||||||
* Use a <label> in addition to the placeholder for accessibility, but place it off-screen
|
* Use a <label> in addition to the placeholder for accessibility, but place it off-screen
|
||||||
|
|
|
@ -31,6 +31,7 @@ const PickerDefaultProps = {
|
||||||
emojisToShowFilter: null,
|
emojisToShowFilter: null,
|
||||||
showPreview: true,
|
showPreview: true,
|
||||||
showSkinTones: true,
|
showSkinTones: true,
|
||||||
|
darkMode: false,
|
||||||
emojiTooltip: EmojiDefaultProps.tooltip,
|
emojiTooltip: EmojiDefaultProps.tooltip,
|
||||||
autoFocus: false,
|
autoFocus: false,
|
||||||
custom: [],
|
custom: [],
|
||||||
|
|
Loading…
Reference in New Issue