I would like to be able to change the color schemes for my clarity application. Is there a recommended way to doing this? I saw there were a few issues about this, but I didn't see anyone talk about an actual way to do it.
I'm currently implementing a dark theme to complement the light theme currently shipped with clarity.
As part of generating both light and dark themes for clarity, I'm building a way for Clarity consumers to create their own themes by overriding appropriate SCSS variables for the components and then building the clarity-ui css in their projects instead of consuming it as packaged on npm.
I'm expecting to have the first version of the feature released before Thanksgiving. You can follow along and stay up to date here
Related
I am currently using Stencil to create a library of web-components. Since it is standard nowadays to support a dark theme I want my web-components to have this build in.
After doing some research I found that :host-context would be a great way to make all components change theme by simply adding a class to the body, but it looks like this feature will never be fully supported.
All of the other ways I found to achieve this, using features such as ::part(), require a significant amount of work from the library's user which I want to avoid.
If anyone has an idea of how to achieve simple theme toggling for web-components please let me know!
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 10 months ago.
Improve this question
I wanted to develop a large-scale web application using Tailwind CSS.
Is Tailwind CSS suitable for large-scale web applications?
& Tailwind CSS worth investing time and money, or should I go with Vanilla CSS or another UI framework?
In my case, I have a design system and extensive database records, and I will need to use Animations, Drag & Drop ..etc. to build my SaaS product (Dashboard Builder).
I am looking forward to your guidance.
Just offering some counter points to these answers saying don't use Tailwind:
Setup properly (eg. using webpack/postCSS, not just pulling in a .css file from a CDN), you actually have a lot of control.
You can use a tailwind.config.js file to configure almost all aspects of the CSS - setup new colours, spacing, enable/disabled hover/focus effects etc. Once this file is setup correctly for your design system it is very easy to create a consistent application.
Tree shaking is built in by default - on running a production build your bundler will scan your code and strip out any classes which aren't used, resulting in the smallest possible file size.
It comes with a bunch of functions, mixins and helpers where you can create your own classes if need be - while keeping it consistent with default tailwind classes.
Another big one is that any future developers working on the project won't. have to learn your CSS system, they can read Tailwinds well-written documentation and know how to use it fairly quickly - if they don't already.
It's been tested by thousands of developers worldwide, so it covers a huge amount of edge-cases and browsers quirks you might miss if you're building your own system. A lot of developers think they can build a better system but that's not always the case.
This isn't to say it's right for your project - there's only really you who can weigh up whether having absolute control of your styles is worth losing the time saved using Tailwind - but a lot of the regularly thrown out negatives of Tailwind (file size/control/'need lots of classes') are not really issues if setup correctly.
I wouldn't recommend in your case. TailwindCSS should not be preferred if you have a design system at hand. Your code will get messy when you try to apply tailwind classes conditionally. You can work around this by using selector utility functions to decide which classes you'll use. I would prefer something like SCSS or a UI framework.
In my experience, Tailwind is useful for rapid development - for when the priority is speed rather than extreme customizability. There is also rather a learning curve to be proficient at creating good pages with tailwind (outside of copy-pasting existing components).
For a large-scale application in the space of a "dashboard builder", I'd think that there'll be lots of custom-designed components, so I personally wouldn't use Tailwind.
In my application,
I have implemented theming using an angular material theme but it is so heavy for my project...
that's why I don't want to depend on it.
After that I have implemented using the CSS Variables it is working fine
but it doesn't have full support you can check it over here.
QUESTION: anyone can suggest another way?
I would like advice on how best to move my company toward using VMWare's Clarity system, or something very much like it. Should we use it as a template? Fork it? Integrate parts of it over time?
By Q4 of 2018 we would like to:
have a decent Design System
develop in Angular 2
use Bootstrap 4
Currently we are here:
No Design System
Bootstrap 3.3.7
AngularJS
Any suggestions will be helpful!
The Clarity Design System is composed of several parts.
There are Design resources - sketch templates for the light and dark themed components as well as documentation and guidelines for using them. In addition, we publish three packages
#clr/icons - an icons library that can be used standalone. The icons are web-components and can be used like any other element in a project after you integrate it into the app
#clr/ui - standalone html/css for clarity themed components. For obvious reasons more advanced components like the datagrid or wizard are not part of this
#clr/angular - Clarity components for Angular applications.
To answer a few of your questions.
Q. Should we use it as a template?
A. No, Clarity (#clr/angular) should be integrated into your Angular application so you can use the components to build up the application with them.
Q. Fork it?
A. you are welcome to fork the code, its open source software (MIT License). If you want to stay up to date with the latest bug fixes and enhancements though I would suggest integrating it into a project and keeping up with the incremental releases. We generally try to release once a week and callout breaking changes at least two versions with deprecations.
Q. Integrate parts of it over time?
A. I (as a Clarity UI Engineer) would recommend adopting it fully from the beginning when you start your next Angular app. If not, you run the risk of competing design systems and conflicting styles and UX patterns.
We do not recommend using Clarity with Bootstrap 4. Even though our grid is based on an earlier beta version of Bootstrap 4. We would like to remove that as a dependency in the future.
Years ago when I first met Bootstrap, when it still called itself Twitter Bootstrap, I searched how to colorize it, changing the default white/blue color scheme.
I remember there was even an online tool I could upload a random picture and it would generate a separate CSS file with its most noticeable colors, which I also could edit here and there in case their algorithm didn't match my wishes.
Today, using Bootstrap 4, not only I didn't find such online tool anymore but I also surprisingly didn't find anything at all related to a way to change the color scheme of Bootstrap version 4 (let's emphasize that)
Is there anything like this nowadays that would help automate a little bit the process?
Note: Preferably without requiring knowledge of LESS/SASS/SCSS nor anything like that
I think since Bootstrap 4 is still in alpha, the customizer websites like bootswatchr are not using it yet.
So for now you can use the options to override the basic settings :
https://v4-alpha.getbootstrap.com/getting-started/options/