تركيب زر الوضع المظلم DARKMODE لقالب بلوجر

تركيب زر الوضع المظلم الداكن لقالب بلوجر

شرح تركيب زر الوضع المظلم على قالب بلوجر

طريقة تركيب الاكواد الخاصة بزر الوضع المظلم

<style>

:root {

--bg: #ffffff;

--db: #f5f5f5;

--dd: #f5f5f5;

--text: #111827;

--accent: #2563eb;

--muted: #6b7280;

}

#outer-wrapper[data-theme=&quot;dark&quot;] {

--bg: #26272a;

--db: #303238;

--dd: #1e1f22;

--text: #e6eef8;

--accent: #60a5fa;

--muted: #9ca3af;

}

#outer-wrapper{background:var(--bg);color:var(--text);transition:background .25s ease,color .25s ease}

#outer-wrapper[data-theme=&quot;light&quot;] .ts-button .ts-label,#outer-wrapper[data-theme=&quot;light&quot;] .ts-button .ico svg{color:#ffffff!important;stroke:#ffffff!important;fill:#ffffff!important}

.theme-switcher{position:relative;margin-left:10px;float:left;display:inline-block;margin-inline-start:10px;direction:var(--dir,ltr)}

.ts-button{display:inline-flex;color:#ffffff;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:rgba(0,0,0,0.06);border:1px solid rgba(0,0,0,0.08);cursor:pointer;user-select:none;transition:background .2s}

#outer-wrapper[data-theme=&quot;dark&quot;] .ts-button{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.08)}

.ts-button:hover{background:rgba(0,0,0,0.08)}

#outer-wrapper[data-theme=&quot;dark&quot;] .ts-button:hover{background:rgba(255,255,255,0.1)}

.ts-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;background:var(--bg);border-radius:10px;border:1px solid rgba(0,0,0,0.1);box-shadow:0 8px 25px rgba(0,0,0,0.15);display:none;min-width:160px;z-index:9999}

#outer-wrapper[data-theme=&quot;dark&quot;] .ts-menu{border-color:rgba(255,255,255,0.08);box-shadow:0 8px 25px rgba(0,0,0,0.6)}

.theme-switcher.open .ts-menu{display:block}

.ts-item{padding:10px 14px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:14px;color:var(--text);transition:background .12s}

.ts-item:hover{background:rgba(0,0,0,0.05)}

#outer-wrapper[data-theme=&quot;dark&quot;] .ts-item:hover{background:rgba(255,255,255,0.08)}

.ts-item svg{width:20px;height:20px}

.ts-selected{color:var(--accent);font-weight:600}

.ico svg{width:20px;height:20px;transition:transform .3s ease}

.post-body h1,.post-body h2,.post-body h3,.post-body h4,.post-body h5,.post-body h6{background:var(--dd);color:var(--text);transition:background .25s ease,color .25s ease}

.item .post {

background: var(--db);

color: var(--text);

transition: background .25s ease, color .25s ease;

}

</style>

<script type='text/javascript'>

//<![CDATA[

(function(){

const storageKey = 'blogger-theme';

const wrapper = document.getElementById('outer-wrapper');

const switcher = document.getElementById('themeSwitcher');

const btn = document.getElementById('tsButton');

const menu = document.getElementById('tsMenu');

const items = menu.querySelectorAll('.ts-item');

const iconSvg = document.getElementById('iconSvg');

const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');

const iconWidth = 22;

const iconHeight = 22;

document.documentElement.style.setProperty('--dir',

getComputedStyle(document.body).direction || 'ltr'

);

function setIcon(theme){

if(theme === 'light'){

iconSvg.innerHTML = `

<circle cx='12' cy='12' r='4'/>

<path d='M12 2v2'/>

<path d='M12 20v2'/>

<path d='M5 5l1.5 1.5'/>

<path d='M17.5 17.5L19 19'/>

<path d='M2 12h2'/>

<path d='M20 12h2'/>

<path d='M5 19l1.5-1.5'/>

<path d='M17.5 6.5L19 5'/>

`;

iconSvg.setAttribute('fill','none');

iconSvg.setAttribute('stroke','currentColor');

iconSvg.setAttribute('stroke-linecap','round');

iconSvg.setAttribute('stroke-linejoin','round');

iconSvg.setAttribute('stroke-width','2');

}

else if(theme === 'dark'){

iconSvg.innerHTML = `<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>`;

iconSvg.setAttribute('fill','none');

iconSvg.setAttribute('stroke','currentColor');

iconSvg.setAttribute('stroke-width','2');

iconSvg.setAttribute('stroke-linecap','round');

iconSvg.setAttribute('stroke-linejoin','round');

}

else if(theme === 'auto'){

iconSvg.innerHTML = `

<svg width="${iconWidth}" height="${iconHeight}" viewBox="0 0 16 16" fill="none"

xmlns="http://www.w3.org/2000/svg">

<path d="M8 0c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM8 15c-3.9 0-7-3.1-7-7

0-2.4 1.2-4.6 3.2-5.9-0.1 0.6-0.2 1.3-0.2 1.9 0 4.9 4 8.9 8.9 9-1.3

1.3-3 2-4.9 2z" fill="currentColor"/>

</svg>

`;

iconSvg.removeAttribute('stroke');

iconSvg.setAttribute('width', iconWidth);

iconSvg.setAttribute('height', iconHeight);

}

}

function applyTheme(theme){

if(theme === 'auto'){

const isDark = prefersDark.matches;

wrapper.setAttribute('data-theme', isDark ? 'dark' : 'light');

setIcon('auto');

} else {

wrapper.setAttribute('data-theme', theme);

setIcon(theme);

}

highlight(theme);

}

function highlight(theme){

items.forEach(i => i.classList.toggle('ts-selected', i.dataset.themeValue === theme));

}

function saveTheme(t){ localStorage.setItem(storageKey, t); }

function loadTheme(){ return localStorage.getItem(storageKey) || 'auto'; }

prefersDark.addEventListener('change', ()=>{ if(loadTheme()==='auto') applyTheme('auto'); });

const current = loadTheme();

applyTheme(current);

btn.addEventListener('click', e=>{

e.stopPropagation();

switcher.classList.toggle('open');

});

document.addEventListener('click', e=>{

if(!switcher.contains(e.target)) switcher.classList.remove('open');

});

items.forEach(it=>{

it.addEventListener('click', ()=>{

const val = it.dataset.themeValue;

saveTheme(val);

applyTheme(val);

switcher.classList.remove('open');

});

});

})();

//]]></script>

<div aria-live='polite' class='theme-switcher' id='themeSwitcher'>

<div aria-expanded='false' aria-haspopup='true' class='ts-button' id='tsButton' role='button' title='وضع المظهر'>

<span class='ico' id='tsIcon'>

<svg fill='currentColor' height='20' id='iconSvg' viewBox='0 0 24 24' width='20'>

<path d='M12 2a9.93 9.93 0 0 0-6.7 2.4 9.94 9.94 0 1 0 12.6 0A9.93 9.93 0 0 0 12 2zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16z'/>

</svg>

</span>

<span class='ts-label'>المظهر</span>

</div>

<div aria-label='اختيار المظهر' class='ts-menu' id='tsMenu' role='menu'>

<div class='ts-item' data-theme-value='light' role='menuitem' tabindex='0'>

<div style='display:flex;align-items:center;gap:8px;'>

<svg fill='currentColor' height='20' viewBox='0 0 24 24' width='20'>

<path d='M12 2a1 1 0 0 1 1 1v2a1 1 0 1 1-2 0V3a1 1 0 0 1 1-1zm0 16a6 6 0 1 0 0-12 6 6 0 0 0 0 12z'/>

</svg>

<span class='label'>فاتح</span>

</div>

<div aria-hidden='true' class='check'></div>

</div>

<div class='ts-item' data-theme-value='dark' role='menuitem' tabindex='0'>

<div style='display:flex;align-items:center;gap:8px;'>

<svg fill='currentColor' height='20' viewBox='0 0 24 24' width='20'>

<path d='M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79z'/>

</svg>

<span class='label'>مظلم</span>

</div>

<div aria-hidden='true' class='check'></div>

</div>

<div class='ts-item' data-theme-value='auto' role='menuitem' tabindex='0'>

<div style='display:flex;align-items:center;gap:8px;'>

<svg fill='currentColor' height='20' viewBox='0 0 24 24' width='20'>

<path d='M12 2a9.93 9.93 0 0 0-6.7 2.4 9.94 9.94 0 1 0 12.6 0A9.93 9.93 0 0 0 12 2zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16z'/>

</svg>

<span class='label'>تلقائي</span>

</div>

<div aria-hidden='true' class='check'></div>

</div>

</div>

</div>

ملاحظة

.item .post

{background:var(--db);

color:var(--text);

transition:background .25s ease,color .25s ease}