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) {
return null;
}
return (
<ShadowRoot>
<CommentsBox />
<CommentsBox colorScheme={colorScheme} />
</ShadowRoot>
);
}
@ -297,7 +297,7 @@ export default class App extends React.Component {
return (
<SentryErrorBoundary dsn={this.props.sentryDsn}>
<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)}/>
</AppContext.Provider>
</SentryErrorBoundary>

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

@ -30,14 +30,20 @@ class CommentsBox extends React.Component {
}
darkMode() {
const containerColor = getComputedStyle(document.querySelector('#ghost-comments-root').parentNode).getPropertyValue('color');
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 colorsOnly = containerColor.substring(containerColor.indexOf('(') + 1, containerColor.lastIndexOf(')')).split(/,\s*/);
const red = colorsOnly[0];
const green = colorsOnly[1];
const blue = colorsOnly[2];
const colorsOnly = containerColor.substring(containerColor.indexOf('(') + 1, containerColor.lastIndexOf(')')).split(/,\s*/);
const red = colorsOnly[0];
const green = colorsOnly[1];
const blue = colorsOnly[2];
return this.contrast([255, 255, 255], [red, green, blue]) < 5;
return this.contrast([255, 255, 255], [red, green, blue]) < 5;
}
}
render() {

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

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