Malojaのテーマ

私のコードスニペットのコレクション……あ、いや、maloja themes用のCSSテーマのことです。このCSSには2つのバージョンがあり、システムテーマに対応したものと、ダークモード専用があります。

ダークモードのみ

:root {
    --base-color: #303446;
    --base-color-dark: #303446;
    --base-color-light: #eff1f5;
    --base-color-accent: #ca9ee6;
    --base-color-accent-dark: #f4b8e4;
    --base-color-accent-light: #ea76cb;

    --text-color: #c6d0f5;
    --text-color-selected: fadeout(var(--text-color),40%);
    --text-color-secondary: #b5bfe2;
    --text-color-tertiary: #ca9ee6;
    --text-color-focus: #ca9ee6;

    --ctrl-element-color-bg: hsla(227, 17%, 58%, 0.10);
    --ctrl-element-color-main: rgba(202,158,230,0.7);
    --ctrl-element-color-focus: rgba(202, 158, 230, 0.88);

    --button-color-bg: var(--text-color);
    --button-color-bg-focus: var(--text-color-focus);
    --button-color-fg: var(--base-color);
    --button-color-fg-focus: var(--base-color);
}

光と闇

:root {
    --base-color: #eff1f5;
    --base-color-dark: #e6e9ef;
    --base-color-light: #ccd0da;
    
    --base-color-accent: #8839ef;
    --base-color-accent-dark: #ea76cb;
    --base-color-accent-light: #dd7878;

    --text-color: #4c4f69;
    --text-color-selected: rgba(76, 79, 105, 0.6); 
    --text-color-secondary: #5c5f77;
    --text-color-tertiary: #8839ef;
    --text-color-focus: #8839ef;

    --ctrl-element-color-bg: rgba(76, 79, 105, 0.10);
    --ctrl-element-color-main: rgba(136, 57, 239, 0.7);
    --ctrl-element-color-focus: rgba(136, 57, 239, 0.88);

    --button-color-bg: var(--text-color);
    --button-color-bg-focus: var(--text-color-focus);
    --button-color-fg: var(--base-color);
    --button-color-fg-focus: var(--base-color);
}

@media (prefers-color-scheme: dark) {
    :root {
        --base-color: #303446;
        --base-color-dark: #292c3c;
        --base-color-light: #414559;
        
        --base-color-accent: #ca9ee6;
        --base-color-accent-dark: #f4b8e4;
        --base-color-accent-light: #ea76cb;

        --text-color: #c6d0f5;
        --text-color-selected: rgba(198, 208, 245, 0.6);
        --text-color-secondary: #b5bfe2;
        --text-color-tertiary: #ca9ee6;
        --text-color-focus: #ca9ee6;

        --ctrl-element-color-bg: hsla(227, 17%, 58%, 0.10);
        --ctrl-element-color-main: rgba(202, 158, 230, 0.7);
        --ctrl-element-color-focus: rgba(202, 158, 230, 0.88);
        
        --button-color-bg: var(--text-color);
        --button-color-bg-focus: var(--text-color-focus);
        --button-color-fg: var(--base-color);
        --button-color-fg-focus: var(--base-color);
    }
}