tailwindcss-dark-mode/index.js at master · ConstructiveCoding/tailwindcss-dark-mode · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
module.exports = function() {
  return function({addVariant, theme, e}) {
    const darkSelector = theme('darkSelector', '.mode-dark');
    addVariant('dark', ({modifySelectors, separator}) => {
      modifySelectors(({className}) => {
        return `${darkSelector} .${e(`dark${separator}${className}`)}`;
      });
    });

    addVariant('dark-hover', ({modifySelectors, separator}) => {
      modifySelectors(({className}) => {
        return `${darkSelector} .${e(`dark-hover${separator}${className}`)}:hover`;
      });
    });

    addVariant('dark-focus', ({modifySelectors, separator}) => {
      modifySelectors(({className}) => {
        return `${darkSelector} .${e(`dark-focus${separator}${className}`)}:focus`;
      });
    });

    addVariant('dark-active', ({modifySelectors, separator}) => {
      modifySelectors(({className}) => {
        return `${darkSelector} .${e(`dark-active${separator}${className}`)}:active`;
      });
    });

    addVariant('dark-group-hover', ({modifySelectors, separator}) => {
      modifySelectors(({className}) => {
        return `${darkSelector} .group:hover .${e(`dark-group-hover${separator}${className}`)}`;
      });
    });

    addVariant('dark-focus-within', ({modifySelectors, separator}) => {
      modifySelectors(({className}) => {
        return `${darkSelector} .${e(`dark-focus-within${separator}${className}`)}:focus-within`;
      });
    });

    addVariant('dark-odd', ({modifySelectors, separator}) => {
      modifySelectors(({className}) => {
        return `${darkSelector} .${e(`dark-odd${separator}${className}`)}:nth-child(odd)`;
      });
    });
  };
};