10 files changed, 43 insertions, 6 deletions
diff --git a/packages/cli/src/ui/themes/ansi.ts b/packages/cli/src/ui/themes/ansi.ts
index 29ca6469..b5e2015e 100644
--- a/packages/cli/src/ui/themes/ansi.ts
+++ b/packages/cli/src/ui/themes/ansi.ts
@@ -7,7 +7,8 @@
 import { ansiTheme, Theme } from './theme.js';
 
 export const ANSI: Theme = new Theme(
-  'ANSI colors only',
+  'ANSI',
+  'ansi',
   {
     hljs: {
       display: 'block',
diff --git a/packages/cli/src/ui/themes/atom-one-dark.ts b/packages/cli/src/ui/themes/atom-one-dark.ts
index 5599c01a..d38fbcbd 100644
--- a/packages/cli/src/ui/themes/atom-one-dark.ts
+++ b/packages/cli/src/ui/themes/atom-one-dark.ts
@@ -7,7 +7,8 @@
 import { darkTheme, Theme } from './theme.js';
 
 export const AtomOneDark: Theme = new Theme(
-  'Atom One Dark',
+  'Atom One',
+  'dark',
   {
     hljs: {
       display: 'block',
diff --git a/packages/cli/src/ui/themes/dracula.ts b/packages/cli/src/ui/themes/dracula.ts
index e8979e70..9597e005 100644
--- a/packages/cli/src/ui/themes/dracula.ts
+++ b/packages/cli/src/ui/themes/dracula.ts
@@ -8,6 +8,7 @@ import { darkTheme, Theme } from './theme.js';
 
 export const Dracula: Theme = new Theme(
   'Dracula',
+  'dark',
   {
     hljs: {
       display: 'block',
diff --git a/packages/cli/src/ui/themes/github.ts b/packages/cli/src/ui/themes/github.ts
index 61d7de65..2a5533bb 100644
--- a/packages/cli/src/ui/themes/github.ts
+++ b/packages/cli/src/ui/themes/github.ts
@@ -8,6 +8,7 @@ import { lightTheme, Theme } from './theme.js';
 
 export const GitHub: Theme = new Theme(
   'GitHub',
+  'light',
   {
     hljs: {
       display: 'block',
diff --git a/packages/cli/src/ui/themes/googlecode.ts b/packages/cli/src/ui/themes/googlecode.ts
index 25dbb8a3..0729d67a 100644
--- a/packages/cli/src/ui/themes/googlecode.ts
+++ b/packages/cli/src/ui/themes/googlecode.ts
@@ -8,6 +8,7 @@ import { lightTheme, Theme } from './theme.js';
 
 export const GoogleCode: Theme = new Theme(
   'Google Code',
+  'light',
   {
     hljs: {
       display: 'block',
diff --git a/packages/cli/src/ui/themes/theme-manager.ts b/packages/cli/src/ui/themes/theme-manager.ts
index 4a8cc32c..d1f8df9c 100644
--- a/packages/cli/src/ui/themes/theme-manager.ts
+++ b/packages/cli/src/ui/themes/theme-manager.ts
@@ -11,12 +11,12 @@ import { GoogleCode } from './googlecode.js';
 import { VS } from './vs.js';
 import { VS2015 } from './vs2015.js';
 import { XCode } from './xcode.js';
-import { Theme } from './theme.js';
+import { Theme, ThemeType } from './theme.js';
 import { ANSI } from './ansi.js';
 
 export interface ThemeDisplay {
   name: string;
-  active: boolean;
+  type: ThemeType;
 }
 
 export const DEFAULT_THEME: Theme = VS2015;
@@ -43,9 +43,30 @@ class ThemeManager {
    * Returns a list of available theme names.
    */
   getAvailableThemes(): ThemeDisplay[] {
-    return this.availableThemes.map((theme) => ({
+    const sortedThemes = [...this.availableThemes].sort((a, b) => {
+      const typeOrder = (type: ThemeType): number => {
+        switch (type) {
+          case 'dark':
+            return 1;
+          case 'light':
+            return 2;
+          case 'ansi':
+            return 3;
+          default:
+            return 4;
+        }
+      };
+
+      const typeComparison = typeOrder(a.type) - typeOrder(b.type);
+      if (typeComparison !== 0) {
+        return typeComparison;
+      }
+      return a.name.localeCompare(b.name);
+    });
+
+    return sortedThemes.map((theme) => ({
       name: theme.name,
-      active: theme === this.activeTheme,
+      type: theme.type,
     }));
   }
 
diff --git a/packages/cli/src/ui/themes/theme.ts b/packages/cli/src/ui/themes/theme.ts
index 88868790..582d2e9e 100644
--- a/packages/cli/src/ui/themes/theme.ts
+++ b/packages/cli/src/ui/themes/theme.ts
@@ -5,7 +5,11 @@
  */
 
 import type { CSSProperties } from 'react';
+
+export type ThemeType = 'light' | 'dark' | 'ansi';
+
 export interface ColorsTheme {
+  type: ThemeType;
   Background: string;
   Foreground: string;
   LightBlue: string;
@@ -21,6 +25,7 @@ export interface ColorsTheme {
 }
 
 export const lightTheme: ColorsTheme = {
+  type: 'light',
   Background: '#FAFAFA',
   Foreground: '#3C3C43',
   LightBlue: '#ADD8E6',
@@ -36,6 +41,7 @@ export const lightTheme: ColorsTheme = {
 };
 
 export const darkTheme: ColorsTheme = {
+  type: 'dark',
   Background: '#1E1E2E',
   Foreground: '#CDD6F4',
   LightBlue: '#ADD8E6',
@@ -51,6 +57,7 @@ export const darkTheme: ColorsTheme = {
 };
 
 export const ansiTheme: ColorsTheme = {
+  type: 'ansi',
   Background: 'black',
   Foreground: 'white',
   LightBlue: 'blue',
@@ -250,6 +257,7 @@ export class Theme {
    */
   constructor(
     readonly name: string,
+    readonly type: ThemeType,
     rawMappings: Record<string, CSSProperties>,
     readonly colors: ColorsTheme,
   ) {
diff --git a/packages/cli/src/ui/themes/vs.ts b/packages/cli/src/ui/themes/vs.ts
index ea0d938d..2faf02a7 100644
--- a/packages/cli/src/ui/themes/vs.ts
+++ b/packages/cli/src/ui/themes/vs.ts
@@ -8,6 +8,7 @@ import { lightTheme, Theme } from './theme.js';
 
 export const VS: Theme = new Theme(
   'VS',
+  'light',
   {
     hljs: {
       display: 'block',
diff --git a/packages/cli/src/ui/themes/vs2015.ts b/packages/cli/src/ui/themes/vs2015.ts
index 93f00ec8..34431abf 100644
--- a/packages/cli/src/ui/themes/vs2015.ts
+++ b/packages/cli/src/ui/themes/vs2015.ts
@@ -8,6 +8,7 @@ import { darkTheme, Theme } from './theme.js';
 
 export const VS2015: Theme = new Theme(
   'VS2015',
+  'dark',
   {
     hljs: {
       display: 'block',
diff --git a/packages/cli/src/ui/themes/xcode.ts b/packages/cli/src/ui/themes/xcode.ts
index 53fd2e5b..26b8cf72 100644
--- a/packages/cli/src/ui/themes/xcode.ts
+++ b/packages/cli/src/ui/themes/xcode.ts
@@ -8,6 +8,7 @@ import { lightTheme, Theme } from './theme.js';
 
 export const XCode: Theme = new Theme(
   'XCode',
+  'light',
   {
     hljs: {
       display: 'block',