편집 요약 없음 |
편집 요약 없음 |
||
| (같은 사용자의 중간 판 11개는 보이지 않습니다) | |||
| 1번째 줄: | 1번째 줄: | ||
{{namucat|김찬/제작한 틀}} | {{namucat|김찬/제작한 틀}} | ||
{{틀 도움}} | {{틀 도움}} | ||
<onlyinclude><span class="mwe-math-fallback-image-inline mw-invert">{{#if:{{{link|}}}|[[파일:{{파일명 인식|{{{1|}}}}}|{{{2|}}}|link={{{link|}}}]]|[[파일:{{파일명 인식|{{{1|}}}}}|{{{2|}}}|link=]]</span></onlyinclude> | {{다른 뜻2|설명1=라이트 모드와 다크 모드 각각에서 아예 서로 다른 이미지를 출력하는 틀|제목1=틀:이미지전환}} | ||
<onlyinclude>{{#css: .mwe-math-fallback-image-inline.mw-invert::selection, .mwe-math-fallback-image-inline.mw-invert img::selection { background-color: var(--namu--selection)!important; color: var(--namu--title--background)!important; } }}{{#ifeq:{{{1|}}}|class|mwe-math-fallback-image-inline mw-invert|<span class="mwe-math-fallback-image-inline mw-invert">{{#if:{{{link|}}}|{{#if:{{{2|}}}|[[파일:{{파일명 인식|{{{1|}}}}}|{{{2|}}}|link={{{link|}}}]]|[[파일:{{파일명 인식|{{{1|}}}}}|link={{{link|}}}]]}}|{{#if:{{{2|}}}|[[파일:{{파일명 인식|{{{1|}}}}}|{{{2|}}}|link=]]|[[파일:{{파일명 인식|{{{1|}}}}}|link=]]}}}}</span>}}</onlyinclude> | |||
<pre>{{invert-img|이미지|크기(선택)|link=링크(선택)}}</pre> | <pre>{{invert-img|이미지|크기(선택)|link=링크(선택)}}</pre> | ||
제이위키의 다크 모드가 켜지면 이미지의 색을 자동으로 반전시키는 틀입니다. | 제이위키의 다크 모드가 켜지면 이미지의 색을 자동으로 반전시키는 틀입니다. | ||
이미지의 채도를 고려하지 않고 그냥 모든 색을 완전히 반전시켜 버리기 때문에, 예를 들어 배경색은 흰색(=다크 모드에서 검은색)으로 유지해야 하는데 아이콘이 검은색이라 다크 모드에서 아예 보이지 않게 되는 '''완전히 검거나 흰 이미지'''에 적합합니다. | 이미지의 채도를 고려하지 않고 그냥 모든 색을 완전히 반전시켜 버리기 때문에, 예를 들어 배경색은 흰색(=다크 모드에서 검은색)으로 유지해야 하는데 아이콘이 검은색이라 다크 모드에서 아예 보이지 않게 되는 '''완전히 검거나 흰 이미지'''에 적합합니다. | ||
<code><nowiki>{{invert-img|class}}</nowiki></code>처럼 입력하면 다크 모드에서 색을 반전시키는 클래스 이름만 출력합니다. 이미지에만 사용할 것이 아니라 좀 더 폭넓게 활용하고 싶을 때 <code><nowiki><span class="{{invert-img|class}}">~~~~</span></nowiki></code>처럼 사용할 수 있을 것입니다. | |||
그냥... 끝입니다<br>원리는 간단한데, 제이위키에서 <nowiki><math></nowiki> 태그는 이미지 형식으로 출력하고, 다크 모드가 켜지면 이 <nowiki><math></nowiki> 태그 이미지에 라이트 모드에는 없던 이미지 색을 반전시키는 클래스가 생깁니다. 그 클래스를 그냥 직접 사용하는 겁니다 | 그냥... 끝입니다<br>원리는 간단한데, 제이위키에서 <nowiki><math></nowiki> 태그는 이미지 형식으로 출력하고, 다크 모드가 켜지면 이 <nowiki><math></nowiki> 태그 이미지에 라이트 모드에는 없던 이미지 색을 반전시키는 클래스가 생깁니다. 그 클래스를 그냥 직접 사용하는 겁니다 | ||
| 16번째 줄: | 19번째 줄: | ||
!문법||결과 | !문법||결과 | ||
|- | |- | ||
|<pre>{{invert-img|황실 마법사단|100px}}</pre> | |<pre style="white-space: pre-wrap;">{{invert-img|황실 마법사단|100px}}</pre> | ||
|{{invert-img|황실 마법사단|100px}} | |{{invert-img|황실 마법사단|100px}} | ||
|- | |||
|<pre style="white-space: pre-wrap;"><span class="{{invert-img|class}}" style="color: black;">TEST</span></pre> | |||
|{{style|align=center}}|<span class="{{invert-img|class}}" style="color: black;">TEST</span> | |||
|} | |} | ||
{{김찬 제작 틀}} | {{김찬 제작 틀}} | ||
2025년 4월 11일 (금) 04:18 기준 최신판
| 틀:invert-img | |
|---|---|
사용문서
|
|
넘겨주기
|
이동하기
|
[[파일:|link=]]
{{invert-img|이미지|크기(선택)|link=링크(선택)}}
제이위키의 다크 모드가 켜지면 이미지의 색을 자동으로 반전시키는 틀입니다.
이미지의 채도를 고려하지 않고 그냥 모든 색을 완전히 반전시켜 버리기 때문에, 예를 들어 배경색은 흰색(=다크 모드에서 검은색)으로 유지해야 하는데 아이콘이 검은색이라 다크 모드에서 아예 보이지 않게 되는 완전히 검거나 흰 이미지에 적합합니다.
{{invert-img|class}}처럼 입력하면 다크 모드에서 색을 반전시키는 클래스 이름만 출력합니다. 이미지에만 사용할 것이 아니라 좀 더 폭넓게 활용하고 싶을 때 <span class="{{invert-img|class}}">~~~~</span>처럼 사용할 수 있을 것입니다.
그냥... 끝입니다
원리는 간단한데, 제이위키에서 <math> 태그는 이미지 형식으로 출력하고, 다크 모드가 켜지면 이 <math> 태그 이미지에 라이트 모드에는 없던 이미지 색을 반전시키는 클래스가 생깁니다. 그 클래스를 그냥 직접 사용하는 겁니다
원래는 라이트/다크에 따라 아예 개별적으로 스타일을 지정할 수 있는 틀을 만들고 싶었지만 기술력 부족으로 이 정도가 한계였습니다.
| 문법 | 결과 |
|---|---|
{{invert-img|황실 마법사단|100px}}
|
|
<span class="{{invert-img|class}}" style="color: black;">TEST</span>
|
TEST |
