~cadence/Frames

ref: 0c81e5a6e81f9b2ddef51a481f167c56346d273a Frames/sass/includes/themes.scss -rw-r--r-- 851 bytes
0c81e5a6Cadence Ember Use light/dark theme from prefer-color-scheme 1 year, 11 months ago
                                                                                
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
@use "sass:list";

$_theme: (
    // Background
    "background": #130e0e #f2f0f0,
    "background-highlight": #333 #d0cdcd,
    "background-field": #222 #e8e6e6,

    // Text
    "text": #eee #000,
    "text-field": #ddd #000,
    "text-dim": #ccc #1b1b1b,
    "text-hint": #aaa #404040,
    "text-link": #ee4a4a #b90a0a,
    "text-highlight": #b2dbb6 #6f1e9d,
    "text-warning": #fc6 #d80,

    // Edges
    "edge-field": #888 #222,
    "edge-fieldset": #bbb #181818,
    "edge-publish": #bbb #222,
    "edge-post": #888 #3a3a3a,
    "edge-post-quote": #ddd #222
);

$_primary-theme: 1;
$_secondary-theme: 2;

@mixin theme($property, $key) {
    #{$property}: list.nth(map-get($_theme, $key), $_primary-theme);
    @media screen and (prefers-color-scheme: light) {
        #{$property}: list.nth(map-get($_theme, $key), $_secondary-theme);
    }
}