Merge pull request #4 from adierkens/color-scheme-override

Fix color scheme overrides

__tests__/modern.test.ts

@@ -88,11 +88,11 @@ it('Creates a simple css variable based theme with light and dark', () => {
         --color: teal
       }
 
-      .chair .light {
+      .chair.light {
         --color: beige
       }
 
-      .chair .dark {
+      .chair.dark {
         --color: darkpurple
       }
     `,

__tests__/precedence.test.ts

@@ -0,0 +1,100 @@
+import { run } from './test-utils';
+
+jest.mock('browserslist', () => () => ['chrome 76']);
+
+it('Overrides all themes from default', () => {
+  const config = {
+    default: {
+      light: {
+        color: 'red'
+      },
+      dark: {
+        color: 'blue'
+      }
+    },
+    mint: {
+      color: 'teal'
+    }
+  };
+
+  return run(
+    `
+      .test {
+        color: @theme color;
+      }
+    `,
+    `
+      .test {
+        color: var(--color);
+      }
+
+      :root {
+        --color: red;
+      }
+      
+      .dark {
+        --color: blue;
+      }
+
+      .mint {
+        --color: teal;
+      }
+    `,
+    {
+      config
+    }
+  );
+});
+
+it('Overrides dark themes from default', () => {
+  const config = {
+    default: {
+      light: {
+        color: 'red'
+      },
+      dark: {
+        color: 'blue'
+      }
+    },
+    mint: {
+      light: {
+        color: 'purple'
+      },
+      dark: {
+        color: 'teal'
+      }
+    }
+  };
+
+  return run(
+    `
+      .test {
+        color: @theme color;
+      }
+    `,
+    `
+      .test {
+        color: var(--color);
+      }
+
+      :root {
+        --color: red;
+      }
+      
+      .dark {
+        --color: blue;
+      }
+
+      .mint.light {
+        --color: purple;
+      }
+
+      .mint.dark {
+        --color: teal;
+      }
+    `,
+    {
+      config
+    }
+  );
+});

src/index.ts

@@ -379,12 +379,12 @@ const modernTheme = (
     ) {
       rules.push(
         createModernTheme(
-          isDefault ? rootClass : `${rootClass} .light`,
+          isDefault ? rootClass : `${rootClass}.light`,
           filterUsed('light'),
           localize
         ),
         createModernTheme(
-          isDefault ? '.dark' : `${rootClass} .dark`,
+          isDefault ? '.dark' : `${rootClass}.dark`,
           filterUsed('dark'),
           localize
         )