İçeriğe atla

NodeBB Harmony temasına dark Mod (gece modu) ekleme

NodeBB
  • NodeBB harmony temasına HTML- CSS ve JS ile dark modu nasıl eklenir? Hadi yapalım.

    İlk önce Admin Panel > Genişletme > Bileşenler menüsüne gelin. Burada Brand Header global / brand-header alanına aşağıdaki HTML kodunu ekleyin. Bu sayfanın sağ üzt kçşesine gece/gündüz modu butonu ekleyecek.

    <nav>
    <div class="theme-switch-wrapper d-flex align-self-center">
    <label class="theme-switch" for="checkbox">
    <input type="checkbox" id="checkbox" />
    <div class="slider border rounded-pill">
    <div class="moon-sun p-1">
    <i class="fa-solid fa-moon text-white float-start"></i>
    <i class="fa-solid fa-sun text-warning float-end"></i>
    </div></div>
    </label>
    </div>
    </nav>
    

    Şimdi Admin Panel > Görünüm > Özelleştirilmiş İçerik (HTML-CSS-JS) menüsüne gelin. İlk önce gece modu CSS’lerini ekleyeceğiz. Aşağıdaki kodu CSS bölümüne yapıştırın.

    /* css for night mode */
    
    [data-theme="dark"] {
        --font-color: #e1e1ff;
        --bs-body-bg: #202124;
        --bs-body-color: #f1f3f4;
        --bs-body-color-rgb: 255,255,255;
        --bs-nav-link-color: #fff;
        --bs-border-color: #35363a;
        --bs-body-bg-rgb: 32,33,36;
        --bs-light-rgb: 32,33,36;
    }
    
    [data-theme="dark"] hr { border-top-color: #262729;  }
    [data-theme="dark"] .active .chat-room-btn { background-color: #262729; }
    [data-theme="dark"] { .btn-outline { border-color: #b6b6b6; } }
    [data-theme="dark"] { .btn-outline.active, .btn-outline:hover, .btn-link.active, .btn-link:hover { background-color: #35363a; } }
    [data-theme="dark"] { .btn-ghost.active, .btn-ghost:hover, .btn-ghost-sm.active, .btn-ghost-sm:hover { background-color: #262729; } }
    [data-theme="dark"] .skin-noskin .composer { background-color: #262729!important; }
    [data-theme="dark"] .skin-noskin .bottombar-nav .dropdown-menu { background-color: #262729 !important; }
    [data-theme="dark"]  .bottombar-nav .nav-text { color: #ffffff; }
    [data-theme="dark"] .composer .resizer { background: linear-gradient(transparent,#262729); }
    [data-theme="dark"] .skin-noskin .bottombar-nav { background-color: #262729!important; }
    [data-theme="dark"] .page-topic .pagination-block.ready { background-color: #202124 !important; border-color: #262729 !important; }
    [data-theme="dark"] .form-control { background-color: #262729; border: 1px solid #35363a; color: #b6b6b6; }
    [data-theme="dark"] .form-control:focus { color: white; background-color: #262729; border-color: #262729; box-shadow: inset 0px 0px 0px rgba(0,0,0,.075), 0 0 0 0.05rem rgb(27 115 249); }
    [data-theme="dark"] .dropdown-item:hover { color: white; background-color: #262729; }
    [data-theme="dark"] .tag-list .tag { background-color: #262729; color: white; }
    [data-theme="dark"] .breadcrumb .breadcrumb-item span { color: #b6b6b6; }
    [data-theme="dark"] .card { --bs-card-cap-bg: rgba(38,39,41); background-color: #262729; }
    [data-theme="dark"] .skin-noskin nav.sidebar { background-color: #202124!important; }
    [data-theme="dark"] .sidebar .nav-link.active { background-color: #35363a; }
    [data-theme="dark"] { .sidebar .nav-link:focus, .nav-link:hover { background-color: #35363a !important; color: white; } }
    [data-theme="dark"] .sticky-tools { background-color: #202124; }
    [data-theme="dark"] .text-muted { color: #b6b6b6!important; }
    [data-theme="dark"] nav-btn:hover { background-color: #35363a; }
    [data-theme="dark"] .btn-ghost-sm:hover { background-color: #35363a; }
    [data-theme="dark"] .btn:hover { background-color: #202124; border-color: #62656f; }
    [data-theme="dark"] { .dropdown-menu, .dropdown-item { background-color: #202124; color: #f1f3f4; } }
    [data-theme="dark"] .border-gray-300 { border-color: #35363a!important; }
    [data-theme="dark"] ul.topics-list li.selected { background-color: #262729; }
    [data-theme="dark"] .modal-content { background-color: #35363a; }
    [data-theme="dark"] .account .avatar-wrapper { border: 4px solid #262729; }
    
    @media (min-width: 576px) {
    [data-theme="dark"] .topic .pagination-block .scroller-container { border-left: 2px solid #35363a; }
    [data-theme="dark"] .page-topic .topic .posts.timeline>[component=post] { border-left: 2px solid #35363a; }
    [data-theme="dark"] .page-topic .topic .posts.timeline>[component=post]:first-child:before { background-color: #35363a; }
    [data-theme="dark"] .page-topic .topic .posts.timeline>[component=post]:last-child:after { background-color: #35363a; }
    }
    
    /* css for the switch a night/light */
    
    .theme-switch {
      display: inline-block;
      height: 26px;
      position: relative;
      width: 55px;
    }
    
    .theme-switch input { display:none; }
    
    .slider {
      background-color: #ffffff;
      bottom: 0;
      cursor: pointer;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
      transition: .4s;
    }
    
    .slider:before {
      background-color: #1b73f9;
      bottom: 3px;
      content: "";
      height: 18px;
      width: 18px;
      left: 4px;
      position: absolute;
      transition: .4s;
      border-radius: 50px;
    }
    
    input:checked + .slider { background-color: #262729; }
    input:checked + .slider:before { transform: translateX(28px); }
    

    Son olarak yine aynı menüde şimdide JS ekleyeceğiz. Aşağıdaki JS kodunu JS bölümüne yapıştırın.

    const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
    const currentTheme = localStorage.getItem('theme');
    
    if (currentTheme) {
        document.documentElement.setAttribute('data-theme', currentTheme);
      
        if (currentTheme === 'dark') {
            toggleSwitch.checked = true;
        }
    }
    
    function switchTheme(e) {
        if (e.target.checked) {
            document.documentElement.setAttribute('data-theme', 'dark');
            localStorage.setItem('theme', 'dark');
        }
        else { document.documentElement.setAttribute('data-theme', 'light');
              localStorage.setItem('theme', 'light');
        }    
    }
    
    toggleSwitch.addEventListener('change', switchTheme, false);
    

    Son olarak gece modu için başka bir logo kullanmayı düşünüyorsanız aşağıdaki kodu da harici CSS bölümüne ekleyin.

    [data-theme="dark"] [component="brand/logo"] { content: url(/link/to/logo-for-dark-mode.png); }
    
  • Bende brand header yok global header var o da logo nun yarına değil aşağıya ekliyor.

  • @fakruzaruret nodebb v3 sürümünde bu alan geliyor

  • A ahmed26 bu başlıktan tarihinde bahsetti
  • crazycellsC crazycells bu başlıktan tarihinde bahsetti

Benzer konular