p:nth-last-child(2)]:my-0 [&>p:nth-last-child(2)]:inline"
- : undefined
- }
content={value}
registry={registry}
- trailingContent={
- showEditedIndicator ? (
- (edited)
- ) : undefined
- }
variant="compact"
style={{ fontSize: fontSize ?? "1rem" }}
/>
diff --git a/src/screens/util.tsx b/src/screens/util.tsx
index 3cf491d..733c85d 100644
--- a/src/screens/util.tsx
+++ b/src/screens/util.tsx
@@ -1,5 +1,6 @@
import { cn } from "../lib/utils";
import Controls from "../windowControls";
+import { isTauri } from "@tauri-apps/api/core";
export default function CreateScreen({
children,
@@ -11,13 +12,13 @@ export default function CreateScreen({
return (
<>
-
+
{children}
@@ -86,8 +87,9 @@ export function StorageDestoryer() {
return (
diff --git a/src/theme/Provider.tsx b/src/theme/Provider.tsx
index 6b7db6a..fe48cb5 100644
--- a/src/theme/Provider.tsx
+++ b/src/theme/Provider.tsx
@@ -140,7 +140,6 @@ export function ThemeProvider({
customCssStorageKey = "theme_custom_css",
parentThemeStorageKey = "theme_parent",
designStorageKey = "theme_design",
- notCustomizedStorageKey = "theme_not_customized",
disableTransitionOnChange = true,
...props
}: ThemeProviderProps) {
@@ -191,20 +190,6 @@ export function ThemeProvider({
const [themeDesign, setThemeDesignState] = useState(() =>
storedDesign(designStorageKey, initialDesign),
);
- const [notCustomized, setNotCustomizedState] = useState(() => {
- const stored = storageValue(notCustomizedStorageKey);
- if (stored !== null) return stored === "true";
- return Boolean(
- initialParent &&
- themeColor === "" &&
- themePalette === null &&
- themePrimaryColor === "" &&
- themeTint === "soft" &&
- themeBorderRadius === initialBorderRadius &&
- designsEqual(themeDesign, initialDesign) &&
- themeCustomCss === initialParent.css,
- );
- });
const [systemPolarity, setSystemPolarity] = useState(
() => getSystemTheme(),
);
@@ -213,22 +198,13 @@ export function ThemeProvider({
const resolvedPolarity =
themePolarity === "system" ? systemPolarity : themePolarity;
- const setNotCustomized = useCallback(
- (next: boolean) => {
- saveStoredValue(notCustomizedStorageKey, String(next));
- setNotCustomizedState(next);
- },
- [notCustomizedStorageKey],
- );
-
const setParentThemeId = useCallback(
(id: string | null) => {
const next = findTheme(themes, id)?.id ?? null;
saveStoredValue(parentThemeStorageKey, next ?? "");
setParentThemeIdState(next);
- setNotCustomized(false);
},
- [parentThemeStorageKey, setNotCustomized, themes],
+ [parentThemeStorageKey, themes],
);
const setThemePolarity = useCallback(
@@ -243,34 +219,30 @@ export function ThemeProvider({
if (!isThemeColor(next)) return;
saveStoredValue(colorStorageKey, next);
setThemeColorState(next);
- setNotCustomized(false);
},
- [colorStorageKey, setNotCustomized],
+ [colorStorageKey],
);
const setThemePalette = useCallback(
(next: Base16Palette | null) => {
saveStoredValue(paletteStorageKey, serializeBase16Palette(next));
setThemePaletteState(next);
- setNotCustomized(false);
},
- [paletteStorageKey, setNotCustomized],
+ [paletteStorageKey],
);
const setThemePrimaryColor = useCallback(
(next: string) => {
if (!isThemeColor(next)) return;
saveStoredValue(primaryColorStorageKey, next);
setThemePrimaryColorState(next);
- setNotCustomized(false);
},
- [primaryColorStorageKey, setNotCustomized],
+ [primaryColorStorageKey],
);
const setThemeTint = useCallback(
(next: ThemeTint) => {
saveStoredValue(tintStorageKey, next);
setThemeTintState(next);
- setNotCustomized(false);
},
- [setNotCustomized, tintStorageKey],
+ [tintStorageKey],
);
const setThemeBorderRadius = useCallback(
(next: number) => {
@@ -278,28 +250,25 @@ export function ThemeProvider({
if (radius === null) return;
saveStoredValue(borderRadiusStorageKey, String(radius));
setThemeBorderRadiusState(radius);
- setNotCustomized(false);
},
- [borderRadiusStorageKey, setNotCustomized],
+ [borderRadiusStorageKey],
);
const setThemeCustomCss = useCallback(
(next: string) => {
saveStoredValue(customCssStorageKey, next);
setThemeCustomCssState(next);
- setNotCustomized(false);
},
- [customCssStorageKey, setNotCustomized],
+ [customCssStorageKey],
);
const setThemeDesign = useCallback(
(next: ThemeDesign | ((current: ThemeDesign) => ThemeDesign)) => {
- setNotCustomized(false);
setThemeDesignState((current) => {
const value = typeof next === "function" ? next(current) : next;
saveStoredValue(designStorageKey, JSON.stringify(value));
return value;
});
},
- [designStorageKey, setNotCustomized],
+ [designStorageKey],
);
const applyThemePreset = useCallback(
@@ -314,7 +283,6 @@ export function ThemeProvider({
setThemeBorderRadius(presetBorderRadius(preset, defaultBorderRadius));
setThemeDesign(presetDesign(preset, defaultDesign));
setThemeCustomCss(preset.css);
- setNotCustomized(true);
},
[
defaultDesign,
@@ -327,7 +295,6 @@ export function ThemeProvider({
setThemePalette,
setThemePrimaryColor,
setThemeTint,
- setNotCustomized,
themes,
],
);
@@ -335,13 +302,6 @@ export function ThemeProvider({
if (parentTheme) applyThemePreset(parentTheme.id);
}, [applyThemePreset, parentTheme]);
- useEffect(() => {
- if (typeof window === "undefined") return;
- if (storageValue(notCustomizedStorageKey) === null) {
- saveStoredValue(notCustomizedStorageKey, String(notCustomized));
- }
- }, [notCustomized, notCustomizedStorageKey]);
-
useEffect(() => {
if (typeof window === "undefined") return;
const mediaQuery = window.matchMedia(COLOR_SCHEME_QUERY);
@@ -350,14 +310,6 @@ export function ThemeProvider({
return () => mediaQuery.removeEventListener("change", handleChange);
}, []);
- useIsomorphicLayoutEffect(() => {
- if (!notCustomized || !parentTheme || themeCustomCss === parentTheme.css) {
- return;
- }
- saveStoredValue(customCssStorageKey, parentTheme.css);
- setThemeCustomCssState(parentTheme.css);
- }, [customCssStorageKey, notCustomized, parentTheme, themeCustomCss]);
-
useIsomorphicLayoutEffect(() => {
if (typeof document === "undefined") return;
const root = document.documentElement;
@@ -470,9 +422,6 @@ export function ThemeProvider({
parseDesign(stored, presetDesign(parentTheme, defaultDesign)),
),
);
- register(notCustomizedStorageKey, (stored) =>
- setNotCustomizedState(stored === "true"),
- );
const handleStorageChange = (event: StorageEvent) => {
if (event.storageArea !== localStorage) return;
if (event.key) handlers.get(event.key)?.(event.newValue);
@@ -491,7 +440,6 @@ export function ThemeProvider({
defaultTheme,
defaultTint,
designStorageKey,
- notCustomizedStorageKey,
paletteStorageKey,
parentThemeStorageKey,
parentTheme,
@@ -501,7 +449,22 @@ export function ThemeProvider({
tintStorageKey,
]);
- const isThemeCustomized = Boolean(parentTheme && !notCustomized);
+ const parentDesign = presetDesign(parentTheme, defaultDesign);
+ const parentBorderRadius = presetBorderRadius(
+ parentTheme,
+ defaultBorderRadius,
+ );
+
+ const isThemeCustomized = Boolean(
+ parentTheme &&
+ (themeCustomCss !== parentTheme.css ||
+ themeColor !== "" ||
+ themePalette !== null ||
+ themePrimaryColor !== "" ||
+ themeTint !== "soft" ||
+ themeBorderRadius !== parentBorderRadius ||
+ !designsEqual(themeDesign, parentDesign)),
+ );
const value = useMemo(
() => ({
@@ -529,14 +492,12 @@ export function ThemeProvider({
applyThemePreset,
resetThemePreset,
isThemeCustomized,
- notCustomized,
themeDesign,
setThemeDesign,
}),
[
applyThemePreset,
isThemeCustomized,
- notCustomized,
parentTheme,
parentThemeId,
resetThemePreset,
diff --git a/src/theme/presets.ts b/src/theme/presets.ts
index 9601782..f110ab2 100644
--- a/src/theme/presets.ts
+++ b/src/theme/presets.ts
@@ -51,7 +51,6 @@ export const BUILT_IN_THEMES = defineThemes([
--ring: oklch(0.62 0.12 185);
--sidebar: color-mix(in oklch, var(--background) 97%, black);
--sidebar-primary: oklch(0.58 0.12 185);
- --markdown-code-background: color-mix(in oklch, var(--muted) 72%, var(--background));
--tensamin-outline-background: #fff;
--tensamin-outline-hover: #0000000a;
--tensamin-outline-pressed: #00000014;
@@ -74,7 +73,6 @@ export const BUILT_IN_THEMES = defineThemes([
--primary: oklch(0.69 0.12 184);
--primary-foreground: oklch(0.16 0.025 190);
--primary-foreground-alt: oklch(0.73 0.13 183);
- --markdown-code-background: color-mix(in oklch, var(--card) 76%, black 24%);
--tensamin-outline-background: #ffffff0f;
--tensamin-outline-hover: #ffffff0f;
--tensamin-outline-pressed: #ffffff1a;
@@ -249,7 +247,6 @@ export const BUILT_IN_THEMES = defineThemes([
--chart-3: #aca1cf;
--chart-4: #e29eca;
--chart-5: #e5c890;
- --markdown-code-background: color-mix(in srgb, var(--muted) 78%, var(--background));
}
:root.dark[data-theme="og-tensamin"] {
--background: #0f1014;
@@ -284,7 +281,6 @@ export const BUILT_IN_THEMES = defineThemes([
--chart-3: #aca1cf;
--chart-4: #e29eca;
--chart-5: #e5c890;
- --markdown-code-background: color-mix(in srgb, var(--muted) 72%, black 28%);
}
:root[data-theme="og-tensamin"] :where([data-slot="select-content"], [data-slot="dropdown-menu-content"], [data-slot="dropdown-menu-sub-content"], [data-slot="context-menu-content"], [data-slot="context-menu-sub-content"], [data-slot="menubar-content"], [data-slot="menubar-sub-content"], [data-slot="combobox-content"], [data-slot="popover-content"], [data-slot="hover-card-content"]) {
background-color: var(--popover);
@@ -327,7 +323,7 @@ export const BUILT_IN_THEMES = defineThemes([
--accent: #cf8fe633;
--accent-foreground: #642f79;
--destructive: #b91c1c;
- --border: #b7c2cc;
+ --border: #242D38;
--input: #b7c2cc;
--ring: #9d53bc;
--chart-1: #8c47ad;
@@ -341,9 +337,8 @@ export const BUILT_IN_THEMES = defineThemes([
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #cf8fe633;
--sidebar-accent-foreground: #642f79;
- --sidebar-border: #b7c2cc;
+ --sidebar-border: #242D38;
--sidebar-ring: #9d53bc;
- --markdown-code-background: color-mix(in srgb, var(--input) 55%, var(--background));
}
:root.dark[data-theme="methanium"] {
--background: #171E26;
@@ -378,7 +373,6 @@ export const BUILT_IN_THEMES = defineThemes([
--sidebar-accent-foreground: #d2e0f0;
--sidebar-border: #242D38;
--sidebar-ring: #cf8fe6;
- --markdown-code-background: color-mix(in srgb, var(--input) 55%, var(--background));
}
:root[data-theme="methanium"] body {
background-color: var(--background);
@@ -441,8 +435,8 @@ export const BUILT_IN_THEMES = defineThemes([
}
:root[data-theme="methanium"] [data-slot="card"] {
padding-block: calc(1rem * var(--ui-density));
- border: 1px solid var(--input);
- background-color: color-mix(in srgb, var(--input) 55%, var(--background));
+ border: none;
+ background-color: #242D38;
}
:root[data-theme="methanium"] [data-slot="button"][data-variant="default"] {
background-color: var(--primary);
@@ -512,464 +506,175 @@ export const BUILT_IN_THEMES = defineThemes([
},
css: `:root[data-theme="secret"] {
--secret-border: color-mix(in srgb, #2f1b13 22%, #fffaf2 78%);
-
- --secret-purple: #d7a8c9;
- --secret-control: var(--secret-purple);
-
+ --secret-control: #5e244e;
--secret-gold: color-mix(in srgb, #f9b637 75%, #2f1b13 25%);
--secret-gold-dark: color-mix(in srgb, var(--secret-gold) 60%, #2f1b13 40%);
--secret-gold-light: color-mix(in srgb, var(--secret-gold) 45%, #ffe8b4 55%);
-
--background: oklch(0.98 0 0);
--foreground: #2f1b13;
-
--card: var(--background);
--card-foreground: var(--foreground);
-
- --popover: var(--secret-purple);
- --popover-foreground: #2f1b13;
-
+ --popover: #5e244e;
+ --popover-foreground: #fffaf2;
--primary: var(--secret-gold);
--primary-foreground: #24120c;
- --primary-foreground-alt: #c04b00;
-
- --secondary: var(--secret-purple);
- --secondary-foreground: #2f1b13;
-
- --muted: #c89ab9;
- --muted-foreground: #49333f;
-
+ --primary-foreground-alt: #fb6c00;
+ --secondary: #5e244e;
+ --secondary-foreground: #fffaf2;
+ --muted: #24120c;
+ --muted-foreground: #6b7280;
--accent: #fb6c00;
--accent-foreground: #24120c;
-
- --destructive: #d93618;
- --destructive-foreground: #fffaf2;
-
+ --destructive: #e73f1e;
--border: var(--secret-border);
--input: var(--secret-border);
- --ring: #4a2110;
-
+ --ring: #fb6c00;
--sidebar: color-mix(in oklch, var(--background) 97%, black);
--sidebar-foreground: #2f1b13;
--sidebar-primary: var(--secret-gold);
--sidebar-primary-foreground: #24120c;
- --sidebar-accent: #d7a8c9;
- --sidebar-accent-foreground: #2f1b13;
+ --sidebar-accent: #aa1c41;
+ --sidebar-accent-foreground: #fffaf2;
--sidebar-border: var(--secret-border);
-
- --markdown-code-background: color-mix(
- in srgb,
- var(--secret-gold) 9%,
- var(--background)
- );
}
-
:root.dark[data-theme="secret"] {
- --secret-border: color-mix(in srgb, #ffe8b4 8%, #24120c 35%);
-
- --secret-purple: #5e244e;
- --secret-control: var(--secret-purple);
-
- --background: #0a0a0a;
+ --secret-border: color-mix(in srgb, #ffe8b4 15%, #24120c 85%);
+ --secret-control: #5e244e;
+ --background: #0A0A0A;
--foreground: #ffe8b4;
-
--card: var(--background);
--card-foreground: var(--foreground);
-
--popover: #2f1b13;
--popover-foreground: #ffe8b4;
-
--primary: var(--secret-gold);
--primary-foreground: #24120c;
--primary-foreground-alt: #fb6c00;
-
- --secondary: var(--secret-purple);
+ --secondary: #5e244e;
--secondary-foreground: #fffaf2;
-
--muted: #2f1b13;
--muted-foreground: #e68457;
-
- --accent: #d93618;
+ --accent: #e73f1e;
--accent-foreground: #fffaf2;
-
- --destructive: #d93618;
- --destructive-foreground: #fffaf2;
-
+ --destructive: #e73f1e;
--border: var(--secret-border);
--input: var(--secret-border);
- --ring: #f9b637;
-
- --sidebar: #0f0f0f;
+ --ring: #fb6c00;
+ --sidebar: #0F0F0F;
--sidebar-foreground: #ffe8b4;
--sidebar-primary: var(--secret-gold);
--sidebar-primary-foreground: #24120c;
--sidebar-accent: #aa1c41;
--sidebar-accent-foreground: #fffaf2;
--sidebar-border: var(--secret-border);
-
- --markdown-code-background: color-mix(
- in srgb,
- var(--muted) 72%,
- black 28%
- );
}
-
-:root[data-theme="secret"] :where(
- [data-slot="button"],
- [data-slot="toggle"],
- [data-slot="input"],
- [data-slot="textarea"],
- [data-slot="native-select"],
- [data-slot="select-trigger"],
- [data-slot="input-group"],
- [data-slot="checkbox"],
- [data-slot="radio-group-item"],
- [data-slot="switch"]
-) {
- background-image: linear-gradient(
- to top,
- rgb(255 255 255 / 12%),
- rgb(255 255 255 / 2%)
- );
+:root[data-theme="secret"] :where([data-slot="button"], [data-slot="toggle"], [data-slot="input"], [data-slot="textarea"], [data-slot="native-select"], [data-slot="select-trigger"], [data-slot="input-group"], [data-slot="checkbox"], [data-slot="radio-group-item"], [data-slot="switch"]) {
+ background-image: linear-gradient(to top, rgb(255 255 255 / 12%), rgb(255 255 255 / 2%));
background-repeat: no-repeat;
}
-
:root[data-theme="secret"] [data-slot="button"][data-variant="ghost"] {
background-image: none;
}
-
:root[data-theme="secret"] [data-slot="button"][data-variant="ghost"]:hover {
- background-image: linear-gradient(
- to top,
- rgb(255 255 255 / 12%),
- rgb(255 255 255 / 2%)
- );
+ background-image: linear-gradient(to top, rgb(255 255 255 / 12%), rgb(255 255 255 / 2%));
}
-
:root[data-theme="secret"] [data-slot="button"][data-variant="subtleDefault"] {
- background-image: linear-gradient(
- to top,
- rgb(255 232 180 / 12%),
- rgb(255 232 180 / 2%)
- );
+ background-image: linear-gradient(to top, rgb(255 232 180 / 12%), rgb(255 232 180 / 2%));
color: var(--foreground);
}
-
-:root:not(.dark)[data-theme="secret"]
- [data-slot="button"][data-variant="subtleDefault"] {
- background-color: color-mix(
- in srgb,
- var(--primary-foreground-alt) 6%,
- transparent
- );
- background-image: linear-gradient(
- to top,
- rgb(255 232 180 / 30%),
- rgb(255 232 180 / 80%)
- );
+:root:not(.dark)[data-theme="secret"] [data-slot="button"][data-variant="subtleDefault"] {
+ background-color: color-mix(in srgb, var(--primary-foreground-alt) 6%, transparent);
+ background-image: linear-gradient(to top, rgb(255 232 180 / 30%), rgb(255 232 180 / 80%));
}
-
-:root[data-theme="secret"] :where(
- [data-slot="input"],
- [data-slot="textarea"],
- [data-slot="native-select"],
- [data-slot="select-trigger"],
- [data-slot="input-group"]
-) {
+:root[data-theme="secret"] :where([data-slot="input"], [data-slot="textarea"], [data-slot="native-select"], [data-slot="select-trigger"], [data-slot="input-group"]) {
background-color: var(--secret-control);
border-color: transparent;
+ color: var(--foreground);
}
-
-:root:not(.dark)[data-theme="secret"] :where(
- [data-slot="input"],
- [data-slot="textarea"],
- [data-slot="native-select"],
- [data-slot="select-trigger"],
- [data-slot="input-group"]
-) {
- color: #2f1b13;
+:root:not(.dark)[data-theme="secret"] :where([data-slot="input"], [data-slot="textarea"], [data-slot="native-select"], [data-slot="select-trigger"], [data-slot="input-group"]) {
+ color: #fffaf2;
}
-
-:root.dark[data-theme="secret"] :where(
- [data-slot="input"],
- [data-slot="textarea"],
- [data-slot="native-select"],
- [data-slot="select-trigger"],
- [data-slot="input-group"]
-) {
- color: #ffe8b4;
-}
-
-:root:not(.dark)[data-theme="secret"] :where(
- [data-slot="input"],
- [data-slot="textarea"]
-)::placeholder {
- color: #5f4558;
- opacity: 1;
-}
-
-:root.dark[data-theme="secret"] :where(
- [data-slot="input"],
- [data-slot="textarea"]
-)::placeholder {
- color: #d9b99c;
- opacity: 1;
-}
-
-:root:not(.dark)[data-theme="secret"] :where(
- [data-slot="input"],
- [data-slot="textarea"],
- [data-slot="native-select"],
- [data-slot="select-trigger"],
- [data-slot="input-group"]
-):hover {
- background-color: color-mix(
- in srgb,
- var(--secret-control) 88%,
- #622a53 12%
- );
+:root[data-theme="secret"] :where([data-slot="input"], [data-slot="textarea"], [data-slot="native-select"], [data-slot="select-trigger"], [data-slot="input-group"]):hover {
+ background-color: color-mix(in srgb, var(--secret-control) 84%, #24120c 16%);
border-color: transparent;
}
-
-:root.dark[data-theme="secret"] :where(
- [data-slot="input"],
- [data-slot="textarea"],
- [data-slot="native-select"],
- [data-slot="select-trigger"],
- [data-slot="input-group"]
-):hover {
- background-color: color-mix(
- in srgb,
- var(--secret-control) 84%,
- #24120c 16%
- );
+:root[data-theme="secret"] :where([data-slot="input"], [data-slot="textarea"], [data-slot="native-select"], [data-slot="select-trigger"], [data-slot="input-group"]):is(:focus-visible, :focus-within) {
+ background-color: color-mix(in srgb, var(--secret-control) 84%, #24120c 16%);
border-color: transparent;
}
-
-:root:not(.dark)[data-theme="secret"] :where(
- [data-slot="input"],
- [data-slot="textarea"],
- [data-slot="native-select"],
- [data-slot="select-trigger"],
- [data-slot="input-group"]
-):is(:focus-visible, :focus-within) {
- background-color: color-mix(
- in srgb,
- var(--secret-control) 88%,
- #622a53 12%
- );
+:root[data-theme="secret"] [data-slot="select-trigger"]:is([data-popup-open], [data-open], [aria-expanded="true"]) {
+ background-color: color-mix(in srgb, var(--secret-control) 84%, #24120c 16%);
border-color: transparent;
}
-
-:root.dark[data-theme="secret"] :where(
- [data-slot="input"],
- [data-slot="textarea"],
- [data-slot="native-select"],
- [data-slot="select-trigger"],
- [data-slot="input-group"]
-):is(:focus-visible, :focus-within) {
- background-color: color-mix(
- in srgb,
- var(--secret-control) 84%,
- #24120c 16%
- );
- border-color: transparent;
-}
-
-:root:not(.dark)[data-theme="secret"]
- [data-slot="select-trigger"]:is(
- [data-popup-open],
- [data-open],
- [aria-expanded="true"]
- ) {
- background-color: color-mix(
- in srgb,
- var(--secret-control) 88%,
- #622a53 12%
- );
- border-color: transparent;
-}
-
-:root.dark[data-theme="secret"]
- [data-slot="select-trigger"]:is(
- [data-popup-open],
- [data-open],
- [aria-expanded="true"]
- ) {
- background-color: color-mix(
- in srgb,
- var(--secret-control) 84%,
- #24120c 16%
- );
- border-color: transparent;
-}
-
:root[data-theme="secret"] [data-slot="select-content"] {
background-color: var(--popover);
border-color: var(--secret-border);
color: var(--popover-foreground);
}
-
-:root:not(.dark)[data-theme="secret"] :where(
- [data-slot="select-item"],
- [data-slot="context-menu-item"],
- [data-slot="context-menu-sub-trigger"]
-):is(
- :hover,
- :focus,
- [data-highlighted],
- [data-selected],
- [data-open]
-) {
- background-color: color-mix(
- in srgb,
- var(--popover) 82%,
- #622a53 18%
- );
- color: #2f1b13;
+:root.dark[data-theme="secret"] [data-slot="select-content"] {
+ border-color: var(--secret-border);
}
-
-:root.dark[data-theme="secret"] :where(
- [data-slot="select-item"],
- [data-slot="context-menu-item"],
- [data-slot="context-menu-sub-trigger"]
-):is(
- :hover,
- :focus,
- [data-highlighted],
- [data-selected],
- [data-open]
-) {
- background-color: color-mix(
- in srgb,
- var(--popover) 72%,
- #0a0a0a 28%
- );
+:root[data-theme="secret"] :where([data-slot="select-item"], [data-slot="context-menu-item"], [data-slot="context-menu-sub-trigger"]):is(:hover, :focus, [data-highlighted], [data-selected], [data-open]) {
+ background-color: color-mix(in srgb, var(--popover) 72%, #0a0a0a 28%);
color: #ffe8b4;
}
-
:root[data-theme="secret"] [data-slot="button"][data-variant="default"] {
background-color: var(--primary);
- background-image:
- linear-gradient(
- to top,
- rgb(255 255 255 / 12%),
- rgb(255 255 255 / 2%)
- ),
- linear-gradient(
- 115deg,
- var(--secret-gold-dark) 0%,
- var(--secret-gold) 30%,
- var(--secret-gold-light) 47%,
- var(--secret-gold) 62%,
- var(--secret-gold-dark) 100%
- );
+ background-image: linear-gradient(to top, rgb(255 255 255 / 12%), rgb(255 255 255 / 2%)), linear-gradient(115deg, var(--secret-gold-dark) 0%, var(--secret-gold) 30%, var(--secret-gold-light) 47%, var(--secret-gold) 62%, var(--secret-gold-dark) 100%);
border-color: var(--secret-border);
color: var(--primary-foreground);
text-shadow: 0 1px rgb(255 255 255 / 35%);
- box-shadow:
- inset 0 1px rgb(255 255 255 / 45%),
- 0 0.45rem 1.2rem rgb(36 18 12 / 28%);
+ box-shadow: inset 0 1px rgb(255 255 255 / 45%), 0 0.45rem 1.2rem rgb(36 18 12 / 28%);
}
-
-:root[data-theme="secret"] :where(
- [data-slot="card"],
- [data-slot="dialog-content"],
- [data-slot="alert-dialog-content"]
-) {
+:root[data-theme="secret"] :where([data-slot="card"], [data-slot="dialog-content"], [data-slot="alert-dialog-content"]) {
border-color: var(--secret-border);
- box-shadow:
- inset 0 1px color-mix(in oklch, white 8%, transparent),
- 0 1rem 3rem rgb(97 37 82 / 12%);
+ box-shadow: inset 0 1px color-mix(in oklch, white 8%, transparent), 0 1rem 3rem rgb(97 37 82 / 12%);
}
-
:root[data-theme="secret"] [data-slot="card"] {
background: var(--card);
}
-
-:root[data-theme="secret"] :where(
- [data-slot="button"][data-variant="outline"],
- [data-slot="button"][data-variant="link"],
- [data-slot="badge"][data-variant="outline"],
- [data-slot="toggle"][data-variant="outline"]
-) {
+:root[data-theme="secret"] :where([data-slot="button"][data-variant="outline"], [data-slot="button"][data-variant="link"], [data-slot="badge"][data-variant="outline"], [data-slot="toggle"][data-variant="outline"]) {
background-color: var(--secondary);
border-color: transparent;
color: var(--secondary-foreground);
}
-
:root[data-theme="secret"] [data-slot="button"][data-variant="link"] {
background-image: none;
}
-
:root[data-theme="secret"] [data-slot="button"][data-variant="link"]:hover {
background-color: var(--secondary);
background-image: none;
}
-
-:root:not(.dark)[data-theme="secret"] :where(
- [data-slot="button"],
- [data-slot="badge"],
- [data-slot="toggle"]
-)[data-variant="outline"]:is(
- :hover,
- :focus-visible,
- [aria-expanded="true"],
- [data-popup-open],
- [data-open]
-) {
- background-color: color-mix(
- in srgb,
- var(--secondary) 82%,
- #622a53 18%
- );
+:root[data-theme="secret"] [data-slot="button"][data-variant="outline"]:hover {
+ background-color: color-mix(in srgb, #5e244e 82%, #24120c 18%);
border-color: transparent;
- color: var(--secondary-foreground);
}
-
-:root.dark[data-theme="secret"] :where(
- [data-slot="button"],
- [data-slot="badge"],
- [data-slot="toggle"]
-)[data-variant="outline"]:is(
- :hover,
- :focus-visible,
- [aria-expanded="true"],
- [data-popup-open],
- [data-open]
-) {
- background-color: color-mix(
- in srgb,
- var(--secondary) 82%,
- #24120c 18%
- );
+:root[data-theme="secret"] :where([data-slot="badge"], [data-slot="toggle"])[data-variant="outline"]:hover {
+ background-color: color-mix(in srgb, #5e244e 82%, #24120c 18%);
border-color: transparent;
- color: var(--secondary-foreground);
}
-
-:root[data-theme="secret"] :where(
- [data-slot="card-title"],
- [data-slot="item-media"][data-variant="icon"],
- [data-slot="badge"][data-variant="outline"]
-) svg {
+:root[data-theme="secret"] :where([data-slot="button"], [data-slot="badge"], [data-slot="toggle"])[data-variant="outline"]:is(:focus-visible, [aria-expanded="true"], [data-popup-open], [data-open]) {
+ background-color: color-mix(in srgb, #5e244e 82%, #24120c 18%);
+ border-color: transparent;
+}
+:root:not(.dark)[data-theme="secret"] [data-slot="button"][data-variant="outline"]:hover,
+:root:not(.dark)[data-theme="secret"] :where([data-slot="badge"], [data-slot="toggle"])[data-variant="outline"]:hover,
+:root:not(.dark)[data-theme="secret"] :where([data-slot="button"], [data-slot="badge"], [data-slot="toggle"])[data-variant="outline"]:is(:focus-visible, [aria-expanded="true"], [data-popup-open], [data-open]) {
+ background-color: color-mix(in srgb, var(--secondary) 82%, #fffaf2 18%);
+ border-color: transparent;
+}
+:root.dark[data-theme="secret"] :where([data-slot="button"][data-variant="outline"], [data-slot="button"][data-variant="link"], [data-slot="badge"][data-variant="outline"], [data-slot="toggle"][data-variant="outline"]) {
+ background-color: #5e244e;
+ border-color: transparent;
+ color: #ffe8b4;
+}
+:root.dark[data-theme="secret"] [data-slot="button"][data-variant="outline"]:hover {
+ background-color: color-mix(in srgb, #5e244e 82%, #24120c 18%);
+}
+:root[data-theme="secret"] :where([data-slot="card-title"], [data-slot="item-media"][data-variant="icon"], [data-slot="badge"][data-variant="outline"]) svg {
color: var(--primary);
}
-
-:root:not(.dark)[data-theme="secret"] :where(
- [data-slot="card-title"],
- [data-slot="item-media"][data-variant="icon"],
- [data-slot="badge"][data-variant="outline"]
-) svg {
- color: var(--secret-gold-dark);
-}
-
:root[data-theme="secret"] [data-slot="separator"] {
- background: linear-gradient(
- 90deg,
- transparent,
- color-mix(in oklch, var(--primary) 42%, var(--border)),
- transparent
- );
+ background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--primary) 42%, var(--border)), transparent);
}`,
},
] as const);
diff --git a/src/theme/types.ts b/src/theme/types.ts
index 1c488b9..d09fd11 100644
--- a/src/theme/types.ts
+++ b/src/theme/types.ts
@@ -74,7 +74,6 @@ export type ThemeProviderProps = {
customCssStorageKey?: string | null;
parentThemeStorageKey?: string | null;
designStorageKey?: string | null;
- notCustomizedStorageKey?: string | null;
disableTransitionOnChange?: boolean;
};
@@ -103,7 +102,6 @@ export type ThemeProviderState = {
applyThemePreset: (id: string) => void;
resetThemePreset: () => void;
isThemeCustomized: boolean;
- notCustomized: boolean;
themeDesign: ThemeDesign;
setThemeDesign: (
design: ThemeDesign | ((current: ThemeDesign) => ThemeDesign),