Excuse me, I'm using Gatsby (React) and I'm trying my hard to add dark/light mode toggleable utturanc.es. My idea is that dark/light mode change, the state of utturancesComments will be updated and make it re-render but I haven't been succeed yet. Anyone could help me. Thanks
import React, { Component } from 'react';
import PropTypes from 'prop-types';
export class Comments extends Component {
constructor(props) {
super(props);
this.commentBox = React.createRef();
}
componentDidMount() {
const scriptEl = document.createElement('script');
scriptEl.async = true;
scriptEl.src = 'https://utteranc.es/client.js';
scriptEl.setAttribute('crossorigin', 'anonymous');
scriptEl.setAttribute('repo', 'loctran016/comments');
scriptEl.setAttribute('issue-term', 'title');
scriptEl.setAttribute('id', 'utterance');
scriptEl.setAttribute('theme', this.props.theme);
scriptEl.setAttribute('label', 'Comments :tada: :tada: :tada:');
this.commentBox.current.appendChild(scriptEl);
}
render() {
return (
<div id="comments">
<h2 className="my-0">
Comments
</h2>
<div ref={this.commentBox} className="comment-box" />
</div>
);
}
}
Comments.propTypes = {
theme: PropTypes.string.isRequired
}
export class utturancesComments extends Component {
constructor(props) {
super(props);
if (typeof(document.getElementById("dark")) != 'undefined' && document.getElementById("dark") != null) {
return this.state = {
isDarkTheme: true
}
}
else {
return this.state = {theme:'icy-dark'}
}
}
render () {
const isDarkMode = typeof(document.getElementById("dark")) != 'undefined' && document.getElementById("dark") != null
let uTheme;
if (isDarkMode) {
uTheme = 'icy-dark'
}
else {
uTheme = 'github-light'
}
return (<Comments theme={uTheme} />)
}
}
Top comments (1)
Btw, here is my code for dark/light mode button: