Streamlit theme functionality

* Adjsuted css for light/dark streamlit themes * Adjusted react for theme operations * Fixed path identification in index.html * Added release change
stavrostheocharis · Jan 5, 2024 · 0f1be22 · 0f1be22
1 parent 16207b7
commit 0f1be22
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 13 deletions.
diff --git a/setup.py b/setup.py
@@ -5,7 +5,7 @@
 
 setuptools.setup(
     name="streamlit-token_craft",
-    version="0.1.5",
+    version="0.2.0",
     author="Stavros Theocharis",
     author_email="[email protected]",
     description="streamlit custom token craft and management component",

diff --git a/token_craft/__init__.py b/token_craft/__init__.py
@@ -1,7 +1,7 @@
 import streamlit.components.v1 as components
 import os
 
-_RELEASE = False
+_RELEASE = True
 
 if not _RELEASE:
     _component_func = components.declare_component(

diff --git a/token_craft/frontend/package.json b/token_craft/frontend/package.json
@@ -2,6 +2,7 @@
   "name": "streamlit-token-craft",
   "version": "0.1.0",
   "private": true,
+  "homepage": "./",
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",

diff --git a/token_craft/frontend/src/TokenTable.css b/token_craft/frontend/src/TokenTable.css
@@ -112,8 +112,8 @@ th[data-tooltip]:hover::after, td[data-tooltip]:hover::after {
   pointer-events: none; /* Ignore mouse events */
 }
 
-/* TODO: Need to identify the streamlit theme to add colours and hovers */
-/* 
+/* Custom colours based on theme */
+
 .light th {
   background-color: #fafafa; 
   color: #333; 
@@ -127,16 +127,16 @@ th[data-tooltip]:hover::after, td[data-tooltip]:hover::after {
 
 
 .dark th {
-  background-color: #444; 
+  background-color: #555; 
   color: white; 
 }
 
 .dark tr:nth-child(even) {
-  background-color: #383838; 
+  background-color: #404040; 
 }
 
 .dark  tr:hover {
-  background-color: #2c2c2c; 
-  } */
+  background-color: #333; 
+  }
 
 
diff --git a/token_craft/frontend/src/TokenTable.tsx b/token_craft/frontend/src/TokenTable.tsx
@@ -81,13 +81,10 @@ interface TokenTableProps extends ComponentProps {
 }
 
 
-const TokenTable: React.FC<TokenTableProps> = ({ args }) => {
+const TokenTable: React.FC<TokenTableProps> = ({ args, theme }) => {
   const { columnVisibility } = args;
   const [pendingDeletion, setPendingDeletion] = useState<string | null>(null);
   const [tokenList, setTokenList] = useState<Token[]>(args.tokens || []);
-  const { theme } = args;
-  const currentTheme = theme?.base || 'light';
-
   useEffect(() => {
     // Handle theme change if necessary
   }, [args.theme]);
@@ -128,7 +125,7 @@ const TokenTable: React.FC<TokenTableProps> = ({ args }) => {
   };
 
   return (
-    <div className={`token-table-container ${currentTheme}`}>
+    <div className={`token-table-container ${theme?.base}`}>
       <table className="token-table">
         <thead>
           <tr>