Android Material default colors

» android » Android Material default colors

By : user2957696

Date : November 24 2020, 01:01 AM

With these it helps Finally, I found the solution: #fafafa
It's the Background colour that Google used on the website hakkikonu posted.

code :

Share :

Android appcompat-v7:21.0.0 change material checkbox colors

By : user2710935

Date : March 29 2020, 07:55 AM

To fix the issue you can do I had a similar problem with unchecked CheckBoxes and RadioButtons. I found the solution, when I figured out that controls takes their "Off" color from
@color/secondary_text

code :

<style name="SampleTheme" parent="Theme.AppCompat">
    <item name="colorAccent">@color/green</item>
    <item name="android:textColorSecondary">@color/red</item>
</style>

Material Design colors in Android Lollipop

By : I have some Question

Date : March 29 2020, 07:55 AM

will be helpful for those in need Those numbers are the shade values. They are used to identify a color. It can be compared to other color systems, like Pantone. Whenever you specify colors, use the shade values, not the HEX values. Additionally, some colors have accents. Those are identified by an A letter.
For instance: A style guide may list as primary color Red 500. The team knows where to look up and will use #F44336 in their style sheets.

Using the colors for the new Material design theme in Android

By : Waseem Khan

Date : March 29 2020, 07:55 AM

Hope this helps I was unable to find an XML file containing all of the colors for the new Material theme in Android, so I ended up making one. I figured others might find it useful...

code :

<?xml version="1.0" encoding="utf-8"?>
<resources>

<!-- Material Design - Color Palette -->
<!-- Date: 1/15/2015 -->
<!-- http://www.google.com/design/spec/style/color.html#color-color-palette -->

    <!-- Red -->
    <color name="red_50">#FFEBEE</color>
    <color name="red_100">#FFCDD2</color>
    <color name="red_200">#EF9A9A</color>
    <color name="red_300">#E57373</color>
    <color name="red_400">#EF5350</color>
    <color name="red_500">#F44336</color>
    <color name="red_600">#E53935</color>
    <color name="red_700">#D32F2F</color>
    <color name="red_800">#C62828</color>
    <color name="red_900">#B71C1C</color>
    <color name="red_A100">#FF8A80</color>
    <color name="red_A200">#FF5252</color>
    <color name="red_A400">#FF1744</color>
    <color name="red_A700">#D50000</color>
    <!-- Red -->

    <!-- Pink -->
    <color name="pink_50">#FCE4EC</color>
    <color name="pink_100">#F8BBD0</color>
    <color name="pink_200">#F48FB1</color>
    <color name="pink_300">#F06292</color>
    <color name="pink_400">#EC407A</color>
    <color name="pink_500">#E91E63</color>
    <color name="pink_600">#D81B60</color>
    <color name="pink_700">#C2185B</color>
    <color name="pink_800">#AD1457</color>
    <color name="pink_900">#880E4F</color>
    <color name="pink_A100">#FF80AB</color>
    <color name="pink_A200">#FF4081</color>
    <color name="pink_A400">#F50057</color>
    <color name="pink_A700">#C51162</color>
    <!-- Pink -->

    <!-- Purple -->
    <color name="purple_50">#F3E5F5</color>
    <color name="purple_100">#E1BEE7</color>
    <color name="purple_200">#CE93D8</color>
    <color name="purple_300">#BA68C8</color>
    <color name="purple_400">#AB47BC</color>
    <color name="purple_500">#9C27B0</color>
    <color name="purple_600">#8E24AA</color>
    <color name="purple_700">#7B1FA2</color>
    <color name="purple_800">#6A1B9A</color>
    <color name="purple_900">#4A148C</color>
    <color name="purple_A100">#EA80FC</color>
    <color name="purple_A200">#E040FB</color>
    <color name="purple_A400">#D500F9</color>
    <color name="purple_A700">#AA00FF</color>
    <!-- Purple -->

    <!-- Deep Purple -->
    <color name="dark_purple_50">#EDE7F6</color>
    <color name="dark_purple_100">#D1C4E9</color>
    <color name="dark_purple_200">#B39DDB</color>
    <color name="dark_purple_300">#9575CD</color>
    <color name="dark_purple_400">#7E57C2</color>
    <color name="dark_purple_500">#673AB7</color>
    <color name="dark_purple_600">#5E35B1</color>
    <color name="dark_purple_700">#512DA8</color>
    <color name="dark_purple_800">#4527A0</color>
    <color name="dark_purple_900">#311B92</color>
    <color name="dark_purple_A100">#B388FF</color>
    <color name="dark_purple_A200">#7C4DFF</color>
    <color name="dark_purple_A400">#651FFF</color>
    <color name="dark_purple_A700">#6200EA</color>
    <!-- Deep Purple -->

    <!-- Indigo -->
    <color name="indigo_50">#E8EAF6</color>
    <color name="indigo_100">#C5CAE9</color>
    <color name="indigo_200">#9FA8DA</color>
    <color name="indigo_300">#7986CB</color>
    <color name="indigo_400">#5C6BC0</color>
    <color name="indigo_500">#3F51B5</color>
    <color name="indigo_600">#3949AB</color>
    <color name="indigo_700">#303F9F</color>
    <color name="indigo_800">#283593</color>
    <color name="indigo_900">#1A237E</color>
    <color name="indigo_A100">#8C9EFF</color>
    <color name="indigo_A200">#536DFE</color>
    <color name="indigo_A400">#3D5AFE</color>
    <color name="indigo_A700">#304FFE</color>
    <!-- Indigo -->

    <!-- Blue -->
    <color name="blue_50">#E3F2FD</color>
    <color name="blue_100">#BBDEFB</color>
    <color name="blue_200">#90CAF9</color>
    <color name="blue_300">#64B5F6</color>
    <color name="blue_400">#42A5F5</color>
    <color name="blue_500">#2196F3</color>
    <color name="blue_600">#1E88E5</color>
    <color name="blue_700">#1976D2</color>
    <color name="blue_800">#1565C0</color>
    <color name="blue_900">#0D47A1</color>
    <color name="blue_A100">#82B1FF</color>
    <color name="blue_A200">#448AFF</color>
    <color name="blue_A400">#2979FF</color>
    <color name="blue_A700">#2962FF</color>
    <!-- Blue -->

    <!-- Light Blue -->
    <color name="light_blue_50">#E1F5FE</color>
    <color name="light_blue_100">#B3E5FC</color>
    <color name="light_blue_200">#81D4FA</color>
    <color name="light_blue_300">#4FC3F7</color>
    <color name="light_blue_400">#29B6F6</color>
    <color name="light_blue_500">#03A9F4</color>
    <color name="light_blue_600">#039BE5</color>
    <color name="light_blue_700">#0288D1</color>
    <color name="light_blue_800">#0277BD</color>
    <color name="light_blue_900">#01579B</color>
    <color name="light_blue_A100">#80D8FF</color>
    <color name="light_blue_A200">#40C4FF</color>
    <color name="light_blue_A400">#00B0FF</color>
    <color name="light_blue_A700">#0091EA</color>
    <!-- Light Blue -->

    <!-- Cyan -->
    <color name="cyan_50">#E0F7FA</color>
    <color name="cyan_100">#B2EBF2</color>
    <color name="cyan_200">#80DEEA</color>
    <color name="cyan_300">#4DD0E1</color>
    <color name="cyan_400">#26C6DA</color>
    <color name="cyan_500">#00BCD4</color>
    <color name="cyan_600">#00ACC1</color>
    <color name="cyan_700">#0097A7</color>
    <color name="cyan_800">#00838F</color>
    <color name="cyan_900">#006064</color>
    <color name="cyan_A100">#84FFFF</color>
    <color name="cyan_A200">#18FFFF</color>
    <color name="cyan_A400">#00E5FF</color>
    <color name="cyan_A700">#00B8D4</color>
    <!-- Cyan -->

    <!-- Teal -->
    <color name="teal_50">#E0F2F1</color>
    <color name="teal_100">#B2DFDB</color>
    <color name="teal_200">#80CBC4</color>
    <color name="teal_300">#4DB6AC</color>
    <color name="teal_400">#26A69A</color>
    <color name="teal_500">#009688</color>
    <color name="teal_600">#00897B</color>
    <color name="teal_700">#00796B</color>
    <color name="teal_800">#00695C</color>
    <color name="teal_900">#004D40</color>
    <color name="teal_A100">#A7FFEB</color>
    <color name="teal_A200">#64FFDA</color>
    <color name="teal_A400">#1DE9B6</color>
    <color name="teal_A700">#00BFA5</color>
    <!-- Teal -->

    <!-- Green -->
    <color name="green_50">#E8F5E9</color>
    <color name="green_100">#C8E6C9</color>
    <color name="green_200">#A5D6A7</color>
    <color name="green_300">#81C784</color>
    <color name="green_400">#66BB6A</color>
    <color name="green_500">#4CAF50</color>
    <color name="green_600">#43A047</color>
    <color name="green_700">#388E3C</color>
    <color name="green_800">#2E7D32</color>
    <color name="green_900">#1B5E20</color>
    <color name="green_A100">#B9F6CA</color>
    <color name="green_A200">#69F0AE</color>
    <color name="green_A400">#00E676</color>
    <color name="green_A700">#00C853</color>
    <!-- Green -->

    <!-- Light Green -->
    <color name="light_green_50">#F1F8E9</color>
    <color name="light_green_100">#DCEDC8</color>
    <color name="light_green_200">#C5E1A5</color>
    <color name="light_green_300">#AED581</color>
    <color name="light_green_400">#9CCC65</color>
    <color name="light_green_500">#8BC34A</color>
    <color name="light_green_600">#7CB342</color>
    <color name="light_green_700">#689F38</color>
    <color name="light_green_800">#558B2F</color>
    <color name="light_green_900">#33691E</color>
    <color name="light_green_A100">#CCFF90</color>
    <color name="light_green_A200">#B2FF59</color>
    <color name="light_green_A400">#76FF03</color>
    <color name="light_green_A700">#64DD17</color>
    <!-- Light Green -->

    <!-- Lime -->
    <color name="lime_50">#F9FBE7</color>
    <color name="lime_100">#F0F4C3</color>
    <color name="lime_200">#E6EE9C</color>
    <color name="lime_300">#DCE775</color>
    <color name="lime_400">#D4E157</color>
    <color name="lime_500">#CDDC39</color>
    <color name="lime_600">#C0CA33</color>
    <color name="lime_700">#AFB42B</color>
    <color name="lime_800">#9E9D24</color>
    <color name="lime_900">#827717</color>
    <color name="lime_A100">#F4FF81</color>
    <color name="lime_A200">#EEFF41</color>
    <color name="lime_A400">#C6FF00</color>
    <color name="lime_A700">#AEEA00</color>
    <!-- Lime -->

    <!-- Yellow -->
    <color name="yellow_50">#FFFDE7</color>
    <color name="yellow_100">#FFF9C4</color>
    <color name="yellow_200">#FFF59D</color>
    <color name="yellow_300">#FFF176</color>
    <color name="yellow_400">#FFEE58</color>
    <color name="yellow_500">#FFEB3B</color>
    <color name="yellow_600">#FDD835</color>
    <color name="yellow_700">#FBC02D</color>
    <color name="yellow_800">#F9A825</color>
    <color name="yellow_900">#F57F17</color>
    <color name="yellow_A100">#FFFF8D</color>
    <color name="yellow_A200">#FFFF00</color>
    <color name="yellow_A400">#FFEA00</color>
    <color name="yellow_A700">#FFD600</color>
    <!-- Yellow -->

    <!-- Amber -->
    <color name="amber_50">#FFF8E1</color>
    <color name="amber_100">#FFECB3</color>
    <color name="amber_200">#FFE082</color>
    <color name="amber_300">#FFD54F</color>
    <color name="amber_400">#FFCA28</color>
    <color name="amber_500">#FFC107</color>
    <color name="amber_600">#FFB300</color>
    <color name="amber_700">#FFA000</color>
    <color name="amber_800">#FF8F00</color>
    <color name="amber_900">#FF6F00</color>
    <color name="amber_A100">#FFE57F</color>
    <color name="amber_A200">#FFD740</color>
    <color name="amber_A400">#FFC400</color>
    <color name="amber_A700">#FFAB00</color>
    <!-- Amber -->

    <!-- Orange -->
    <color name="orange_50">#FFF3E0</color>
    <color name="orange_100">#FFE0B2</color>
    <color name="orange_200">#FFCC80</color>
    <color name="orange_300">#FFB74D</color>
    <color name="orange_400">#FFA726</color>
    <color name="orange_500">#FF9800</color>
    <color name="orange_600">#FB8C00</color>
    <color name="orange_700">#F57C00</color>
    <color name="orange_800">#EF6C00</color>
    <color name="orange_900">#E65100</color>
    <color name="orange_A100">#FFD180</color>
    <color name="orange_A200">#FFAB40</color>
    <color name="orange_A400">#FF9100</color>
    <color name="orange_A700">#FF6D00</color>
    <!-- Orange -->

    <!-- Deep Orange -->
    <color name="deep_orange_50">#FBE9E7</color>
    <color name="deep_orange_100">#FFCCBC</color>
    <color name="deep_orange_200">#FFAB91</color>
    <color name="deep_orange_300">#FF8A65</color>
    <color name="deep_orange_400">#FF7043</color>
    <color name="deep_orange_500">#FF5722</color>
    <color name="deep_orange_600">#F4511E</color>
    <color name="deep_orange_700">#E64A19</color>
    <color name="deep_orange_800">#D84315</color>
    <color name="deep_orange_900">#BF360C</color>
    <color name="deep_orange_A100">#FF9E80</color>
    <color name="deep_orange_A200">#FF6E40</color>
    <color name="deep_orange_A400">#FF3D00</color>
    <color name="deep_orange_A700">#DD2C00</color>
    <!-- Deep Orange -->

    <!-- Brown -->
    <color name="brown_50">#EFEBE9</color>
    <color name="brown_100">#D7CCC8</color>
    <color name="brown_200">#BCAAA4</color>
    <color name="brown_300">#A1887F</color>
    <color name="brown_400">#8D6E63</color>
    <color name="brown_500">#795548</color>
    <color name="brown_600">#6D4C41</color>
    <color name="brown_700">#5D4037</color>
    <color name="brown_800">#4E342E</color>
    <color name="brown_900">#3E2723</color>
    <!-- Brown -->

    <!-- Grey -->
    <color name="grey_50">#FAFAFA</color>
    <color name="grey_100">#F5F5F5</color>
    <color name="grey_200">#EEEEEE</color>
    <color name="grey_300">#E0E0E0</color>
    <color name="grey_400">#BDBDBD</color>
    <color name="grey_500">#9E9E9E</color>
    <color name="grey_600">#757575</color>
    <color name="grey_700">#616161</color>
    <color name="grey_800">#424242</color>
    <color name="grey_900">#212121</color>
    <!-- Grey -->

    <!-- Blue Grey -->
    <color name="blue_grey_50">#ECEFF1</color>
    <color name="blue_grey_100">#CFD8DC</color>
    <color name="blue_grey_200">#B0BEC5</color>
    <color name="blue_grey_300">#90A4AE</color>
    <color name="blue_grey_400">#78909C</color>
    <color name="blue_grey_500">#607D8B</color>
    <color name="blue_grey_600">#546E7A</color>
    <color name="blue_grey_700">#455A64</color>
    <color name="blue_grey_800">#37474F</color>
    <color name="blue_grey_900">#263238</color>
    <!-- Blue Grey -->

    <!-- Black -->
    <color name="black">#000000</color>
    <!-- Black -->

    <!-- White -->
    <color name="white">#FFFFFF</color>
    <!-- White -->

</resources>

How to adjust colors in angular material default themes

By : Juan Mafla

Date : March 29 2020, 07:55 AM

Any of those help OK, for anyone else looking for this, I found the answer in angular-material.modules.closure.button and angular-material.modules.js.button

code :

.md-button.md-THEME_NAME-theme.md-primary.md-fab:not([disabled]):hover {
  background-color: '{{primary-600}}'; }
.md-button.md-THEME_NAME-theme.md-primary.md-raised:not([disabled]).md-focused, .md-button.md-THEME_NAME-theme.md-primary.md-fab:not([disabled]).md-focused {
  background-color: '{{primary-600}}'; }

How to change default colors in material ui

By : user3725318

Date : March 29 2020, 07:55 AM

around this issue You can simply use the ThemeProvider from the @material-ui/core instead of MuiThemeProvider from @material-ui/styles

code :

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { createMuiTheme, ThemeProvider } from "@material-ui/core";

const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#ff8f00"
    },
    secondary: {
      main: "#ffcc80"
    }
  }
});

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>,
  document.getElementById("root")
);