Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00
Code Issues Activity

Fixed dark mode in ActivityPub article view (#22249)

Browse source 
no issues

- the dark mode used to be applied only when refreshed — now it doesn't
require a refresh anymore
- also added dark mode support to the table of contents
This commit is contained in:
Sodbileg Gansukh 2025-02-20 17:04:04 +08:00 • committed by GitHub
parent 25e5b3d8e7
commit 52fbcd2678
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 4 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
apps/admin-x-activitypub/src/components/feed/ArticleModal.tsx
View file

@ -5,7 +5,6 @@ import React, {useCallback, useEffect, useRef, useState} from 'react';
import articleBodyStyles from '../articleBodyStyles'; import articleBodyStyles from '../articleBodyStyles';
import getUsername from '../../utils/get-username'; import getUsername from '../../utils/get-username';
import {OptionProps, SingleValueProps, components} from 'react-select'; import {OptionProps, SingleValueProps, components} from 'react-select';
import {useDesignSystem} from '@tryghost/admin-x-design-system';
import {Activity, ActorProperties, ObjectProperties} from '@tryghost/admin-x-framework/api/activitypub'; import {Activity, ActorProperties, ObjectProperties} from '@tryghost/admin-x-framework/api/activitypub';
import {Button, Icon, LoadingIndicator, Modal, Popover, Select, SelectOption} from '@tryghost/admin-x-design-system'; import {Button, Icon, LoadingIndicator, Modal, Popover, Select, SelectOption} from '@tryghost/admin-x-design-system';
@ -69,7 +68,7 @@ const ArticleBody: React.FC<{
const iframeRef = useRef<HTMLIFrameElement>(null); const iframeRef = useRef<HTMLIFrameElement>(null);
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const [iframeHeight, setIframeHeight] = useState('0px'); const [iframeHeight, setIframeHeight] = useState('0px');
const {darkMode} = useDesignSystem(); const darkMode = document.documentElement.classList.contains('dark');
const cssContent = articleBodyStyles(siteData?.url.replace(/\/$/, '')); const cssContent = articleBodyStyles(siteData?.url.replace(/\/$/, ''));
@ -380,7 +379,7 @@ const ArticleModal: React.FC<ArticleModalProps> = ({
const modalSize = width === 'narrow' ? MODAL_SIZE_SM : MODAL_SIZE_LG; const modalSize = width === 'narrow' ? MODAL_SIZE_SM : MODAL_SIZE_LG;
const modal = useModal(); const modal = useModal();
const {darkMode} = useDesignSystem(); const darkMode = document.documentElement.classList.contains('dark');
const canNavigateBack = history.length > 0; const canNavigateBack = history.length > 0;
const navigateBack = () => { const navigateBack = () => {

4
apps/admin-x-activitypub/src/components/feed/TableOfContents.tsx
View file

@ -49,7 +49,7 @@ const TableOfContents: React.FC<TableOfContentsProps> = ({items, onItemClick}) =
position='center' position='center'
side='right' side='right'
trigger={ trigger={
<div className='flex cursor-pointer flex-col items-end gap-2 rounded-md bg-white p-2 hover:bg-gray-75'> <div className='flex cursor-pointer flex-col items-end gap-2 rounded-md bg-white p-2 hover:bg-gray-75 dark:bg-black dark:hover:bg-gray-950'>
{items.map(item => ( {items.map(item => (
<div <div
key={item.id} key={item.id}
@ -68,7 +68,7 @@ const TableOfContents: React.FC<TableOfContentsProps> = ({items, onItemClick}) =
{items.map(item => ( {items.map(item => (
<button <button
key={item.id} key={item.id}
className={`block w-full cursor-pointer truncate rounded py-1 text-left text-gray-700 hover:bg-gray-75 hover:text-gray-900 ${getHeadingPadding(item.level)}`} className={`block w-full cursor-pointer truncate rounded py-1 text-left text-gray-700 hover:bg-gray-75 hover:text-gray-900 dark:text-gray-600 dark:hover:bg-grey-925 dark:hover:text-gray-400 ${getHeadingPadding(item.level)}`}
title={item.text} title={item.text}
type='button' type='button'
onClick={() => onItemClick(item.id)} onClick={() => onItemClick(item.id)}