fedi/lemmy-ui
1
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-22 06:36:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make code blocks use correct theme when in dark mode (#2367)

Browse source 
Co-authored-by: SleeplessOne1917 <insomnia-void@protonmail.com>
This commit is contained in:
SleeplessOne1917 2024-02-16 22:57:49 +00:00 committed by GitHub
parent 40ade7df88
commit 5eb97edf09
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 29 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/shared/components/app/app.tsx
View file

@ -51,7 +51,7 @@ export class App extends Component<any, any> {
{siteView && (
<>
<Theme defaultTheme={siteView.local_site.default_theme} />
<CodeTheme />
<CodeTheme defaultTheme={siteView.local_site.default_theme} />
</>
)}
<Navbar siteRes={siteRes} />

43
src/shared/components/app/code-theme.tsx
View file

@ -1,22 +1,35 @@
import { dataBsTheme } from "@utils/browser";
import { Component } from "inferno";
import { Helmet } from "inferno-helmet";
import { UserService } from "../../services";
export class CodeTheme extends Component {
interface CodeThemeProps {
defaultTheme: string;
}
export class CodeTheme extends Component<CodeThemeProps, any> {
render() {
const user = UserService.Instance.myUserInfo;
const userTheme = user?.local_user_view.local_user.theme;
const theme =
user && userTheme !== "browser" ? userTheme : this.props.defaultTheme;
return (
<>
<link
rel="stylesheet"
type="text/css"
href={`/css/code-themes/atom-one-light.css`}
media="(prefers-color-scheme: light)"
/>
<link
rel="stylesheet"
type="text/css"
href={`/css/code-themes/atom-one-dark.css`}
media="(prefers-color-scheme: no-preference), (prefers-color-scheme: dark)"
/>
</>
<Helmet>
{dataBsTheme(theme) === "dark" ? (
<link
rel="stylesheet"
type="text/css"
href={`/css/code-themes/atom-one-dark.css`}
/>
) : (
<link
rel="stylesheet"
type="text/css"
href={`/css/code-themes/atom-one-light.css`}
/>
)}
</Helmet>
);
}
}