diff --git a/src-tauri/src/analytics.rs b/src-tauri/src/analytics.rs
index 1d19741b..e944c3bd 100644
--- a/src-tauri/src/analytics.rs
+++ b/src-tauri/src/analytics.rs
@@ -1,6 +1,6 @@
use std::fmt::Display;
-use log::warn;
+use log::{debug, warn};
use serde::{Deserialize, Serialize};
use serde_json::json;
use sqlx::types::JsonValue;
@@ -19,6 +19,7 @@ const NUM_LAUNCHES_KEY: &str = "num_launches";
#[serde(rename_all = "snake_case")]
pub enum AnalyticsResource {
App,
+ Appearance,
CookieJar,
Dialog,
Environment,
@@ -29,9 +30,10 @@ pub enum AnalyticsResource {
HttpRequest,
HttpResponse,
KeyValue,
- Sidebar,
- Workspace,
Setting,
+ Sidebar,
+ Theme,
+ Workspace,
}
impl AnalyticsResource {
@@ -187,7 +189,7 @@ pub async fn track_event(
// Disable analytics actual sending in dev
if is_dev() {
- // debug!("track: {} {} {:?}", event, attributes_json, params);
+ debug!("track: {}", event);
return;
}
@@ -247,4 +249,4 @@ async fn get_id(app_handle: &AppHandle) -> String {
pub async fn get_num_launches(app: &AppHandle) -> i32 {
get_key_value_int(app, NAMESPACE, NUM_LAUNCHES_KEY, 0).await
-}
\ No newline at end of file
+}
diff --git a/src-web/components/BinaryFileEditor.tsx b/src-web/components/BinaryFileEditor.tsx
index 9153c662..1fa4107a 100644
--- a/src-web/components/BinaryFileEditor.tsx
+++ b/src-web/components/BinaryFileEditor.tsx
@@ -62,17 +62,17 @@ export function BinaryFileEditor({
{mimeType} for current request?
+
-
)}
diff --git a/src-web/components/Settings/Settings.tsx b/src-web/components/Settings/Settings.tsx
index 794672ba..845ab894 100644
--- a/src-web/components/Settings/Settings.tsx
+++ b/src-web/components/Settings/Settings.tsx
@@ -24,7 +24,7 @@ export const Settings = () => {
<>
Settings
diff --git a/src-web/components/Settings/SettingsAppearance.tsx b/src-web/components/Settings/SettingsAppearance.tsx
index 67a376d9..d383820c 100644
--- a/src-web/components/Settings/SettingsAppearance.tsx
+++ b/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 });
+ }}
/>
)}
diff --git a/src-web/components/core/Select.tsx b/src-web/components/core/Select.tsx
index 50432f87..bd8605e0 100644
--- a/src-web/components/core/Select.tsx
+++ b/src-web/components/core/Select.tsx
@@ -60,7 +60,7 @@ export function Select({
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',
diff --git a/src-web/lib/analytics.ts b/src-web/lib/analytics.ts
index a3863f24..3c2b10ed 100644
--- a/src-web/lib/analytics.ts
+++ b/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 =
diff --git a/src-web/lib/theme/themes.ts b/src-web/lib/theme/themes.ts
index 55c52f96..b7a8480e 100644
--- a/src-web/lib/theme/themes.ts
+++ b/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,
];
diff --git a/src-web/lib/theme/themes/moonlight.ts b/src-web/lib/theme/themes/moonlight.ts
new file mode 100644
index 00000000..eaa44f5e
--- /dev/null
+++ b/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];