fix #147: mixed up theme black/white (#152)

Author: ibek

ui/src/App.tsx

@@ -81,7 +81,7 @@ function App() {
             </HeaderGlobalBar>
           </Header>
 
-          <Content id="main-content" style={{ background: "#262626", padding: 0 }}>
+          <Content id="main-content">
             <Outlet />
           </Content>
         </>

ui/src/Pages/LLMChat/LLMChatPage.tsx

@@ -455,7 +455,7 @@ export const LLMChatPage: React.FC = () => {
           <Tab>Chat</Tab>
         </TabList>
         <TabPanels>
-          <TabPanel style={{ background: "#161616" }}>
+          <TabPanel className="tabbg">
             <Grid fullWidth>
               <Column sm={4} md={8} lg={8}>
                 <Tile style={{ marginBottom: "1rem", padding: "1rem" }}>
@@ -534,7 +534,7 @@ export const LLMChatPage: React.FC = () => {
               </Column>
             </Grid>
           </TabPanel>
-          <TabPanel style={{ background: "#161616" }}>
+          <TabPanel className="tabbg">
             <Tile style={{ marginBottom: "1rem", padding: "1rem" }}>
               <Stack gap={7}>
                 {isLoadingTools && <p>Loading tools...</p>}
@@ -572,7 +572,7 @@ export const LLMChatPage: React.FC = () => {
               </Stack>
             </Tile>
           </TabPanel>
-          <TabPanel style={{ background: "#161616" }}>
+          <TabPanel className="tabbg">
             <Grid fullWidth>
               <Column sm={4} md={8} lg={5}>
                 <Tile style={{ marginBottom: "1rem", padding: "1rem" }}>

ui/src/Pages/Resources/ResourcesPage.tsx

@@ -139,7 +139,7 @@ export const ResourcesPage: React.FC = () => {
         Resources are a fundamental primitive in MCP that allow servers to
         expose data and content to LLM clients
       </p>
-      <div style={{ background: "#161616", paddingTop: "2rem" }}>
+      <div id="page-content">
         {resourcesList}
       </div>
       {isAddModalOpen && (

ui/src/Pages/Tools/ToolsPage.tsx

@@ -98,7 +98,7 @@ export const ToolsPage: React.FC = () => {
         by utilizing these tools. Each tool is uniquely identified by a name and
         defined with an input schema outlining the expected parameters.
       </p>
-      <div style={{ background: "#161616", paddingTop: "2rem" }}>
+      <div id="page-content">
         {fetchedData && (
           <ToolsTable
             fetchedData={fetchedData}

ui/src/index.scss

@@ -29,3 +29,17 @@ body {
   background: theme.$background;
   color: theme.$text-primary;
 }
+
+#main-content {
+  background: theme.$layer-01;
+  padding: 0;
+}
+
+#page-content {
+  background: theme.$background;
+  padding-top: 2rem;
+}
+
+.tabbg {
+  background: theme.$background;
+}