Bu konuyu biraz google'da aradım ve makul bir çözüm bulamadım, bu yüzden kısa bir makaleye değer olabileceğini düşündüm.

İçerik

1. Sorun
2. :root içindeki CSS değişkenleri nasıl değiştirilir?
3. Kapsamlı CSS değişkenleri nasıl değiştirilir?
4. Kapsamlı CSS'yi değiştirmek, bir Web Çalışanından farklıdır
5. kısayol oluşturma
6. neo.mjs projesi
7. Konu dışı ama inanılmaz: ChatGPT neo hakkında ne düşünüyor?

Birden çok temayla çalışıyorsanız, CSS değişkenlerinizi doğrudan:root .

Bunun yerine, gibi bir yapı kullanabilirsiniz.
:root .theme-light {/*my variables*/}

Bu CSS değişkenlerinin değerlerini çalışma zamanında JavaScript kullanarak değiştirmek istemeniz durumunda, bu biraz zor olabilir.

2. :root içindeki CSS değişkenleri nasıl değiştirilir?

:root {
    --my-color: red;
}
document.documentElement.setProperty('--my-color', 'blue');

3. Kapsamlı CSS değişkenleri nasıl değiştirilir?

:root .theme-light {
    --my-color: red;
}

:root .theme-dark {
    --my-color: darkred;
}

Örneğin, viewport'a theme-light uygulayabilir, theme-dark ile bir alt konteyner kullanabilir ve bunun içinde yine theme-light ile bir düğme kullanabiliriz.

Bu kullanım durumu için de CSS değişkenlerini değiştirmenin zarif bir yolunu umuyordum. Bulamadım. Bu yüzden:

/**
 * @param {Object} data
 * @param {String} data.key
 * @param {String} [data.priority] optionally pass 'important'
 * @param {String} data.theme
 * @param {String} data.value
 */
function setCssVariable(data) {
    let key = data.key,
        rule, sheet;

    if (!key.startsWith('--')) {
        key = '--' + key;
    }

    for (sheet of document.styleSheets) {
        if (sheet.href.includes(data.theme)) {
            for (rule of sheet.cssRules) {
                if (rule.constructor.name === 'CSSStyleRule') {
                    if (rule.style.getPropertyValue(key) !== '') {
                        rule.style.setProperty(key, data.value, data.priority);
                        return true;
                    }
                }
            }
        }
    }

    return false;
}

setCssVariable({
    key  : 'my-color',
    theme: 'theme-light',
    value: 'blue'
});

Belgenin tüm stil sayfalarını yineliyoruz. CSS dosyanızın URL'sinin temanızın adını içerdiğini varsayarsak, ona göre kontrol miktarlarını sınırlayabilirsiniz.

Olmaması durumunda, selectorTextiç döngünün içini kontrol edebilirsiniz (daha pahalı):

Neo kullanım durumu için, her tema dosyasında yalnızca bir CSSStyleRule vardır, bu nedenle iç döngü ilk bakışta göründüğü kadar pahalı değildir.

Mevcut olmayan özellik değerleri boş bir dize döndürür (ilginç :)), böylece değiştirmek istediğimiz değişkeni hangi CSSRule'un içerdiğini belirlemek için onu kontrol edebiliriz.

rule.style özelliğine tekrar erişmek bize şunu verir:

ve işimiz bitti.

Bu tekniği, Angular, React veya hangi ana akım teknolojide kullanırsanız kullanın. Sonraki bölümler bunun ötesinde.

4. Kapsamlı CSS'yi değiştirmek, bir Web Çalışanından farklıdır

src/main/addon/Stylesheet.mjs (ana ileti dizisi)

class Stylesheet extends Base {
    static getConfig() {return {
        className: 'Neo.main.addon.Stylesheet',

        remote: {
            app: [
                'setCssVariable'
            ]
        }
    }}

    setCssVariable(data) {
        // ...
    }
}

Konsola yakından bakarsanız mavi kutuyu fark edeceksiniz → kapsam bir Web Çalışanı olarak ayarlanmıştır ve yöntemi aynı boş ad alanı içinde bir söz olarak çağırabiliriz.

5. Kısayol oluşturma

src/worker/App.mjs (ana iş parçacığının dışında)

class App extends Base {
    construct(config) {
        super.construct(config);

        // convenience shortcut
        Neo.setCssVariable = this.setCssVariable.bind(this);
    }

    setCssVariable(data) {
        let addon = Neo.main?.addon?.Stylesheet,
            theme = Neo.config.themes?.[0];

        if (!addon) {
            return Promise.reject('Neo.main.addon.Stylesheet not imported');
        } else {
            if (theme.startsWith('neo-')) {
                theme = theme.substring(4);
            }

            return addon.setCssVariable({theme, ...data});
        }
    }
}

bir Web Çalışanının içinden.

6. neo.mjs projesi

"Ana aktör olan bir uygulama çalışanı" veya "ana konu dışı" artık kurgu değil, çok kararlı ve son derece hızlı çalışıyor:

neo, ekosistem içinde 15.000'den fazla taahhütle v4.8.2'ye ulaştı bile. Son blog yazımdan bu yana binlercesini kaçırmış olabilirsiniz.

Performans, ölçeklenebilirlik ve genişletilebilirliğin faydalarını incelemediyseniz, yeni nesil çok iş parçacıklı ön uçlar konusunu takip etmek isteyebilirsiniz.

Bir spoiler olarak: Max Rahder, 20 öğrenciye ilk profesyonel neo eğitimini vermenin tam ortasında. Bittiğinde, eksik öğrenme bölümünü nihayet başlatmak için yeterli içeriğe sahip olmalıyız.

Erken erişim elde etmekle ilgileniyorsanız, Slack'te bize ping atın:

7. Konu dışı ama inanılmaz: ChatGPT neo hakkında ne düşünüyor?

Saygılarımla ve mutlu kodlamalar,
Tobias