src/shared/components/app/theme.tsx

   1 import { Component } from "inferno";
   2 import { Helmet } from "inferno-helmet";
   3 import { UserService } from "../../services";
   4
   5 interface Props {
   6   defaultTheme: string;
   7 }
   8
   9 export class Theme extends Component<Props> {
  10   render() {
  11     const user = UserService.Instance.myUserInfo;
  12     const hasTheme = user?.local_user_view.local_user.theme !== "browser";
  13
  14     if (user && hasTheme) {
  15       return (
  16         <Helmet>
  17           <link
  18             rel="stylesheet"
  19             type="text/css"
  20             href={`/css/themes/${user.local_user_view.local_user.theme}.css`}
  21           />
  22         </Helmet>
  23       );
  24     } else if (this.props.defaultTheme != "browser") {
  25       return (
  26         <Helmet>
  27           <link
  28             rel="stylesheet"
  29             type="text/css"
  30             href={`/css/themes/${this.props.defaultTheme}.css`}
  31           />
  32         </Helmet>
  33       );
  34     } else {
  35       return (
  36         <Helmet>
  37           <link
  38             rel="stylesheet"
  39             type="text/css"
  40             href="/css/themes/litely.css"
  41             id="default-light"
  42             media="(prefers-color-scheme: light)"
  43           />
  44           <link
  45             rel="stylesheet"
  46             type="text/css"
  47             href="/css/themes/darkly.css"
  48             id="default-dark"
  49             media="(prefers-color-scheme: no-preference), (prefers-color-scheme: dark)"
  50           />
  51         </Helmet>
  52       );
  53     }
  54   }
  55 }