Theme analytics and Moonlight

src-web/components/BinaryFileEditor.tsx

@@ -62,17 +62,17 @@ export function BinaryFileEditor({
             <InlineCode>{mimeType}</InlineCode> for current request?
           </div>
           <HStack space={1.5} justifyContent="center">
+            <Button size="sm" variant="border" onClick={() => ignoreContentType.set(true)}>
+              Ignore
+            </Button>
             <Button
               variant="solid"
-              color="secondary"
+              color="primary"
               size="sm"
               onClick={() => onChangeContentType(mimeType)}
             >
               Set Header
             </Button>
-            <Button size="sm" variant="border" onClick={() => ignoreContentType.set(true)}>
-              Ignore
-            </Button>
           </HStack>
         </Banner>
       )}

src-web/components/Settings/Settings.tsx

@@ -24,7 +24,7 @@ export const Settings = () => {
     <>
       <div
         data-tauri-drag-region
-        className="h-[27px] bg-background-highlight-secondary flex items-center justify-center border-b border-background-highlight"
+        className="x-theme-appHeader h-[27px] bg-background text-fg-subtle flex items-center justify-center border-b border-background-highlight text-sm font-semibold"
       >
         Settings
       </div>

src-web/components/Settings/SettingsAppearance.tsx

@@ -5,6 +5,7 @@ import { useResolvedTheme } from '../../hooks/useResolvedTheme';
 import { useSettings } from '../../hooks/useSettings';
 import { useThemes } from '../../hooks/useThemes';
 import { useUpdateSettings } from '../../hooks/useUpdateSettings';
+import { trackEvent } from '../../lib/analytics';
 import { clamp } from '../../lib/clamp';
 import { isThemeDark } from '../../lib/theme/window';
 import type { ButtonProps } from '../core/Button';
@@ -112,6 +113,7 @@ export function SettingsAppearance() {
         size="sm"
         value={settings.appearance}
         onChange={(appearance) => {
+          trackEvent('appearance', 'update', { appearance });
           updateSettings.mutateAsync({ appearance });
         }}
         options={[
@@ -130,7 +132,10 @@ export function SettingsAppearance() {
             size="sm"
             value={activeTheme.light.id}
             options={lightThemes}
-            onChange={(themeLight) => updateSettings.mutateAsync({ ...settings, themeLight })}
+            onChange={(themeLight) => {
+              trackEvent('theme', 'update', { theme: themeLight, appearance: 'light' });
+              updateSettings.mutateAsync({ ...settings, themeLight });
+            }}
           />
         )}
         {(settings.appearance === 'system' || settings.appearance === 'dark') && (
@@ -142,7 +147,10 @@ export function SettingsAppearance() {
             size="sm"
             value={activeTheme.dark.id}
             options={darkThemes}
-            onChange={(themeDark) => updateSettings.mutateAsync({ ...settings, themeDark })}
+            onChange={(themeDark) => {
+              trackEvent('theme', 'update', { theme: themeDark, appearance: 'dark' });
+              updateSettings.mutateAsync({ ...settings, themeDark });
+            }}
           />
         )}
       </HStack>

src-web/components/core/Select.tsx

@@ -60,7 +60,7 @@ export function Select<T extends string>({
         className={classNames(
           'w-full rounded-md text-fg text-sm font-mono',
           'pl-2',
-          'bg-background-highlight-secondary border',
+          'border',
           focused ? 'border-border-focus' : 'border-background-highlight',
           size === 'xs' && 'h-xs',
           size === 'sm' && 'h-sm',

src-web/lib/analytics.ts

@@ -1,6 +1,7 @@
 import { invoke } from '@tauri-apps/api/core';
 
 export type TrackResource =
+  | 'appearance'
   | 'app'
   | 'cookie_jar'
   | 'dialog'
@@ -14,7 +15,7 @@ export type TrackResource =
   | 'key_value'
   | 'setting'
   | 'sidebar'
-  | 'toast'
+  | 'theme'
   | 'workspace';
 
 export type TrackAction =

src-web/lib/theme/themes.ts

@@ -2,6 +2,7 @@ import { catppuccin } from './themes/catppuccin';
 import { github } from './themes/github';
 import { hotdogStand } from './themes/hotdog-stand';
 import { monokaiPro } from './themes/monokai-pro';
+import { moonlight } from './themes/moonlight';
 import { rosePine } from './themes/rose-pine';
 import { yaak, yaakDark, yaakLight } from './themes/yaak';
 
@@ -12,7 +13,8 @@ export const yaakThemes = [
   ...yaak,
   ...catppuccin,
   ...rosePine,
-  ...github,
   ...monokaiPro,
+  ...github,
+  ...moonlight,
   ...hotdogStand,
 ];

src-web/lib/theme/themes/moonlight.ts

@@ -0,0 +1,72 @@
+import { Color } from '../color';
+import type { YaakTheme } from '../window';
+
+export const colors = {
+  lightRed: '#ff98a4',
+  red: '#ff757f',
+  darkRed: '#ff5370',
+  lightOrange: '#f8b576',
+  orange: '#ff966c',
+  darkOrange: '#fc7b7b',
+  yellow: '#ffc777',
+  green: '#c3e88d',
+  lightTeal: '#7af8ca',
+  teal: '#3ad7c7',
+  lightCyan: '#b4f9f8',
+  cyan: '#78dbff',
+  sky: '#60bdff',
+  blue: '#7cafff',
+  darkBlue: '#3d6fe0',
+  darkestBlue: '#3b63cf',
+  indigo: '#af9fff',
+  purple: '#c4a2ff',
+  pink: '#fca7ea',
+  darkPink: '#fd8aca',
+  saturatedGray: '#7a88cf',
+  desaturatedGray: '#979bb6',
+  gray11: '#d5def8',
+  gray10: '#c8d3f5',
+  gray9: '#b4c2f0',
+  gray8: '#a9b8e8',
+  gray7: '#828bb8',
+  gray6: '#444a73',
+  gray5: '#2f334d',
+  gray4: '#222436',
+  gray3: '#1e2030',
+  gray2: '#191a2a',
+  gray1: '#131421',
+} as const;
+
+const moonlightDefault: YaakTheme = {
+  id: 'moonlight',
+  name: 'Moonlight',
+  background: new Color(colors.gray4, 'dark'),
+  backgroundHighlight: new Color(colors.gray5, 'dark'),
+  backgroundHighlightSecondary: new Color(colors.gray5, 'dark'),
+  foreground: new Color(colors.gray11, 'dark'),
+  foregroundSubtle: new Color(colors.gray7, 'dark'),
+  foregroundSubtler: new Color(colors.gray6, 'dark'),
+  colors: {
+    primary: new Color(colors.purple, 'dark'),
+    secondary: new Color(colors.desaturatedGray, 'dark'),
+    info: new Color(colors.blue, 'dark'),
+    success: new Color(colors.teal, 'dark'),
+    notice: new Color(colors.yellow, 'dark'),
+    warning: new Color(colors.orange, 'dark'),
+    danger: new Color(colors.red, 'dark'),
+  },
+  components: {
+    appHeader: {
+      background: new Color(colors.gray3, 'dark'),
+      backgroundHighlight: new Color(colors.gray5, 'dark'),
+      backgroundHighlightSecondary: new Color(colors.gray4, 'dark'),
+    },
+    sidebar: {
+      background: new Color(colors.gray3, 'dark'),
+      backgroundHighlight: new Color(colors.gray5, 'dark'),
+      backgroundHighlightSecondary: new Color(colors.gray4, 'dark'),
+    },
+  },
+};
+
+export const moonlight = [moonlightDefault];