Skip to content

Commit

Permalink
Add dracula theme (#754)
Browse files Browse the repository at this point in the history
  • Loading branch information
aeharding authored Oct 8, 2023
1 parent e87e85a commit 1482187
Showing 5 changed files with 100 additions and 5 deletions.
35 changes: 33 additions & 2 deletions src/features/settings/appearance/themes/appTheme/AppTheme.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,19 @@
import { IonLabel, IonList, IonRadio, IonRadioGroup } from "@ionic/react";
import {
IonLabel,
IonList,
IonRadio,
IonRadioGroup,
useIonAlert,
} from "@ionic/react";
import { InsetIonItem, ListHeader } from "../../../shared/formatting";
import AppThemePreview from "./AppThemePreview";
import { AppThemeType, OAppThemeType } from "../../../../../services/db";
import { useAppDispatch, useAppSelector } from "../../../../../store";
import { setTheme } from "../../../settingsSlice";
import styled from "@emotion/styled";
import { getTheme } from "../../../../../theme/AppThemes";
import { capitalize } from "lodash";
import { useTheme } from "@emotion/react";

const Description = styled.div`
font-size: 0.76em;
@@ -14,6 +23,24 @@ const Description = styled.div`
export default function AppTheme() {
const theme = useAppSelector((state) => state.settings.appearance.theme);
const dispatch = useAppDispatch();
const [presentAlert] = useIonAlert();
const userTheme = useTheme();

function onChangeTheme(themeName: AppThemeType) {
dispatch(setTheme(themeName));

const theme = getTheme(themeName);

if (theme.dark.background && !theme.light.background && !userTheme.dark) {
presentAlert({
header: `${capitalize(themeName)} Looks Best Dark`,
message: `Just as a heads up, you're in the light theme currently but ${capitalize(
themeName,
)} looks best with a darker theme. You might want to change it to get the full effect, or you do you!`,
buttons: ["OK"],
});
}
}

return (
<>
@@ -22,7 +49,7 @@ export default function AppTheme() {
</ListHeader>
<IonRadioGroup
value={theme}
onIonChange={(e) => dispatch(setTheme(e.detail.value))}
onIonChange={(e) => onChangeTheme(e.detail.value)}
>
<IonList inset>
{Object.values(OAppThemeType).map((theme) => (
@@ -55,6 +82,8 @@ function getThemeName(appTheme: AppThemeType): string {
return "Ultraviolet";
case "mint":
return "Mint";
case "dracula":
return "Dracula";
}
}

@@ -72,5 +101,7 @@ function getThemeDescription(appTheme: AppThemeType): string {
return "Windows logo jack-o-lantern?";
case "mint":
return "Life is mint to be refreshing!";
case "dracula":
return "Your Phone, Now Undeadly Cool";
}
}
Original file line number Diff line number Diff line change
@@ -1,16 +1,43 @@
import styled from "@emotion/styled";
import { AppThemeType } from "../../../../../services/db";
import { getThemeByStyle } from "../../../../../theme/AppThemes";
import { css } from "@emotion/react";

const Container = styled.div<{ appTheme: AppThemeType }>`
width: 22px;
height: 22px;
--size: 22px;
width: var(--size);
height: var(--size);
border-radius: 6px;
margin-right: 16px;
background: ${({ appTheme, theme }) =>
getThemeByStyle(appTheme, theme.dark ? "dark" : "light").primary};
position: relative;
overflow: hidden;
${({ appTheme, theme }) =>
getThemeByStyle(appTheme, theme.dark ? "dark" : "light").background
? css`
&:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-left: var(--size) solid transparent;
border-right: var(--size) solid transparent;
border-bottom: var(--size) solid
${getThemeByStyle(appTheme, theme.dark ? "dark" : "light")
.background};
}
`
: ""};
`;

interface AppThemePreviewProps {
1 change: 1 addition & 0 deletions src/services/db.ts
Original file line number Diff line number Diff line change
@@ -15,6 +15,7 @@ export const OAppThemeType = {
SpookyPumpkin: "pumpkin",
UV: "uv",
Mint: "mint",
Dracula: "dracula",
} as const;

export type AppThemeType = (typeof OAppThemeType)[keyof typeof OAppThemeType];
15 changes: 15 additions & 0 deletions src/theme/AppThemes.ts
Original file line number Diff line number Diff line change
@@ -7,6 +7,9 @@ interface Theme {

interface Colors {
primary: string;
background?: string;
insetItemBackground?: string;
tabBarBackground?: string;
}

export function getTheme(appTheme: AppThemeType): Theme {
@@ -65,6 +68,18 @@ export function getTheme(appTheme: AppThemeType): Theme {
primary: "#53C391",
},
};
case "dracula":
return {
light: {
primary: "#AD81FF",
},
dark: {
primary: "#AD81FF",
background: "#1A1D29",
insetItemBackground: "#12141C",
tabBarBackground: "#12141C",
},
};
}
}

23 changes: 22 additions & 1 deletion src/theme/variables.ts
Original file line number Diff line number Diff line change
@@ -146,7 +146,8 @@ export const buildDarkVariables = (
appTheme: AppThemeType,
pureBlack: boolean,
) => {
const { primary } = getThemeByStyle(appTheme, "dark");
const { primary, background, insetItemBackground, tabBarBackground } =
getThemeByStyle(appTheme, "dark");

return css`
// Dark Colors
@@ -361,5 +362,25 @@ export const buildDarkVariables = (
--ion-toolbar-border-color: var(--ion-color-step-150);
}
}
${background
? css`
.ios body,
.md body {
--ion-background-color: ${background};
--ion-item-background: ${background};
--ion-color-step-50: ${insetItemBackground};
--ion-color-step-100: ${tabBarBackground};
--ion-tab-bar-background: ${tabBarBackground};
--ion-toolbar-background: ${tabBarBackground};
}
.ios ion-modal:not(.small) {
--ion-background-color: ${background};
--ion-toolbar-background: ${tabBarBackground};
--ion-toolbar-border-color: var(--ion-color-step-150);
}
`
: ""}
`;
};

0 comments on commit 1482187

Please sign in to comment.