assets/scss/_fuji-theme/_base.scss


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

@mixin light {
    --color-mode: 'light';
    --color-primary: #8aa2d3; // https://irocore.com/aofuji/
    --color-secondary: #8f82bc; // https://irocore.com/fujimurasaki/
    --color-focus: #3b469b; // https://irocore.com/aomurasaki/
    --color-mute: #9ea1a3; // https://irocore.com/suzu-iro/
    --color-font: #3f4551; // https://irocore.com/konnezu/
    --color-divider: #e5e2e4; // https://irocore.com/komachinezu/
    --color-bg: #fffffd; // https://irocore.com/shiro/
    --color-codebg: #f6f8fa; // GitHub
}

@mixin dark {
    --color-mode: 'dark';
    --color-primary: #8aa2d3; // https://irocore.com/aofuji/
    --color-secondary: #bab1df; // kai https://irocore.com/fujimurasaki/
    --color-focus: #e6e6e6; // https://irocore.com/shironezumi/
    --color-mute: #9ea1a3; // https://irocore.com/suzu-iro/
    --color-font: #c0c0c0; // https://irocore.com/gin-iro/
    --color-divider: #4d5158; // Discord
    --color-bg: #2f3136; // Discord
    --color-codebg: #414449; // kai GitHub
}

body[data-theme='auto'] {
    @include light();

    @media (prefers-color-scheme: dark) {
        @include dark();
        @import '_dark-diff'; // things different from light
    }
}

body[data-theme='light'] {
    @include light();
}

body[data-theme='dark'] {
    @include dark();
    @import '_dark-diff'; // things different from light
}

@mixin link-1 {
    a {
        color: var(--color-primary);
    }

    a:hover {
        color: var(--color-secondary);
    }
}

@mixin link-2 {
    a {
        color: var(--color-secondary);
    }

    a:hover {
        color: var(--color-focus);
    }
}

$divider: 2px solid var(--color-divider);