search

zen-browser / theme-store

🎨 Theme repository for @zen-browser!
https://zen-browser.github.io/theme-store/themes.json
MIT License
129 stars 38 forks source link

[create-theme]: Ayu Colorscheme #567

Closed arindamukawlas closed 1 month ago

arindamukawlas commented 1 month ago

Name

Ayu

Description

Ayu Colorscheme for Zen Browser

Homepage

https://github.com/arindamukawlas/ayu-zen-browser

Image

https://raw.githubusercontent.com/arindamukawlas/ayu-zen-browser/refs/heads/main/ayu-dark.png

Type

Theme Styles

:host(:is(.anonymous-content-host, notification-message)), :root, .zenLooksAndFeelColorOption {
    body:has(#theme-ayu[theme-ayu-accent-color="red"]) {
        --zen-primary-color: #ea6c73 !important;
    }
    body:has(#theme-ayu[theme-ayu-accent-color="green"]) {
        --zen-primary-color: #91b362 !important;
    }
    body:has(#theme-ayu[theme-ayu-accent-color="yellow"]) {
        --zen-primary-color: #f9af4f !important;
    }
    body:has(#theme-ayu[theme-ayu-accent-color="blue"]) {
        --zen-primary-color: #53bdfa !important;
    }
    body:has(#theme-ayu[theme-ayu-accent-color="purple"]) {
        --zen-primary-color: #fae994 !important;
    }
    body:has(#theme-ayu[theme-ayu-accent-color="cyan"]) {
        --zen-primary-color: #90e1c6 !important;
    }
    body:has(#theme-ayu[theme-ayu-accent-color="white"]) {
        --zen-primary-color: #c7c7c7 !important;
    }
    --zen-dark-color-mix-base: #0a0e14 !important;
    --zen-colors-primary-foreground: #b3b1ad !important;
    --zen-colors-border: #4b4b4b !important;
    --zen-colors-primary: color-mix(in srgb, var(--zen-primary-color) 20%, var(--zen-dark-color-mix-base) 80%) !important;
    --zen-colors-secondary: color-mix(in srgb, var(--zen-primary-color) 30%, var(--zen-dark-color-mix-base) 70%) !important;
    --zen-colors-tertiary: var(--zen-dark-color-mix-base) !important;
    --zen-main-browser-background: var(--zen-dark-color-mix-base) !important;
    --zen-in-content-dialog-background: var(--zen-dark-color-mix-base) !important;
    --zen-urlbar-background: var(--zen-dark-color-mix-base) !important;
    --in-content-page-background: var(--zen-dark-color-mix-base) !important;
    --in-content-box-background: var(--zen-dark-color-mix-base) !important;
    --in-content-table-background: var(--zen-dark-color-mix-base) !important;
    --card-background-color: #070b11 !important;
    --in-content-button-background: #1e161b !important;
    --zen-colors-hover-bg: color-mix(in srgb, var(--zen-primary-color) 70%, var(--zen-dark-color-mix-base) 30%) !important;
    --zen-colors-input-bg: var(--zen-dark-color-mix-base) !important;
    --zen-input-border-color: var(--zen-colors-border) !important;
    --toolbarbutton-active-background: var(--zen-colors-primary) !important;
    --zen-browser-gradient-base: var(--zen-colors-secondary) !important;
    --in-content-primary-button-text-color: var(--zen-dark-color-mix-base) !important;
    --toolbarbutton-icon-fill-attention: var(--in-content-primary-button-background) !important;
    --zen-settings-secondary-background: var(--zen-dark-color-mix-base) !important;
    --in-content-box-info-background: var(--zen-dark-color-mix-base) !important;
    --newtab-background-color: var(--zen-dark-color-mix-base) !important;
    --newtab-background-color-secondary: #070b11 !important;
    --newtab-text-primary-color: var(--zen-colors-primary-foreground) !important;
    .tabbrowser-tab[pinned] .tab-stack .tab-background {
        background: color-mix(in srgb, var(--zen-colors-secondary) 30%, transparent 70%) !important;
    }
    .tabbrowser-tab[pinned][selected="true"] .tab-stack .tab-background, .tabbrowser-tab[pinned][multiselected="true"] .tab-stack .tab-background {
        background-color: var(--zen-colors-primary) !important;
    }
}

/* Browser and Settings Pages */
@-moz-document url-prefix(about:), url-prefix(chrome:), url(https://www.mozilla.org/credits/){
    :root {
        body:has(#theme-ayu[theme-ayu-accent-color="red"]) {
            --zen-primary-color: #ea6c73 !important;
        }
        body:has(#theme-ayu[theme-ayu-accent-color="green"]) {
            --zen-primary-color: #91b362 !important;
        }
        body:has(#theme-ayu[theme-ayu-accent-color="yellow"]) {
            --zen-primary-color: #f9af4f !important;
        }
        body:has(#theme-ayu[theme-ayu-accent-color="blue"]) {
            --zen-primary-color: #53bdfa !important;
        }
        body:has(#theme-ayu[theme-ayu-accent-color="purple"]) {
            --zen-primary-color: #fae994 !important;
        }
        body:has(#theme-ayu[theme-ayu-accent-color="cyan"]) {
            --zen-primary-color: #90e1c6 !important;
        }
        body:has(#theme-ayu[theme-ayu-accent-color="white"]) {
            --zen-primary-color: #c7c7c7 !important;
        }
        --zen-dark-color-mix-base: #0a0e14 !important;
        --zen-colors-primary-foreground: #b3b1ad !important;
        --zen-colors-border: #4b4b4b !important;
        --zen-colors-primary: color-mix(in srgb, var(--zen-primary-color) 20%, var(--zen-dark-color-mix-base) 80%) !important;
        --zen-colors-secondary: color-mix(in srgb, var(--zen-primary-color) 30%, var(--zen-dark-color-mix-base) 70%) !important;
        --zen-colors-tertiary: var(--zen-dark-color-mix-base) !important;
        --zen-main-browser-background: var(--zen-dark-color-mix-base) !important;
        --zen-in-content-dialog-background: var(--zen-dark-color-mix-base) !important;
        --zen-urlbar-background: var(--zen-dark-color-mix-base) !important;
        --in-content-page-background: var(--zen-dark-color-mix-base) !important;
        --in-content-box-background: var(--zen-dark-color-mix-base) !important;
        --in-content-table-background: var(--zen-dark-color-mix-base) !important;
        --card-background-color: #070b11 !important;
        --zen-colors-hover-bg: color-mix(in srgb, var(--zen-primary-color) 70%, var(--zen-dark-color-mix-base) 30%) !important;
        --in-content-button-background: #1e161b !important;
        --zen-colors-input-bg: var(--zen-dark-color-mix-base) !important;
        --zen-input-border-color: var(--zen-colors-border) !important;
        --toolbarbutton-active-background: var(--zen-colors-primary) !important;
        --zen-browser-gradient-base: var(--zen-colors-secondary) !important;
        --in-content-primary-button-text-color: var(--zen-dark-color-mix-base) !important;
        --toolbarbutton-icon-fill-attention: var(--in-content-primary-button-background) !important;
        --zen-settings-secondary-background: var(--zen-dark-color-mix-base) !important;
        --in-content-box-info-background: var(--zen-dark-color-mix-base) !important;
        --newtab-background-color: var(--zen-dark-color-mix-base) !important;
        --newtab-background-color-secondary: #070b11 !important;
        --newtab-text-primary-color: var(--zen-colors-primary-foreground) !important;
    }
    html, body, #mount {
        background-color: var(--zen-dark-color-mix-base) !important;
    }
    :where(groupbox) button, .default-button {
        background-color: var(--in-content-button-background) !important;
    }
    .navigation, .moz-card, groupbox {
        background-color: #070b11 !important;
    }
}

Readme

# Ayu

Ayu Colorscheme for Zen Browser

Includes setting to use Ayu colors as accent colors.

~ *Supports only `Ayu Dark` currently. Will add `Ayu Mirage` and `Ayu Light` soon*

Preferences

{
    "property": "theme.ayu.accent-color",
    "label": "Ayu Accent Color",
    "type": "dropdown",
    "defaultValue": "red",
    "options": [
        {
            "label": "Red",
            "value": "red"
        },
        {
            "label": "Green",
            "value": "green"
        },
        {
            "label": "Yellow",
            "value": "yellow"
        },
        {
            "label": "Blue",
            "value": "blue"
        },
        {
            "label": "Purple",
            "value": "purple"
        },
        {
            "label": "Cyan",
            "value": "cyan"
        },
        {
            "label": "White",
            "value": "white"
        }
    ]
}
github-actions[bot] commented 1 month ago

Error creating theme

Sorry about that! There was an error creating the theme. Please try again or contact the maintainers for help.

Label for options is required.