src/shared/components/app/theme.tsx

   1 import { Component } from "inferno";
   2 import { Helmet } from "inferno-helmet";
   3 import { MyUserInfo } from "lemmy-js-client";
   4
   5 interface Props {
   6   myUserInfo: MyUserInfo | undefined;
   7 }
   8
   9 export class Theme extends Component<Props> {
  10   render() {
  11     let user = this.props.myUserInfo;
  12     let hasTheme = user && user.local_user_view.local_user.theme !== "browser";
  13
  14     return (
  15       <Helmet>
  16         {hasTheme ? (
  17           <link
  18             rel="stylesheet"
  19             type="text/css"
  20             href={`/static/assets/css/themes/${user.local_user_view.local_user.theme}.min.css`}
  21           />
  22         ) : (
  23           [
  24             <link
  25               rel="stylesheet"
  26               type="text/css"
  27               href="/static/assets/css/themes/litely.min.css"
  28               id="default-light"
  29               media="(prefers-color-scheme: light)"
  30             />,
  31             <link
  32               rel="stylesheet"
  33               type="text/css"
  34               href="/static/assets/css/themes/darkly.min.css"
  35               id="default-dark"
  36               media="(prefers-color-scheme: no-preference), (prefers-color-scheme: dark)"
  37             />,
  38           ]
  39         )}
  40       </Helmet>
  41     );
  42   }
  43 }