TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-30 11:54:33 +03:00
Code Issues Projects Releases Wiki Activity

Added color scheme parameter

Browse Source
This commit is contained in:
Peter Zimon 2022-07-07 11:10:23 +02:00
parent f7528a032c
commit 2e58f65b24
3 changed files with 19 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/comments-ui/src/App.js
View File

@ -23,13 +23,13 @@ function AuthFrame({adminUrl, onLoad}) {
); );
} }
function CommentsBoxContainer({done}) { function CommentsBoxContainer({done, colorScheme}) {
if (!done) { if (!done) {
return null; return null;
} }
return ( return (
<ShadowRoot> <ShadowRoot>
<CommentsBox /> <CommentsBox colorScheme={colorScheme} />
</ShadowRoot> </ShadowRoot>
); );
} }
@ -297,7 +297,7 @@ export default class App extends React.Component {
return ( return (
<SentryErrorBoundary dsn={this.props.sentryDsn}> <SentryErrorBoundary dsn={this.props.sentryDsn}>
<AppContext.Provider value={this.getContextFromState()}> <AppContext.Provider value={this.getContextFromState()}>
<CommentsBoxContainer done={done}/> <CommentsBoxContainer done={done} colorScheme={this.props.colorScheme} />
<AuthFrame adminUrl={this.props.adminUrl} onLoad={this.initSetup.bind(this)}/> <AuthFrame adminUrl={this.props.adminUrl} onLoad={this.initSetup.bind(this)}/>
</AppContext.Provider> </AppContext.Provider>
</SentryErrorBoundary> </SentryErrorBoundary>

6
apps/comments-ui/src/components/CommentsBox.js
View File

@ -30,6 +30,11 @@ class CommentsBox extends React.Component {
} }
darkMode() { darkMode() {
if (this.props.colorScheme === 'light') {
return false;
} else if (this.props.colorScheme === 'dark') {
return true;
} else {
const containerColor = getComputedStyle(document.querySelector('#ghost-comments-root').parentNode).getPropertyValue('color'); const containerColor = getComputedStyle(document.querySelector('#ghost-comments-root').parentNode).getPropertyValue('color');
const colorsOnly = containerColor.substring(containerColor.indexOf('(') + 1, containerColor.lastIndexOf(')')).split(/,\s*/); const colorsOnly = containerColor.substring(containerColor.indexOf('(') + 1, containerColor.lastIndexOf(')')).split(/,\s*/);
@ -39,6 +44,7 @@ class CommentsBox extends React.Component {
return this.contrast([255, 255, 255], [red, green, blue]) < 5; return this.contrast([255, 255, 255], [red, green, blue]) < 5;
} }
}
render() { render() {
const comments = !this.context.comments ? 'Loading...' : this.context.comments.slice().reverse().map(comment => <Comment comment={comment} key={comment.id} />); const comments = !this.context.comments ? 'Loading...' : this.context.comments.slice().reverse().map(comment => <Comment comment={comment} key={comment.id} />);

7
apps/comments-ui/src/index.js
View File

@ -34,7 +34,8 @@ function getSiteData() {
const adminUrl = scriptTag.dataset.admin; const adminUrl = scriptTag.dataset.admin;
const sentryDsn = scriptTag.dataset.sentryDsn; const sentryDsn = scriptTag.dataset.sentryDsn;
const postId = scriptTag.dataset.postId; const postId = scriptTag.dataset.postId;
return {siteUrl, apiKey, apiUrl, sentryDsn, postId, adminUrl}; const colorScheme = scriptTag.dataset.colorScheme;
return {siteUrl, apiKey, apiUrl, sentryDsn, postId, adminUrl, colorScheme};
} }
return {}; return {};
} }
@ -54,12 +55,12 @@ function setup({siteUrl}) {
function init() { function init() {
// const customSiteUrl = getSiteUrl(); // const customSiteUrl = getSiteUrl();
const {siteUrl: customSiteUrl, sentryDsn, postId, adminUrl} = getSiteData(); const {siteUrl: customSiteUrl, sentryDsn, postId, adminUrl, colorScheme} = getSiteData();
const siteUrl = customSiteUrl || window.location.origin; const siteUrl = customSiteUrl || window.location.origin;
setup({siteUrl}); setup({siteUrl});
ReactDOM.render( ReactDOM.render(
<React.StrictMode> <React.StrictMode>
{<App adminUrl={adminUrl} siteUrl={siteUrl} customSiteUrl={customSiteUrl} sentryDsn={sentryDsn} postId={postId} />} {<App adminUrl={adminUrl} siteUrl={siteUrl} customSiteUrl={customSiteUrl} sentryDsn={sentryDsn} postId={postId} colorScheme={colorScheme} />}
</React.StrictMode>, </React.StrictMode>,
document.getElementById(ROOT_DIV_ID) document.getElementById(ROOT_DIV_ID)
); );