diff --git a/src/core/services/theming/theming.js b/src/core/services/theming/theming.js index 0e8dd114d11..d1091897649 100644 --- a/src/core/services/theming/theming.js +++ b/src/core/services/theming/theming.js @@ -430,6 +430,12 @@ function parseRules(theme, colorType, rules) { if (hueName !== 'default') { newRule = newRule.replace(themeNameRegex, '.md-' + theme.name + '-theme.md-' + hueName); } + + // Don't apply a selector rule to the default theme, making it easier to override + // styles of the base-component + if (theme.name == 'default') { + newRule = newRule.replace(/\.md-default-theme/g, ''); + } generatedRules.push(newRule); }); diff --git a/src/core/services/theming/theming.spec.js b/src/core/services/theming/theming.spec.js index 443375098ed..6aa20b1ff07 100644 --- a/src/core/services/theming/theming.spec.js +++ b/src/core/services/theming/theming.spec.js @@ -189,11 +189,19 @@ describe('$mdThemingProvider', function() { themingProvider._parseRules(testTheme, 'primary', '').join(''); }).toThrow(); }); + + it('drops the default theme name from the selectors', function() { + expect(themingProvider._parseRules( + defaultTheme, 'primary', '.md-THEME_NAME-theme.md-button { }' + ).join('')).toContain('.md-button { }'); + }); + it('replaces THEME_NAME', function() { expect(themingProvider._parseRules( testTheme, 'primary', '.md-THEME_NAME-theme {}' ).join('')).toContain('.md-test-theme {}'); }); + describe('parses foreground text and shadow', function() { it('for a light theme', function() { testTheme.dark(false);