Skip to content

Commit 179ecc4

Browse files
clstaudtclstaudt
committed
new theme
1 parent e8d2b63 commit 179ecc4

File tree

5 files changed

+443
-4
lines changed

5 files changed

+443
-4
lines changed

‎assets/logo.png

399 KB
Loading

‎ragadoc/themes/README.md

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
# 🎨 Theme System
2+
3+
This directory contains CSS theme files for the ragadoc Streamlit application.
4+
5+
## Available Themes
6+
7+
- **darkstreaming.css** - Modern dark theme with streaming-inspired design and green accents
8+
- **classic.css** - Clean, professional light theme with blue accents
9+
10+
## How to Use
11+
12+
### Default Usage
13+
The app uses the `darkstreaming` theme by default:
14+
15+
```python
16+
from ragadoc import setup_streamlit_config
17+
setup_streamlit_config() # Uses darkstreaming theme
18+
```
19+
20+
### Switch Themes
21+
To use a different theme:
22+
23+
```python
24+
from ragadoc import setup_streamlit_config
25+
setup_streamlit_config(theme="classic") # Uses classic theme
26+
```
27+
28+
### Environment-Based Theme Selection
29+
You can also set themes via environment variables:
30+
31+
```bash
32+
export RAGADOC_THEME=classic
33+
streamlit run app.py
34+
```
35+
36+
## Creating New Themes
37+
38+
### 1. Create a CSS File
39+
Create a new `.css` file in this directory (e.g., `mytheme.css`):
40+
41+
```css
42+
/* My Custom Theme */
43+
:root {
44+
--primary-color: #your-color;
45+
--bg-color: #your-bg;
46+
/* Define your variables */
47+
}
48+
49+
.stApp {
50+
background: var(--bg-color);
51+
/* Your styling */
52+
}
53+
54+
/* Style other components */
55+
.stButton > button {
56+
background: var(--primary-color);
57+
}
58+
```
59+
60+
### 2. Use Your Theme
61+
```python
62+
setup_streamlit_config(theme="mytheme")
63+
```
64+
65+
## Theme Structure
66+
67+
### CSS Variables
68+
Use CSS variables for easy customization:
69+
- `--primary-color` - Main brand color
70+
- `--accent-color` - Secondary accent color
71+
- `--bg-color` - Background color
72+
- `--text-color` - Text color
73+
- `--border-color` - Border color
74+
75+
### Key Streamlit Classes
76+
Important CSS classes to style:
77+
- `.stApp` - Main application container
78+
- `.stButton > button` - Buttons
79+
- `.stSelectbox > div > div` - Select boxes
80+
- `.stTextInput > div > div > input` - Text inputs
81+
- `.stChatMessage` - Chat messages
82+
- `.css-1d391kg` - Sidebar
83+
84+
## Fallback System
85+
86+
If a theme file doesn't exist, the system automatically falls back to a basic dark theme to ensure the app always has styling.
87+
88+
## Best Practices
89+
90+
1. **Use CSS Variables** - Makes themes easy to customize
91+
2. **Keep It Focused** - Only style what you need to change
92+
3. **Test Responsiveness** - Include mobile-friendly styles
93+
4. **Comment Your Code** - Help others understand your theme
94+
5. **Follow Naming Conventions** - Use descriptive theme names
95+
96+
## Contributing
97+
98+
To contribute a new theme:
99+
1. Create a new CSS file following the naming convention
100+
2. Test it thoroughly with the app
101+
3. Add it to the list of available themes in this README
102+
4. Submit a pull request
103+
104+
Happy theming! 🎨

‎ragadoc/themes/classic.css

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
/* Classic Theme for Streamlit Apps
2+
* A clean, professional light theme
3+
*/
4+
5+
:root {
6+
--primary-blue: #0066cc;
7+
--accent-blue: #0080ff;
8+
--light-bg: #ffffff;
9+
--surface-bg: #f8f9fa;
10+
--elevated-bg: #ffffff;
11+
--text-primary: #212529;
12+
--text-secondary: #6c757d;
13+
--border-color: #dee2e6;
14+
--hover-color: #e9ecef;
15+
}
16+
17+
.stApp {
18+
background: var(--light-bg);
19+
color: var(--text-primary);
20+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
21+
}
22+
23+
h1 {
24+
color: var(--primary-blue) !important;
25+
font-weight: 700 !important;
26+
}
27+
28+
.stButton > button {
29+
background: var(--primary-blue) !important;
30+
color: white !important;
31+
border: none !important;
32+
border-radius: 6px !important;
33+
padding: 0.5rem 1rem !important;
34+
}
35+
36+
.stButton > button:hover {
37+
background: var(--accent-blue) !important;
38+
transform: translateY(-1px) !important;
39+
}
40+
41+
.stSelectbox > div > div,
42+
.stTextInput > div > div > input {
43+
background: white !important;
44+
border: 1px solid var(--border-color) !important;
45+
border-radius: 4px !important;
46+
color: var(--text-primary) !important;
47+
}
48+
49+
.css-1d391kg {
50+
background: var(--surface-bg) !important;
51+
border-right: 1px solid var(--border-color);
52+
}

‎ragadoc/themes/darkstreaming.css

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
/* DarkStreaming Theme for Streamlit Apps
2+
* A modern, streaming-inspired dark theme with green accents
3+
* Easy to customize by modifying CSS variables
4+
*/
5+
6+
/* Import Google Fonts */
7+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
8+
9+
/* Theme Variables - Easy to Customize */
10+
:root {
11+
--primary-gold: #FFB000;
12+
--accent-gold: #FFC947;
13+
--dark-bg: #121212;
14+
--darker-bg: #0a0a0a;
15+
--surface-bg: #1a1a1a;
16+
--elevated-bg: #242424;
17+
--text-primary: #ffffff;
18+
--text-secondary: #b3b3b3;
19+
--border-color: #2a2a2a;
20+
--hover-color: #2a2a2a;
21+
}
22+
23+
/* Base App Styling */
24+
.stApp {
25+
background: linear-gradient(180deg, var(--dark-bg) 0%, var(--darker-bg) 100%);
26+
color: var(--text-primary);
27+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
28+
}
29+
30+
/* Hide Streamlit Branding */
31+
#MainMenu { visibility: hidden; }
32+
footer { visibility: hidden; }
33+
header { visibility: hidden; }
34+
35+
/* Typography */
36+
h1 {
37+
background: linear-gradient(45deg, var(--primary-gold), var(--accent-gold));
38+
-webkit-background-clip: text;
39+
-webkit-text-fill-color: transparent;
40+
background-clip: text;
41+
font-weight: 700 !important;
42+
font-size: 2.5rem !important;
43+
}
44+
45+
h2, h3, h4, h5, h6 {
46+
color: var(--text-primary) !important;
47+
font-weight: 600 !important;
48+
}
49+
50+
/* Sidebar */
51+
.css-1d391kg {
52+
background: var(--surface-bg) !important;
53+
border-right: 1px solid var(--border-color);
54+
}
55+
56+
/* Buttons */
57+
.stButton > button {
58+
background: linear-gradient(45deg, var(--primary-gold), var(--accent-gold)) !important;
59+
color: var(--dark-bg) !important;
60+
border: none !important;
61+
border-radius: 25px !important;
62+
padding: 0.5rem 2rem !important;
63+
font-weight: 600 !important;
64+
transition: all 0.2s ease !important;
65+
}
66+
67+
.stButton > button:hover {
68+
transform: translateY(-2px) !important;
69+
box-shadow: 0 8px 25px rgba(255, 176, 0, 0.4) !important;
70+
filter: brightness(1.1) !important;
71+
}
72+
73+
/* Input Elements */
74+
.stSelectbox > div > div,
75+
.stTextInput > div > div > input,
76+
.stTextArea > div > div > textarea {
77+
background: var(--elevated-bg) !important;
78+
border: 1px solid var(--border-color) !important;
79+
border-radius: 8px !important;
80+
color: var(--text-primary) !important;
81+
}
82+
83+
.stSelectbox > div > div:hover,
84+
.stTextInput > div > div > input:focus,
85+
.stTextArea > div > div > textarea:focus {
86+
border-color: var(--primary-gold) !important;
87+
box-shadow: 0 0 0 1px var(--primary-gold) !important;
88+
}
89+
90+
/* File Uploader */
91+
.stFileUploader > div {
92+
background: var(--elevated-bg) !important;
93+
border: 2px dashed var(--border-color) !important;
94+
border-radius: 12px !important;
95+
transition: all 0.3s ease !important;
96+
}
97+
98+
.stFileUploader > div:hover {
99+
border-color: var(--primary-gold) !important;
100+
background: var(--hover-color) !important;
101+
}
102+
103+
/* Chat Messages */
104+
.stChatMessage {
105+
background: var(--surface-bg) !important;
106+
border: 1px solid var(--border-color) !important;
107+
border-radius: 12px !important;
108+
margin: 0.5rem 0 !important;
109+
padding: 1rem !important;
110+
}
111+
112+
.stChatMessage[data-testid="user-message"] {
113+
background: linear-gradient(135deg, var(--primary-gold), var(--accent-gold)) !important;
114+
color: var(--dark-bg) !important;
115+
margin-left: 2rem !important;
116+
}
117+
118+
.stChatMessage[data-testid="assistant-message"] {
119+
background: var(--elevated-bg) !important;
120+
margin-right: 2rem !important;
121+
}
122+
123+
/* Progress Elements */
124+
.stProgress > div > div > div,
125+
.stSlider > div > div > div > div {
126+
background: var(--primary-gold) !important;
127+
}
128+
129+
/* Expanders */
130+
.streamlit-expanderHeader {
131+
background: var(--elevated-bg) !important;
132+
border: 1px solid var(--border-color) !important;
133+
border-radius: 8px !important;
134+
color: var(--text-primary) !important;
135+
}
136+
137+
.streamlit-expanderContent {
138+
background: var(--surface-bg) !important;
139+
border: 1px solid var(--border-color) !important;
140+
border-top: none !important;
141+
}
142+
143+
/* Alert Messages */
144+
.stSuccess {
145+
background: rgba(255, 176, 0, 0.1) !important;
146+
border: 1px solid var(--primary-gold) !important;
147+
color: var(--accent-gold) !important;
148+
}
149+
150+
.stWarning {
151+
background: rgba(255, 193, 7, 0.1) !important;
152+
border: 1px solid #ffc107 !important;
153+
color: #ffc107 !important;
154+
}
155+
156+
.stError {
157+
background: rgba(220, 53, 69, 0.1) !important;
158+
border: 1px solid #dc3545 !important;
159+
color: #ff6b6b !important;
160+
}
161+
162+
.stInfo {
163+
background: rgba(13, 202, 240, 0.1) !important;
164+
border: 1px solid #0dcaf0 !important;
165+
color: #0dcaf0 !important;
166+
}
167+
168+
/* Custom Scrollbar */
169+
::-webkit-scrollbar {
170+
width: 8px;
171+
height: 8px;
172+
}
173+
174+
::-webkit-scrollbar-track {
175+
background: var(--surface-bg);
176+
border-radius: 4px;
177+
}
178+
179+
::-webkit-scrollbar-thumb {
180+
background: var(--border-color);
181+
border-radius: 4px;
182+
}
183+
184+
::-webkit-scrollbar-thumb:hover {
185+
background: var(--primary-gold);
186+
}
187+
188+
/* Links */
189+
a {
190+
color: var(--primary-gold) !important;
191+
text-decoration: none !important;
192+
}
193+
194+
a:hover {
195+
color: var(--accent-gold) !important;
196+
text-decoration: underline !important;
197+
}
198+
199+
/* Mobile Responsive */
200+
@media (max-width: 768px) {
201+
h1 { font-size: 2rem !important; }
202+
203+
.stChatMessage[data-testid="user-message"] {
204+
margin-left: 0.5rem !important;
205+
}
206+
207+
.stChatMessage[data-testid="assistant-message"] {
208+
margin-right: 0.5rem !important;
209+
}
210+
}

0 commit comments

Comments
 (0)