material-fox-updated/examples/theme-system-accent.css at main · edelvarden/material-fox-updated · 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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
/* use variables when about:config variable userChrome.system-accent-colors is true */
@media -moz-pref("userChrome.theme-system-accent") {
  /* use variables when dark mode */
  @media (prefers-color-scheme: dark) {
    :root,
    html,
    body {
      --md-accent-color: color-mix(in srgb, var(--md-white) 15%, AccentColor);
      --md-tab-background-color-hover: color-mix(
        in srgb,
        transparent 75%,
        var(--md-accent-color)
      );
      --md-tab-opacity: 0.9;
      --md-background-color-0: color-mix(
        in srgb,
        var(--md-grey-900) 85%,
        var(--md-accent-color)
      );
      --md-background-color-50: color-mix(
        in srgb,
        var(--md-grey-900-white-4-percent) 85%,
        var(--md-accent-color)
      );
      --md-background-color-100: color-mix(
        in srgb,
        var(--md-grey-900-white-5-percent) 85%,
        var(--md-accent-color)
      );
      --md-menu-background-color-hover: color-mix(
        in srgb,
        var(--md-grey-800) 85%,
        var(--md-accent-color)
      );
      --md-menu-border-color: color-mix(
        in srgb,
        var(--md-grey-800) 85%,
        var(--md-accent-color)
      );
      --md-text-on-accent: var(--md-white);
      --md-secondary-button-text: var(--md-white);
      --md-content-separator-color: color-mix(
        in srgb,
        #606164 90%,
        var(--md-accent-color)
      );
      --md-selection-text-color: var(--md-text-on-accent);
      --md-selection-background-color: var(--md-accent-color);
    }
  }

  /* use variables when light mode */
  @media (prefers-color-scheme: light) {
    :root,
    html,
    body {
      --md-accent-color: color-mix(
        in srgb,
        var(--md-grey-900) 15%,
        AccentColor
      );
      --md-tab-background-color-hover: color-mix(
        in srgb,
        transparent 75%,
        var(--md-accent-color)
      );
      --md-tab-opacity: 0.9;
      --md-background-color-0: color-mix(
        in srgb,
        #dee1e6 90%,
        var(--md-accent-color)
      );
      --md-background-color-50: color-mix(
        in srgb,
        var(--md-grey-100) 90%,
        var(--md-accent-color)
      );
      --md-background-color-100: color-mix(
        in srgb,
        var(--md-white) 90%,
        var(--md-accent-color)
      );
      --md-menu-background-color-hover: color-mix(
        in srgb,
        var(--md-background-color-0) 90%,
        var(--md-accent-color)
      );
      --md-menu-border-color: color-mix(
        in srgb,
        var(--md-background-color-0) 90%,
        var(--md-accent-color)
      );
      --md-content-separator-color: color-mix(
        in srgb,
        #dbdcdd 90%,
        var(--md-accent-color)
      );
      --md-secondary-button-text: var(--md-accent-color);
      --md-selection-text-color: var(--md-text-on-accent);
      --md-selection-background-color: var(--md-accent-color);
    }
  }
}