Replies: 3 comments 9 replies
-
|
I don't know where I suggested this before, but I have pitched the idea that someone can create "theme packs" for NiceGUI by leveraging the fact that elements can take default props, classes, and styles. https://nicegui.io/documentation/element#default_props Well I think you may find great success by asking your AI agent to toss you some. If they look good consider sharing (may be possible to put into the library officially / release an extension package) |
Beta Was this translation helpful? Give feedback.
-
|
Great feedback. This is exactly what I needed! |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for sharing your experience, @ehfd! The default look and feel of NiceGUI apps concerns me as well. If Quasar doesn't come up with something new (and it doesn't look like it does), we have to get creative. Make sure to read #5198 where I proposed to collect code snippets to transform your theme globally. In my experience it already helps to adjust some default props to remove shadow, maybe use sharp corners, use |
Beta Was this translation helpful? Give feedback.
-
|
I guess #5198 is conceptual? I'll leave some thoughts there after some experimentation. Thanks for the answer! |
Beta Was this translation helpful? Give feedback.
-
|
Question: How do I override the default primary, secondary,... |
Beta Was this translation helpful? Give feedback.
-
|
ui.colors: yes, check https://nicegui.io/documentation/colors default_classes: yes, check https://nicegui.io/documentation/element#default_classes default_props: doesn't work right now, check #4857 |
Beta Was this translation helpful? Give feedback.
-
|
Yes, but app.config.quasar_config['brand']['primary'] = 'red'
ui.button('Button')
|
Beta Was this translation helpful? Give feedback.
-
|
Hmm interesting. Can we have |
Beta Was this translation helpful? Give feedback.
-
|
Good news, I have a good working solution that is very modern and aesthetically performing well: Prompt (Gemini 3 Pro): Code: @app.on_startup
async def startup():
# Set global color scheme
app.config.quasar_config['brand']['primary'] = '#003377'
app.config.quasar_config['brand']['secondary'] = '#B38C45'
app.config.quasar_config['brand']['tertiary'] = '#939598'
app.config.quasar_config['brand']['accent'] = '#B38C45'
app.config.quasar_config['brand']['positive'] = '#21BA45'
app.config.quasar_config['brand']['negative'] = '#C10015'
app.config.quasar_config['brand']['info'] = '#31CCEC'
app.config.quasar_config['brand']['warning'] = '#F2C037'
# Set defaults for modern look
# Inputs
ui.input.default_props('outlined dense color="primary" bg-color="white"')
ui.input.default_classes('w-full rounded-md shadow-sm transition-all duration-300 hover:shadow-md')
ui.input.default_style('font-size: 1rem;')
ui.textarea.default_props('outlined dense color="primary" bg-color="white"')
ui.textarea.default_classes('w-full rounded-md shadow-sm transition-all duration-300 hover:shadow-md')
ui.textarea.default_style('font-size: 1rem;')
ui.number.default_props('outlined dense color="primary" bg-color="white"')
ui.number.default_classes('w-full rounded-md shadow-sm transition-all duration-300 hover:shadow-md')
ui.number.default_style('font-size: 1rem;')
ui.select.default_props('outlined dense color="primary" bg-color="white" behavior="menu"')
ui.select.default_classes('w-full rounded-md shadow-sm transition-all duration-300 hover:shadow-md')
ui.select.default_style('font-size: 1rem;')
# Cards
ui.card.default_props('flat bordered')
ui.card.default_classes('rounded-lg shadow-lg border-gray-200 bg-white/90 backdrop-blur-sm')
ui.card.default_style('border: 1px solid #e5e7eb;')
# Buttons
ui.button.default_props('unelevated no-caps')
ui.button.default_classes('rounded-md font-bold tracking-wide transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5')
ui.button.default_style('letter-spacing: 0.5px;')
# Other elements
ui.checkbox.default_props('color="primary"')
ui.radio.default_props('color="primary"')
ui.switch.default_props('color="primary"')
ui.expansion.default_props('header-class="bg-gray-50 rounded-t-md" expand-icon-class="text-primary"')
ui.expansion.default_classes('rounded-md border border-gray-200 shadow-sm overflow-hidden mb-2')def shared_header(no_login: bool = False):
ui.add_head_html('''
<style>
:root {
--q-primary: #003377;
--q-secondary: #B38C45;
--q-tertiary: #939598;
}
body {
background-color: #F3F4F6;
color: #1F2937;
}
.nicegui-content {
max-width: 1400px;
margin: 0 auto;
padding: 1rem;
}
.q-card {
border-radius: 8px !important;
}
.q-btn {
text-transform: none !important;
font-weight: 700;
border-radius: 6px !important;
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #B38C45;
border-radius: 6px;
border: 3px solid #f1f1f1;
}
::-webkit-scrollbar-thumb:hover {
background: #d4a755;
}
</style>
''') |
Beta Was this translation helpful? Give feedback.
-
|
Before: 
After: 
|
Beta Was this translation helpful? Give feedback.
-
|
I'm sure that there can be more improvements, but things look great with additional classes in each button. |
Beta Was this translation helpful? Give feedback.
-
Mark |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Appreciating how great NiceGUI is, especially combined with AI coding. Because NiceGUI follows Pythonic practices more than other frameworks, it is exceptionally friendly for AI programming, and I was able to create a completely AI-created multi-page full-stack application that connects non-trivial Kubernetes/cloud workflow management mechanisms to a web interface in a matter of days, around only 1600 lines of Python, without prior formal web development. I only edit the generated code and do not write new code from scratch, and this is a revolution for someone who solely knows Python and not the web languages, combining AI.
However, the default UI is not the most attractive, and I do understand that it is the default UI for Quasar.
But since other frameworks are available and provide very attractive and modern UIs by default, I decided to try having AI agents port my NiceGUI app to Reflex.
The result: barely managed to build the interface (let alone the intrinsics), despite using Claude Sonnet 4.5 and Gemini 3 Pro with MCP to search documentation (I used Gemini 2.5 Pro for the initial NiceGUI setup and continued on GLM-4.6, without MCP in both cases, which are respectively substantially weaker AI coding models).
To start, I had to feed AI some code from a third-party repository that supports Google OIDC login in Reflux and have it implement OIDC from scratch.
Since Reflex's AI models that they have created are effectively behind a paywall, and many other features are also behind a paywall, features such as OIDC need to be manually implemented and do not feel native (NiceGUI was an immediate breeze to make this work with Starlette).
Because Reflex's syntax has some distance from being idiomatic Python and possesses specific state management patterns, it took a long time for agents to fix the issues, and it also had a lot of bloat regarding downloading and building React components.
It was immediately uncomfortable to maintain on my side, and requires at least 70-80% more code compared to NiceGUI just to get started (where the code doesn't actually work yet), especially due to state management.
Long story short, NiceGUI has helped me save months of effort and helps match unrealistic deadlines.
But are there any ways to immediately get a UI comparable to what I would obtain from Reflex without much customization? Any experiences by users or any start-up templates regarding this would be really useful, and Tailwind could achieve this.
Thanks for this project!
Beta Was this translation helpful? Give feedback.
All reactions