how can i custom the theme color ?

[MROALI]

Hello, thankyou for your good work. I have two questions : 1- how can i customise primary color in the theme. for exemple use blue in place of purple ? 2- Where can i found the documentation about how to use the datepicker and the other addons lib for exemple select2, etc.. and the other components ..

[djibe]

Hi, to change theme color you need to install Node.JS and clone this repository (or download as zip file). Set your color in material.scss at the top of the file with example below (I used a light blue).

 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * Material UI by Maya, Geoff Bowers, Alex Skinner and djibe
 */

$primary: (
  color: #2196f3,
  dark:  #1976d2,
  light: #bbdefb
) !default;

@import 'colors';
@import 'functions';

Open a terminal located on the material folder. Type npm run css

Your customized theme is in folder css\material.css

For plugins like Select2, I will try to release the documentation soon but I work too much.

Datepicker doc is here : https://amsul.ca/pickadate.js/ Thanks for pointing this missing reference.

[MROALI]

Hi, Thankyou for your answer it works great.

I have three questions : 1 - My first question is about textfield-box, i am using a div with invalid-feedback div to show the message. The problem i have that, this div must be inside the textfield-box after the input or textarea, etc... And floating label with the textfield-box not working good the border is of textfield-box is including the invalid-feedback. so adding form-ripple-text is not correcting the problem because the invalid-feedback is shown only if there is an errorr. And can't put the invalid-feed-back outsite de textfield-box (native validation of bootstrap.., html5). .... .was-validated .form-control:invalid~.invalid-feedback, .was-validated .form-control:invalid~.invalid-tooltip { display: block; }

exemple : <div class="floating-label textfield-box"><label for="test">fieldname<span class="required"> *</span></label><input type="text" class="form-control" value="" name="test" id="test" required=""><div class="invalid-feedback">field is requried</div></div>

2- the second question is about .form-text why have u added padding-left: 1rem; the helper text is no more aligned to the formElement. and for the switch the helper text still not aligned even by removing the padding-left:1rem.

3- the pickadate integrated with your lib doesn't have the property editable: true, do you have any idea what to do? do i need to use another component ?

[djibe]

Hi, for answer two, I copied Google MD components for the web :

https://material-components.github.io/material-components-web-catalog/#/component/text-field

Form-text always have a padding-left

[djibe]

Answer to 3) You may try Flatpickr with my theme : https://jsfiddle.net/djibe89/xn153qdg/

[djibe]

For answer 1. I'll have to investigate. I am exhausted. I'm afraid it will wait until the end of summer.

[MROALI]

Hi, for answer two, I copied Google MD components for the web :

https://material-components.github.io/material-components-web-catalog/#/component/text-field

Form-text always have a padding-left

As i can see from the google md site, the helper text must be aligned to the label... so if really we want the same thing a padding must be done also to the label

[djibe]

True. MD Components for the web is so far from standard. Weird for a Google project (as Angular Material)

[MROALI]

Hi, Thankyou for your answer it works great.

I have three questions : 1 - My first question is about textfield-box, i am using a div with invalid-feedback div to show the message. The problem i have that, this div must be inside the textfield-box after the input or textarea, etc... And floating label with the textfield-box not working good the border is of textfield-box is including the invalid-feedback. so adding form-ripple-text is not correcting the problem because the invalid-feedback is shown only if there is an errorr. And can't put the invalid-feed-back outsite de textfield-box (native validation of bootstrap.., html5). .... .was-validated .form-control:invalid~.invalid-feedback, .was-validated .form-control:invalid~.invalid-tooltip { display: block; }

exemple : <div class="floating-label textfield-box"><label for="test">fieldname<span class="required"> *</span></label><input type="text" class="form-control" value="" name="test" id="test" required=""><div class="invalid-feedback">field is requried</div></div>

2- the second question is about .form-text why have u added padding-left: 1rem; the helper text is no more aligned to the formElement. and for the switch the helper text still not aligned even by removing the padding-left:1rem.

3- the pickadate integrated with your lib doesn't have the property editable: true, do you have any idea what to do? do i need to use another component ?

Any Progress about the floating label on an element which contains invalid-feeback.. and textfield-box ?

[MROALI]

Hello djibe, is there a way to disable dark theme when my browser is in dark mode ? I comment @media (prefers-color-scheme: dark) { in _dark_theme.scss in order to keep my normal theme.

[djibe]

Hi, well, no.

When you tell browser to set Dark mode when possible, it will ! You can use Microsoft Edge and force Light or Dark mode.

I'll wait for more feedbacks before tweaking this. However I could set a parameter to easily chose if we integrate this media-query.

Why you don't want it ? Should I improve it first ?

[MROALI]

Hi, well, no.

When you tell browser to set Dark mode when possible, it will ! You can use Microsoft Edge and force Light or Dark mode.

I'll wait for more feedbacks before tweaking this. However I could set a parameter to easily chose if we integrate this media-query.

Why you don't want it ? Should I improve it first ?

I think you should do something like adding data-theme="auto-dark" in order to activate automatic dark mode. So in the @media (prefers-color-scheme: dark) you mist prefix the classes with html[data-theme='auto-dark'] also.. In other hand i think from my experience that the invert is not a good solution for dark theme. you must manage it without using invert manually

[MathieuDR]

To piggy back on the Dark theme, it took me a few minutes why my site suddenly looked very odd.

I do agree that perhaps a data-class like @MROALI said or a variable to turn it on/off, customisation is key on such a big impact query.

(It can be default on if there is an option to turn it off).

[djibe]

Hi, I'll remove the media query for now. data-theme is already present in the doc: https://djibe.github.io/material/docs/4.5/material/dark-theme/

[MROALI]

Hi, I'll remove the media query for now. data-theme is already present in the doc: https://djibe.github.io/material/docs/4.5/material/dark-theme/

I think you can keep media query but add to all style inside it by something like html[data-theme='auto-dark'] which will turn on automatically the dark mode depending of the style of the navigator. Othersaying : data-theme="dark" => force always dark mode, data-theme="auto-dark" => will turn on and off dark mode depending of the browser theme..

And about the dark mode theme i think you must customise the colors for all html elements, and not using only invert.

Merci pour ton beau travail :)

[djibe]

Hi,

Fixed in RC2 + new sliders.