From 5dbecc5e9b5ceeecdc9ada44a9f9b762a1973072 Mon Sep 17 00:00:00 2001
From: Abhiraj <abhirajmarne11@gmail.com>
Date: Wed, 28 Jan 2026 19:23:22 +0530
Subject: [PATCH] Fix: Unclear select Box for callouts when creating a Blog
 #167

---
 app/(core)/styles/theory.css | 28 +++++++++++++++++++++++-----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/app/(core)/styles/theory.css b/app/(core)/styles/theory.css
index b0c947d..aa9807d 100644
--- a/app/(core)/styles/theory.css
+++ b/app/(core)/styles/theory.css
@@ -385,13 +385,14 @@
 
 /* Toolbar Editor */
 .image-editor-toolbar {
-  background: #f4f4f4;
+  background: var(--bg-light);
   padding: 10px;
   border-radius: 8px;
   margin-bottom: 10px;
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
+  border: 1px solid var(--border-color);
 }
 
 .url-input {
@@ -399,13 +400,25 @@
   padding: 4px 8px;
 }
 .size-select {
-  padding: 4px;
-  border-radius: 4px;
+  padding: 5px 10px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  background-color: var(--bg-darker);
+  color: var(--text-primary);
+  font-size: 13px;
+  cursor: pointer;
 }
+
+.size-select option {
+  background-color: var(--bg-darker);
+  color: var(--text-primary);
+}
+
 .upload-button {
   cursor: pointer;
   padding: 4px 10px;
-  background: #ddd;
+  background: var(--bg-light);
+  border: 1px solid var(--border-color);
   border-radius: 4px;
 }
 
@@ -1053,7 +1066,7 @@
   padding: 5px 10px;
   border: 1px solid var(--border-color);
   border-radius: var(--radius-sm);
-  background-color: var(--bg-light);
+  background-color: var(--bg-darker);
   color: var(--text-primary);
   font-size: 13px;
   font-weight: 600;
@@ -1062,6 +1075,11 @@
   text-transform: uppercase;
 }
 
+.callout-type-selector option {
+  background-color: var(--bg-darker);
+  color: var(--text-primary);
+}
+
 .callout-type-selector:hover {
   border-color: var(--accent-color);
 }