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   defaultTheme: string;
   8 }
   9
  10 export class Theme extends Component<Props> {
  11   render() {
  12     let user = this.props.myUserInfo;
  13     let hasTheme = user && user.local_user_view.local_user.theme !== "browser";
  14
  15     if (hasTheme) {
  16       return (
  17         <Helmet>
  18           <link
  19             rel="stylesheet"
  20             type="text/css"
  21             href={`/static/assets/css/themes/${user.local_user_view.local_user.theme}.min.css`}
  22           />
  23         </Helmet>
  24       );
  25     } else if (this.props.defaultTheme != "browser") {
  26       return (
  27         <Helmet>
  28           <link
  29             rel="stylesheet"
  30             type="text/css"
  31             href={`/static/assets/css/themes/${this.props.defaultTheme}.min.css`}
  32           />
  33         </Helmet>
  34       );
  35     } else {
  36       return (
  37         <Helmet>
  38           [
  39           <link
  40             rel="stylesheet"
  41             type="text/css"
  42             href="/static/assets/css/themes/litely.min.css"
  43             id="default-light"
  44             media="(prefers-color-scheme: light)"
  45           />
  46           ,
  47           <link
  48             rel="stylesheet"
  49             type="text/css"
  50             href="/static/assets/css/themes/darkly.min.css"
  51             id="default-dark"
  52             media="(prefers-color-scheme: no-preference), (prefers-color-scheme: dark)"
  53           />
  54           ];
  55         </Helmet>
  56       );
  57     }
  58   }
  59 }