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 (
  25       this.props.defaultTheme != "browser" &&
  26       this.props.defaultTheme != "browser-compact"
  27     ) {
  28       return (
  29         <Helmet>
  30           <link
  31             rel="stylesheet"
  32             type="text/css"
  33             href={`/css/themes/${this.props.defaultTheme}.css`}
  34           />
  35         </Helmet>
  36       );
  37     } else if (this.props.defaultTheme == "browser-compact") {
  38       return (
  39         <Helmet>
  40           <link
  41             rel="stylesheet"
  42             type="text/css"
  43             href="/css/themes/litely-compact.css"
  44             id="default-light"
  45             media="(prefers-color-scheme: light)"
  46           />
  47           <link
  48             rel="stylesheet"
  49             type="text/css"
  50             href="/css/themes/darkly-compact.css"
  51             id="default-dark"
  52             media="(prefers-color-scheme: no-preference), (prefers-color-scheme: dark)"
  53           />
  54         </Helmet>
  55       );
  56     } else {
  57       return (
  58         <Helmet>
  59           <link
  60             rel="stylesheet"
  61             type="text/css"
  62             href="/css/themes/litely.css"
  63             id="default-light"
  64             media="(prefers-color-scheme: light)"
  65           />
  66           <link
  67             rel="stylesheet"
  68             type="text/css"
  69             href="/css/themes/darkly.css"
  70             id="default-dark"
  71             media="(prefers-color-scheme: no-preference), (prefers-color-scheme: dark)"
  72           />
  73         </Helmet>
  74       );
  75     }
  76   }
  77 }