feat: dark theme

saltysimulations · Oct 12, 2024 · d5e9c3c · d5e9c3c
1 parent f2fb64d
commit d5e9c3c
Show file tree

Hide file tree

Showing 39 changed files with 403 additions and 230 deletions.
diff --git a/src/instruments/src/EFB/apps/Aircraft/FuelPayload.tsx b/src/instruments/src/EFB/apps/Aircraft/FuelPayload.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useState } from "react";
-import styled from "styled-components";
+import styled, { useTheme } from "styled-components";
 
 import { ItemGroup } from "../../components/ItemGroup";
 import { Input } from "../../components/Input";
@@ -24,6 +24,8 @@ export const FuelPayload: FC = () => {
     const [zfw, setZfw] = useSimVar("L:SALTY_EFB_ZFW", "enum");
     const [fuel, setFuel] = useSimVar("L:SALTY_EFB_FUEL_WEIGHT", "enum");
 
+    const theme = useTheme();
+
     const itemGroupStyle = { boxShadow: "2px 2px 13.5px 7px rgba(0, 0, 0, 0.1)", margin: 0 };
 
     const weightInputFilter = (val: string) => (val.includes("kg") || val.includes("lbs") ? val : `${val} kg`);
@@ -56,7 +58,7 @@ export const FuelPayload: FC = () => {
                 <WeightInputContainer>
                     <ItemGroupContainer>
                         <Label>Actual</Label>
-                        <ItemGroup style={itemGroupStyle}>
+                        <ItemGroup style={itemGroupStyle} spacing={0}>
                             <InfoColumn label="Pax" value={`${pax}/363`} />
                             <InfoColumn label="Cargo" value={`${metric ? Math.round(cargo / 2.205) : cargo} kg`} />
                             <InfoColumn label="ZFW" value={`${metric ? Math.round(zfw / 2.205) : zfw} kg`} />
@@ -65,7 +67,7 @@ export const FuelPayload: FC = () => {
                     </ItemGroupContainer>
                     <ItemGroupContainer>
                         <Label>Planned</Label>
-                        <ItemGroup style={itemGroupStyle}>
+                        <ItemGroup style={itemGroupStyle} spacing={0}>
                             <InputColumn
                                 label="Pax"
                                 placeholder="0/363"
@@ -80,19 +82,19 @@ export const FuelPayload: FC = () => {
                 </WeightInputContainer>
                 <WeightInputContainer>
                     <ItemGroupContainer>
-                        <ItemGroup style={itemGroupStyle}>
+                        <ItemGroup style={itemGroupStyle} spacing={0}>
                             <InfoColumn label="Fuel" value={`${metric ? Math.round(fuel / 2.205) : fuel} kg`} />
                         </ItemGroup>
                     </ItemGroupContainer>
                     <ItemGroupContainer>
-                        <ItemGroup style={itemGroupStyle}>
+                        <ItemGroup style={itemGroupStyle} spacing={0}>
                             <InputColumn label="Fuel" placeholder="0 kg" setter={setPlannedFuel} filterFn={weightInputFilter} />
                         </ItemGroup>
                     </ItemGroupContainer>
                 </WeightInputContainer>
                 <Buttons>
                     <SecondaryButton style={{ marginRight: "25px" }}>
-                        <AiOutlineCloudDownload size={35} color="#4fa0fc" style={{ padding: 0, margin: 0 }} />
+                        <AiOutlineCloudDownload size={35} color={theme.select} style={{ padding: 0, margin: 0 }} />
                         <div>SimBrief</div>
                     </SecondaryButton>
                     <PrimaryButton onClick={load}>Refuel & Load</PrimaryButton>
@@ -157,6 +159,7 @@ const Container = styled.div`
     width: 100%;
     height: 100%;
     display: flex;
+    background: ${(props) => props.theme.bg};
 `;
 
 const WeightInputContainer = styled.div`
@@ -170,7 +173,7 @@ const WeightInputContainer = styled.div`
 const Label = styled.div`
     font-size: 22px;
     font-weight: 500;
-    color: #4fa0fc;
+    color: ${(props) => props.theme.select};
     margin: 10px 0;
 `;
 

diff --git a/src/instruments/src/EFB/apps/Aircraft/GroundServices.tsx b/src/instruments/src/EFB/apps/Aircraft/GroundServices.tsx
@@ -20,26 +20,25 @@ export const GroundServices: FC = () => {
 
     return (
         <Container>
-            <StyledAircraftContainer>
-                <AircraftSvg />
-            </StyledAircraftContainer>
             <StyledOptionsContainer>
-                <ItemGroupContainer>
-                    <Label>Pax Doors</Label>
-                    <ItemGroup style={itemGroupStyle}>
-                        <Toggle label="1 Left" enabled={left1Door >= 1} onClick={() => setLeft1Door(left1Door >= 1 ? 0 : 1)} />
-                        <Toggle label="5 Right" enabled={right5Door >= 1} onClick={() => setRight5Door(right5Door >= 1 ? 0 : 1)} />
-                    </ItemGroup>
-                </ItemGroupContainer>
-                <ItemGroupContainer>
-                    <Label>Cargo Doors</Label>
-                    <ItemGroup style={itemGroupStyle}>
-                        <Toggle label="Cargo Fwd" enabled={cargoFwd >= 1} onClick={() => setCargoFwd(cargoFwd >= 1 ? 0 : 1)} />
-                    </ItemGroup>
-                </ItemGroupContainer>
+                <div>
+                    <ItemGroupContainer>
+                        <Label>Pax Doors</Label>
+                        <ItemGroup style={itemGroupStyle} spacing={0}>
+                            <Toggle label="1 Left" enabled={left1Door >= 1} onClick={() => setLeft1Door(left1Door >= 1 ? 0 : 1)} />
+                            <Toggle label="5 Right" enabled={right5Door >= 1} onClick={() => setRight5Door(right5Door >= 1 ? 0 : 1)} />
+                        </ItemGroup>
+                    </ItemGroupContainer>
+                    <ItemGroupContainer>
+                        <Label>Cargo Doors</Label>
+                        <ItemGroup style={itemGroupStyle} spacing={0}>
+                            <Toggle label="Cargo Fwd" enabled={cargoFwd >= 1} onClick={() => setCargoFwd(cargoFwd >= 1 ? 0 : 1)} />
+                        </ItemGroup>
+                    </ItemGroupContainer>
+                </div>
                 <ItemGroupContainer>
                     <Label>Services</Label>
-                    <ItemGroup style={itemGroupStyle}>
+                    <ItemGroup style={itemGroupStyle} spacing={0}>
                         <Service name="Jetway" onRequest={() => toggleJetway(true)} />
                         <Service name="Fuel Truck" onRequest={() => toggleFuelTruck(true)} />
                         <Service name="Baggage Truck" onRequest={() => toggleBaggageTruck(true)} />
@@ -66,8 +65,7 @@ const Label = styled.div`
 `;
 
 const ItemGroupContainer = styled.div`
-    width: 70%;
-    margin: 30px 0;
+    margin: 60px 0;
 `;
 
 const StyledAircraftContainer = styled.div`
@@ -82,8 +80,7 @@ const StyledOptionsContainer = styled.div`
     height: 100%;
     flex: 1;
     display: flex;
-    flex-direction: column;
-    justify-content: center;
+    justify-content: space-around;
     align-items: center;
     font-size: 26px;
 `;
@@ -92,4 +89,5 @@ const Container = styled.div`
     width: 100%;
     height: 100%;
     display: flex;
+    background: ${(props) => props.theme.bg};
 `;
diff --git a/src/instruments/src/EFB/apps/Aircraft/components/chart/ChartWidget.tsx b/src/instruments/src/EFB/apps/Aircraft/components/chart/ChartWidget.tsx
@@ -1,9 +1,10 @@
 // Copyright (c) 2023-2024 FlyByWire Simulations
 // SPDX-License-Identifier: GPL-3.0
 
-import React, { useEffect, useRef, useState } from "react";
+import React, { useContext, useEffect, useRef, useState } from "react";
 import { CanvasConst } from "./Constants";
 import styled, { css } from "styled-components";
+import { ThemeSwitchContext } from "instruments/src/EFB/lib/Theme";
 
 export interface AirframePerformanceEnvelope {
     mlw: number[][];
@@ -65,7 +66,7 @@ interface ChartWidgetProps {
 export const ChartWidget: React.FC<ChartWidgetProps> = ({ width, height, envelope, limits, gw, cg, mldw, mldwCg, zfw, zfwCg }) => {
     const canvasRef = useRef<HTMLCanvasElement>(null);
     const [ctx, setCtx] = useState<CanvasRenderingContext2D | null>(null);
-    const theme = "light";
+    const { theme } = useContext(ThemeSwitchContext);
     const metric = SimVar.GetGameVarValue("GAME UNIT IS METRIC", "boolean");
 
     const getTheme = (theme: string): [string, string, string, string] => {
@@ -349,7 +350,7 @@ export const ChartWidget: React.FC<ChartWidgetProps> = ({ width, height, envelop
 };
 
 const p = css`
-    color: black;
+    color: ${(props) => props.theme.text};
     position: absolute;
     top: 0;
 `;

diff --git a/src/instruments/src/EFB/apps/Aircraft/index.tsx b/src/instruments/src/EFB/apps/Aircraft/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useState } from "react";
-import styled from "styled-components";
+import styled, { useTheme } from "styled-components";
 import { Outlet, useNavigate } from "react-router-dom";
 import { FaTruckLoading, FaTruck } from "react-icons/fa";
 
@@ -14,6 +14,7 @@ export const Aircraft: FC = () => (
 
 const TabSwitcher: FC = () => {
     const navigate = useNavigate();
+    const theme = useTheme();
     const [tab, setTab] = useState<string>("ground-services");
 
     const updateTab = (name: string) => {
@@ -25,22 +26,22 @@ const TabSwitcher: FC = () => {
         <StyledTabSwitcher>
             <div className="container">
                 <Tab selected={tab === "ground-services"} onClick={() => updateTab("ground-services")}>
-                    <FaTruck fill={tab === "ground-services" ? "#4FA0FC" : "#999999"} size={35} />
+                    <FaTruck fill={tab === "ground-services" ? theme.select : theme.border} size={35} />
                     <div>Ground Services</div>
                 </Tab>
                 <Tab selected={tab === "payload"} onClick={() => updateTab("payload")}>
-                    <FaTruckLoading fill={tab === "payload" ? "#4FA0FC" : "#999999"} size={35} />
+                    <FaTruckLoading fill={tab === "payload" ? theme.select : theme.border} size={35} />
                     <div>Fuel & Payload</div>
                 </Tab>
             </div>
         </StyledTabSwitcher>
     );
 };
 
-const Tab = styled.div`
+const Tab = styled.div<{ selected: boolean }>`
     display: flex;
     align-items: center;
-    color: ${(props: { selected: boolean }) => (props.selected ? "#4FA0FC" : "#999999")};
+    color: ${(props) => (props.selected ? props.theme.select : props.theme.border)};
     white-space: nowrap;
 
     * {
@@ -57,8 +58,8 @@ const StyledContent = styled.div`
 const StyledTabSwitcher = styled.div`
     width: 100%;
     height: 90px;
-    background: #f9f9f9;
-    border-top: 1px solid lightgray;
+    background: ${(props) => props.theme.primary};
+    border-top: 1px solid ${(props) => props.theme.border};
     font-size: 18px;
     font-weight: 500;
     display: flex;

diff --git a/src/instruments/src/EFB/apps/FZPro/AirportSelector.tsx b/src/instruments/src/EFB/apps/FZPro/AirportSelector.tsx
@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled, { useTheme } from "styled-components";
 import React, { FC, useEffect, useState } from "react";
 import { Input } from "../../components/Input";
 import { useNavigraphAuth } from "../../hooks/useNavigraphAuth";
@@ -16,6 +16,7 @@ type AirportSelectorProps = {
 export const AirportSelector: FC<AirportSelectorProps> = ({ setSelectedAirport, selectedAirport }) => {
     const [search, setSearch] = useState<string>("");
     const [searchResults, setSearchResults] = useState<AirportFacility[] | null>(null);
+    const theme = useTheme();
 
     useEffect(() => {
         setSearchResults(null);
@@ -50,7 +51,7 @@ export const AirportSelector: FC<AirportSelectorProps> = ({ setSelectedAirport,
         <StyledAirportSelector>
             <Input
                 placeholder="Search All Airports"
-                style={{ width: "90%", margin: "20px 0", border: "1px solid #b9b9bb" }}
+                style={{ width: "90%", margin: "20px 0", border: `1px solid ${theme.border}`, color: theme.text }}
                 onUpdateValue={(icao) => setSearch(icao)}
                 applyFilters={(value: string) => value.toUpperCase()}
                 autoFocus
@@ -77,24 +78,24 @@ const AirportSelectorItem = styled.div`
     width: 100%;
     display: flex;
     justify-content: space-between;
-    border-bottom: 1px solid #b9b9bb;
+    border-bottom: 1px solid ${(props) => props.theme.border};
     align-items: center;
-    background: white;
+    background: ${(props) => props.theme.invert.primary};
     flex-shrink: 0;
 `;
 
 const StyledAirportSelector = styled.div`
     width: 500px;
     height: 800px;
-    border: 1px solid #b9b9bb;
+    border: 1px solid ${(props) => props.theme.border};
     border-radius: 15px;
     position: absolute;
-    background: #F0F4F8;
+    background: ${(props) => props.theme.primary};
     display: flex;
     flex-direction: column;
     align-items: center;
     color: black;
-    box-shadow: 2px 2px 10px #b9b9bb;
+    box-shadow: 2px 2px 10px ${(props) => props.theme.border};
     left: 150px;
     top: 50px;
     overflow: hidden;

diff --git a/src/instruments/src/EFB/apps/FZPro/AppContext.tsx b/src/instruments/src/EFB/apps/FZPro/AppContext.tsx
@@ -1,5 +1,6 @@
 import { NavigraphRasterSource, PresetConfig } from "@navigraph/leaflet";
-import React, { FC, ReactNode, useState } from "react";
+import React, { FC, ReactNode, useContext, useState } from "react";
+import { ThemeSwitchContext } from "../../lib/Theme";
 
 type FZProContextProps = {
     enrouteChartPreset: PresetConfig;
@@ -32,7 +33,12 @@ export const FZProContext = React.createContext<FZProContextProps>({
 });
 
 export const FZProContextProvider: FC<{ children: ReactNode | ReactNode[] }> = ({ children }) => {
-    const [enrouteChartPreset, setEnrouteChartPreset] = useState<PresetConfig>(defaults.enrouteChartPreset);
+    const { theme } = useContext(ThemeSwitchContext);
+
+    const [enrouteChartPreset, setEnrouteChartPreset] = useState<PresetConfig>({
+        ...defaults.enrouteChartPreset,
+        theme: theme === "light" ? "DAY" : "NIGHT",
+    });
     const [metar, setMetar] = useState<string | null>(null);
     const [taf, setTaf] = useState<string | null>(null);
     const [atis, setAtis] = useState<string | null>(null);
@@ -50,7 +56,7 @@ export const FZProContextProvider: FC<{ children: ReactNode | ReactNode[] }> = (
                 atis,
                 setAtis,
                 weatherLastUpdated,
-                setWeatherLastUpdated
+                setWeatherLastUpdated,
             }}
         >
             {children}

diff --git a/src/instruments/src/EFB/apps/FZPro/ChartSelector.tsx b/src/instruments/src/EFB/apps/FZPro/ChartSelector.tsx
@@ -1,6 +1,5 @@
 import styled from "styled-components";
 import React, { FC } from "react";
-import { AiFillCloseCircle } from "react-icons/all";
 import { Chart } from "navigraph/charts"
 import { ListItemDescription, ListItemLabel, ListItemTitle } from "./components/ListItems";
 import { TitleAndClose } from "./components/TitleAndClose";
@@ -30,24 +29,24 @@ export const ChartSelector: FC<ChartSelectorProps> = ({ charts, label, onClose,
     </ChartSelectorContainer>
 );
 
-const ChartSelectorItem = styled.div`
+const ChartSelectorItem = styled.div<{ selected: boolean }>`
     width: 100%;
     display: flex;
-    border-bottom: 1px solid #b9b9bb;
+    border-bottom: 1px solid ${(props) => props.theme.border};
     align-items: center;
-    background: ${(props: { selected: boolean }) => props.selected ? "#CDE5F4" : "white"};;
+    background: ${(props) => props.selected ? props.theme.selectLighter : props.theme.invert.primary};;
 `;
 
 const ChartSelectorContainer = styled.div`
     width: 500px;
     height: 100%;
-    border: 1px solid #b9b9bb;
+    border: 1px solid ${(props) => props.theme.border};
     border-radius: 15px;
-    background: #F0F4F8;
+    background: ${(props) => props.theme.primary};
     display: flex;
     flex-direction: column;
     color: black;
-    box-shadow: 2px 2px 10px #b9b9bb;
+    box-shadow: 2px 2px 10px ${(props) => props.theme.border};
     overflow: hidden;
     z-index: 999;
     position: absolute;