로그인

검색

Extra Form
추천지수 7

라이믹스 2.0에는 다크모드를 구현하는데 필요한 기본 기능을 라이믹스 코어에서 지원을 합니다. 그런데 레이아웃에서 이 기능을 이용해서 코드가 작성되어야 하고 다크모드,라이트모드 전환을 위한 코드도 들어가야 하는데요. RXP FLEX 레이아웃이 코드가 잘 짜여져 있어서 이 레이아웃을 참조해서 다른 레이아웃에도 응용할 수 있을 것 입니다.

 

한가지 먼저 알려드릴 부분은 이 팁에서 사용하는 RXP FLEX의 다크모드를 위한 함수는 현재 라이믹스 코어에서 오류가 있는 부분을 수정하기 위한 함수로서 이 글을 쓰고 있는 현재 시점 라이믹스 코어(개발자버전)에서는 수정이 되어 이후 이 이 함수 의존 없이도 다크모드 사용시 불편없이 사용이 가능하다는 것을 알려드립니다. 이후 개선된 코어를 적용하시거나 미리 적용하시게 되면 이 함수를 작동하는 부분을 제외하고 구현하셔도 될 것 입니다.

 

** 시스템 설정 - 사이트설정에서 가장 하단의 "사이트 색상 조합"  의 설정을 기기상태 자동 감지로 하셔야 정상 작동합니다.

 

화면 캡처 2021-06-04 224207.png

그렇지 않고 밝은색 혹은 어두운색으로 고정해버리면 다크모드를 자동 그리고 사용자 선택으로 운영할 수 없습니다.

 

위 상태로 설정하고 작업을 해주세요.

 

 

 

 

https://github.com/rx-public/rxp_flex/

 

위 url에서 레이아웃의 코드를 보고 다운 받을 수 있습니다.

 

https://github.com/rx-public/rxp_flex/blob/main/_config.php

위 파일을 이용할 것인데 다른 레이아웃에서 필요없는 변수부분이나 로그인 관련 함수는 전혀 필요 없으니 제거를 하시고 사용하셔도 됩니다. 제가 사용한 파일은 첨부해 드리겠습니다.

 

https://github.com/YJSoft/rxp_flex

*원본 저장소가 삭제되어 포크 저장소에서 다운받을 수 있습니다.

 

레이아웃 설정에 다크모드,라이트모드,자동 을 지정할 수 있는 옵션 설정을 할 수 있도록 추가해 줍니다.

 

사용하시는 레이아웃 폴더 하위 conf/info.xml 파일에 추가를 해주셔야 합니다.

 

<var name="color_scheme" type="select">
                <title xml:lang="ko">컬러 모드</title>
                <description>컬러 모드를 라이트 모드/다크 모드로 설정하면 사용자가 임의로 변경할 수 없도록 테마가 고정됩니다. (사용자 지정의 경우 최초 접속 시 라이트 모드로 표현됩니다.)</description>

                <options value="auto">
                    <title xml:lang="ko">자동 및 사용자 선택 (기본 값)</title>
                </options>
                <options value="light">
                    <title xml:lang="ko">라이트 모드</title>
                </options>
                <options value="dark">
                    <title xml:lang="ko">다크 모드</title>
                </options>
</var>

 

 

기존 옵션 설정이 작성되어 있는 부분에 추가를 해주세요.

<extra_vars>

 

</extra_vars>

의 안쪽에 넣어주시면 되고 안에 <group> 으로  나누어져 있다면 <group> 안쪽에 추가를 해주면 됩니다.

 

 

 

_config.php 파일은 레이아웃의 폴더에 업로드 해주세요.

 

 

업로드 한 후 layout.html 파일에서 해당 파일을 load 해줍니다.

 

<include target="_config.php" />

 

 

그리고 그 아래에 

 

 

{@
    RxpFlexTheme::init($layout_info);
    // 브라우저 테마 컬러 지정
    $layoutConfig = RxpFlexTheme::getConfig($layout_info);
    Context::addMetaTag("theme-color", $layoutConfig['primary_color']);
    RxpFlexTheme::colorScheme();

    $heaer_darkmode_text = "다크 모드로 전환";

    if(RxpFlexTheme::isDarkMode()):
        $heaer_darkmode_text = "라이트 모드로 전환";
    endif;
}

 

위와 같은 코드를 넣어주는데요.

제 예상은 아마 코어에서 오류가 수정된 이후에는 별도 업로드한 php 파일에서 다크모드 함수를 지워도 되며  함수를 지웠다면 위 코드 중 함수를 실행하는 코드  RxpFlexTheme::colorScheme(); 를 지워야 합니다.(이부분은 나중에 하셔도 되고 그냥 이대로 쓰셔도 됩니다.)

 

php 파일 전체를 지우게 되면 레이아웃 설정 정보를 가져오는 부분을 php 파일의 함수에 의존하는 부분도 살짝 고쳐야 합니다.

 

다시 지금 상태에서 다크모드를 적용하는 것을 이어가 보겠습니다.

 

 

레이아웃 하단에 아래와 같은 스크립트를 넣어 줍니다.

 

<script>
    <!--@if(\Rhymix\Framework\UA::getColorScheme() === 'auto')-->
    window.matchMedia("(prefers-color-scheme: dark)").addListener(function(e) {
        if (e.matches) {
            $('body').removeClass('color_scheme_light').addClass('color_scheme_dark');
        } else {
            $('body').removeClass('color_scheme_dark').addClass('color_scheme_light');
        }
    });
    <!--@endif-->
    function onClickDarkThemeToggle(e) {
        const isDarkTheme = getColorScheme() === 'dark';
        if (isDarkTheme === true) {
            setColorScheme('light');
$('.isDark').show();
$('.islight').hide();
        } else {
            setColorScheme('dark');
$('.islight').show();
$('.isDark').hide();
        }
        return false;
    }
</script>

<!--@if(\Rhymix\Framework\UA::getColorScheme() === 'auto')-->
<script>
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: Dark)').matches
console.log(prefersDark);
        if (prefersDark) {
$('.islight').show();
$('.isDark').hide();
        } else {
$('.isDark').show();
$('.islight').hide();
        }
</script>
<!--@else-->
<script>
<!--@if(RxpFlexTheme::isDarkMode())-->
$('.islight').show();
<!--@else-->
$('.isDark').show();
<!--@endif-->
</script>
<!--@endif-->

 

 

 

다크모드 / 라이트모드 전환할 수 있는 토글 스위치를 적당한 위치에 달아줍니다.

 

<li cond="$layoutConfig['color_scheme'] === 'auto'">
<a cond="$layoutConfig['color_scheme'] === 'auto'" onclick="onClickDarkThemeToggle()" style="cursor: pointer;">
<span class="islight" style="display:none;"><i class="fas fa-lightbulb"></i> Light Mode</span>
<span class="isDark" style="display:none;"><i class="fas fa-moon"></i> Dark Mode</span>
</a>
</li>

 

 

이렇게 하시고 토글 버튼으로 다크모드를 눌렀을때 body에 클래스 color_scheme_dark , 라이트모드를 눌렀을때 color_scheme_light가 실시간으로 바뀌는지 확인하시고 토글 버튼도 잘 바뀌는지 확인하시면 다크모드 기능을 잘 완성이 된 것입니다.

 

위 body에 클래스 전환되는것은 브라우저의 개발자도구로 확인해 보시면 됩니다.

 

 

이후 레이아웃 또는 게시판 스킨 등의 css에서 다크모드가 지정되었을때 즉 body 가 color_scheme_dark 의 class를 가질때 디자인(주로 color와 background-color)를 추가해 주면 됩니다.

 

우선 기본적으로 

body.color_scheme_dark

{

color: #fdfdfd;

background-color: #2d2d2d;

}

 

위와 같이 해주시면 특별한 class로 디자인이 지정되지 않은 부분들이 위 속성에 의해 밝은 글자색,어두운 배경으로 바뀝니다.

 

색상은 맘에 드시는 것으로 골라보세요.

 

이후 다크모드에서 밝은 부분을 어두운 부분으로 바꿔 주시면 됩니다.

이때는 기존에 작성된 class에  .color_scheme_dark 를 앞에 추가해 주어 다크모드시에 적용되도록 해주시면 됩니다.

 

.color_scheme_dark .기존class 이런식으로요.

 

다크모드로 했더니 .arrow_box:after 의 border-right-color 지정된 색상이 너무 밝아 다크모드에서 따로 어두운색으로 지정하고자 한다면

 

.color_scheme_dark .arrow_box:after {
border-right-color : #17181c;

 

위와 같이 추가해 주면 되구요.

 

 

어두운 색상의 차이를 조금 구분해서 그룹으로 똑같이 지정하고 싶은 것들은 연속적으로 지정해 주면됩니다.

 

.color_scheme_dark 기존class1, .color_scheme_dark 기존class2, .color_scheme_dark 기존class3 ............

{

color: #fdfdfd;

background-color: #333;

}

 

 

.color_scheme_dark 기존class4, .color_scheme_dark 기존class5, .color_scheme_dark 기존class6 ............

{

color: #fdfdfd;

background-color: #333;

}

 

적용하는 것은 어렵지 않으나 경우에 따라서 고칠게 많아서 노가다를 좀 해야 하는 것이 어려울 수 있겠네요.

 

개인적으로 border 컬러는 그냥 통으로 지정했습니다.

 

body.color_scheme_dark * {
    border-color: #444 !important;
}

 

한꺼번에 모두 적용해 버리는거라 부작용이 있는 경우는 별도 조치가 필요할 수도 있지만 일거리가 줄기에.....

 

라이믹스 다크모드 기능이 편리하고 작동하는 것도 자연스럽고 맘에 들어서 적용하시면 만족도가 제법 높을 것 같습니다.

 

*CSS 적용하는 것은 제가 생각나는대로 한 것이라 더 효율적이거나 좋은 방법이 있을 수 있습니다.

 

 

Who's 꿀팁관리소장

profile
라이믹스로 커뮤니티 사이트를 운영하는 비개발자 운영자 입니다.
파트너쉽 맺으실 사이트 운영자분 환영합니다.
2 추천
Atachment
첨부 '1'
  • 사이트대박 2021.05.14 21:31
    한번 도전해보겠습니다
  • profile
    꿀팁관리소장 2021.05.14 21:32
    To.사이트대박
    성공하시길 기원합니다!
  • 사이트대박 2021.05.14 21:33
    도전하고있는중에
    Uncaught ReferenceError: onClickDarkThemeToggle is not defined
    이런애러가 뜨는데 위에 적어주신 스크립트 위치를 다른곳에 해야할까요?
  • profile
    꿀팁관리소장 2021.05.14 21:41
    To.사이트대박
    저도 잘은 모르지만 아마도 말씀하신대로 클릭하는 곳 아래에 스크립트가 있어야 할 것 같습니다. 다크모드,라이트모드 토글 스위치 아래에 스크립트가 있으면 문제가 없을 것 같아요.
  • 사이트대박 2021.05.14 21:48
    To.꿀팁관리소장
    comely 레이아웃을 사용하고 있습니다 layout.html, layout_pc.html, 모바일.html 이렇게 layout.html 3개가 있더군요 위에 말씀해주신대로 한번 해보겠습니다.
    프로그래밍에 프자도 잘 모르던 사람인데 이런 좋은글 남겨주셔서 진심으로 감사합니다^^.. 사이트 대박날때까지 자주 들르겠습니다
  • profile
    꿀팁관리소장 2021.05.14 21:50
    To.사이트대박

    그 레이아웃이면 전 layout.html 하단에 한번만 넣었습니다.

  • 사이트대박 2021.05.14 21:53
    To.꿀팁관리소장
    최하단에 넣으신걸까요?
  • profile
    꿀팁관리소장 2021.05.14 21:54
    To.사이트대박
    네. 맨 아래에 넣었습니다.
  • 사이트대박 2021.05.15 00:04
    To.꿀팁관리소장
    지금까지 계속 잡고 작업을 해보고있는데 아마 "RxpFlexTheme" 이부분에서 오류가 좀있는거 같습니다 혹시 comely layout 사용하실때도 RxpFlexTheme 스크립트나 {@ } 안에 RxpFlexTheme가 들어가나요?
  • profile
    꿀팁관리소장 2021.05.15 00:09
    To.사이트대박
    {@
    RxpFlexTheme::init($layout_info);
    // 브라우저 테마 컬러 지정
    $layoutConfig = RxpFlexTheme::getConfig($layout_info);
    Context::addMetaTag("theme-color", $layoutConfig['primary_color']);
    RxpFlexTheme::colorScheme();

    $heaer_darkmode_text = "다크 모드로 전환";

    if(RxpFlexTheme::isDarkMode()):
    $heaer_darkmode_text = "라이트 모드로 전환";
    endif;
    }

    이부분 말씀이신가요? 이건 필요한 부분 맞는데요. 레이아웃 상단에 넣었습니다.

    <include target="_config.php" /> 상단에서 이파일을 로드하는 이유가
    RxpFlexTheme 함수를 쓰기 위해서 입니다.
  • 사이트대박 2021.05.15 00:18
    To.꿀팁관리소장
    https://rxtip.kr/rx_tip/6941
    위팁을 사용하려면 위에 작성해주신 부분과
    <script>
        <!--@if(\Rhymix\Framework\UA::getColorScheme() === 'auto')-->
        window.matchMedia("(prefers-color-scheme: dark)").addListener(function(e) {
            if (e.matches) {
                $('body').removeClass('color_scheme_light').addClass('color_scheme_dark');
            } else {
                $('body').removeClass('color_scheme_dark').addClass('color_scheme_light');
            }
        });
        <!--@endif-->
    <!--@if(RxpFlexTheme::isDarkMode())-->
    $('.islight').show();
    <!--@else-->
    $('.isDark').show();
    <!--@endif-->
        function onClickDarkThemeToggle(e) {
            const isDarkTheme = getColorScheme() === 'dark';
            if (isDarkTheme === true) {
                setColorScheme('light');
    $('.isDark').show();
    $('.islight').hide();
            } else {
                setColorScheme('dark');
    $('.islight').show();
    $('.isDark').hide();
            }
            return false;
        }
    </script>
    이부분이 필요 없을까요?


    <li cond="$layoutConfig['color_scheme'] === 'auto'">
    <a cond="$layoutConfig['color_scheme'] === 'auto'" onclick="onClickDarkThemeToggle()" style="cursor: pointer;">
    <span class="islight" style="display:none;"><i class="fas fa-lightbulb"></i> Light Mode</span>
    <span class="isDark" style="display:none;"><i class="fas fa-moon"></i> Dark Mode</span>
    </a>
    </li>
    토글부분을 사용하려고했는데 토글자체가 노출이 안되는거보니
    $layoutConfig['color_scheme'] === 'auto' 이부분자체가 동작을 안하는거 같습니다
  • profile
    꿀팁관리소장 2021.05.15 00:21
    To.사이트대박
    스크립트는 필요합니다. 이 팁을 구현하신 분이 이후 팁을 적용할때 스크립트를 또 추가할 필요가 없다는 것이구요.
    $layoutConfig['color_scheme'] === 'auto' 이 작동하지 않는 다면 php 파일 함수를 사용하지 못하고 있을 수도 있고

    <var name="color_scheme" type="select">
    <title xml:lang="ko">컬러 모드</title>
    <description>컬러 모드를 라이트 모드/다크 모드로 설정하면 사용자가 임의로 변경할 수 없도록 테마가 고정됩니다. (사용자 지정의 경우 최초 접속 시 라이트 모드로 표현됩니다.)</description>

    <options value="auto">
    <title xml:lang="ko">자동 및 사용자 선택 (기본 값)</title>
    </options>
    <options value="light">
    <title xml:lang="ko">라이트 모드</title>
    </options>
    <options value="dark">
    <title xml:lang="ko">다크 모드</title>
    </options>
    </var>

    위 옵션을 잘 못 만드셨을 수도 있을 것 같습니다.
  • profile
    꿀팁관리소장 2021.05.15 00:26
    To.사이트대박
    그리고 토글 버튼에 cond="$layoutConfig['color_scheme'] === 'auto'" 조건 두개를 잠시 지워보세요.
    그러면 원인이 뭔지 나올겁니다.

    그래도 안나오면 span class="islight" style="display:none;" 로 제가 가려 놓은게 스크립트로 보이게 되는 부분이 작동하지 않는 것이구요.
    스크립트가 제대로 레이아웃에 설치가 안되어 있을 수도 있습니다.
  • 사이트대박 2021.05.15 00:47 Files첨부 (1)
    To.꿀팁관리소장

    conf/info.xml 95-107줄

    layout.html 23번줄 config.php인클루드

                    ㄴ 24~35줄

                    ㄴ 102~130 스크립트 추가

    layout_pc.html 41~46번줄 토글추가

    comely.zip

     

    염치불구하고 한번 제가 한게 맞는지 봐주실수 있을까요? 

    cond="$layoutConfig['color_scheme'] === 'auto'" 는 지우고 해봤는데

     

    크롬 개발자도구에서 아래와같은 오류가 나옵니다

    Uncaught ReferenceError: onClickDarkThemeToggle is not defined
        at HTMLAnchorElement.onclick

  • profile
    꿀팁관리소장 2021.05.15 00:52
    To.사이트대박
    제가 아는 그 사이트 맞나요? St....
    소스보기로 봐도 스크립트도 안보이고 하던데요....

    압축하신 파일은 제가 업로드한거죠?
  • 사이트대박 2021.05.15 00:54
    To.꿀팁관리소장

    사이트 주소 쪽지로 드렸습니다, 네 맞습니다

    header_menu 안에 ul코드 보시면 토글이 있습니다

  • profile
    꿀팁관리소장 2021.05.15 01:07
    To.사이트대박
    php 파일이 제가 업로드 해드린게 아닌거 같습니다. 필요한 부분이 제거된 것 같아요. 제것으로 해보세요.
  • 사이트대박 2021.05.15 01:14
    To.꿀팁관리소장
    앗 현게시물에 업로드해주신 첨부파일 받아서 이름만 congif.php로 바꿔서 업로드했는데 혹시 다른파일이 있는건가요?
  • profile
    꿀팁관리소장 2021.05.15 01:16
    To.사이트대박
    아.. 그럼 제가 잘못 된 버전을 업로드 했나 보네요. 잠시만요 제가 확인해보고 알려드릴게요.
  • 사이트대박 2021.05.15 01:18
    To.꿀팁관리소장
    넵 대기하겠습니다
  • profile
    꿀팁관리소장 2021.05.15 01:19
    To.사이트대박
    정말 죄송합니다. 함수 하나가 빠진 파일이 업로드 된 것 같습니다. 다운 받아서 비교해 보시고 다른 파일이면 받으신 파일로 교체해 주세요.
  • 사이트대박 2021.05.15 01:29
    To.꿀팁관리소장
    파일크기가 달라서 일단 변경은 했습니다만 아직도 (index):230 Uncaught ReferenceError: onClickDarkThemeToggle is not defined
    at HTMLAnchorElement.onclick 에러는 동일하게 뜹니다 ㅠ
  • profile
    꿀팁관리소장 2021.05.15 01:30
    To.사이트대박
    제가 볼때는 왜 에러도 안보이고 소스보기를 해보면 하단에 스크립트가 전혀 안보일까요????
  • 사이트대박 2021.05.15 01:36
    To.꿀팁관리소장
    스크립트를 다시 적용해보았는데요 제가 보내드렸던 주소에 /test 로 들어가면
    ParseError #0 "syntax error, unexpected ' ' (T_STRING)" in layouts/comely_layout/layout.html on line 27
    위같은 에러가 뜨고있습니다 27번째줄은 $layoutConfig = RxpFlexTheme::getConfig($layout_info); 입니다
  • profile
    꿀팁관리소장 2021.05.15 01:38
    To.사이트대박
    php 파일이 이름 혹시 안바꾸신거 아닌가요?
  • profile
    꿀팁관리소장 2021.05.15 01:33
    To.사이트대박

    에러야 버튼을 눌렀을때 나올 수 있다 치고 그걸 떠나서 하단에 지금 넣으신 스크립트가 보여야 하는데 전혀 안보이고 있습니다.

    스크립트가 없는데 버튼을 눌러서 스크립트 함수를 호출하면 지금 에러가 뜰 수 밖에 없습니다.

    스크립트가 없으니 가려진 버튼이 보일 수 가 없구요.

  • 사이트대박 2021.05.15 01:41 SECRET

    "비밀글입니다."

  • profile
    꿀팁관리소장 2021.05.15 01:55 SECRET

    "비밀글입니다."

  • 사이트대박 2021.05.15 02:07 SECRET

    "비밀글입니다."

  • profile
    꿀팁관리소장 2021.05.15 02:09 SECRET

    "비밀글입니다."

  • 사이트대박 2021.05.15 02:11 SECRET

    "비밀글입니다."

  • profile
    꿀팁관리소장 2021.05.15 02:01 SECRET

    "비밀글입니다."

  • 사이트대박 2021.05.15 02:10 SECRET

    "비밀글입니다."

  • profile
    꿀팁관리소장 2021.05.15 02:13 SECRET

    "비밀글입니다."

  • 사이트대박 2021.05.15 02:24 SECRET

    "비밀글입니다."

  • profile
    꿀팁관리소장 2021.05.15 02:24 SECRET

    "비밀글입니다."

  • 사이트대박 2021.05.15 02:32 SECRET

    "비밀글입니다."

  • profile
    꿀팁관리소장 2021.05.15 02:34 SECRET

    "비밀글입니다."

  • 사이트대박 2021.05.15 02:41 SECRET

    "비밀글입니다."

  • profile
    꿀팁관리소장 2021.05.15 02:46 SECRET

    "비밀글입니다."

  • profile
    꿀팁관리소장 2021.05.15 02:57 SECRET

    "비밀글입니다."

  • 사이트대박 2021.05.15 03:01 SECRET

    "비밀글입니다."

  • profile
    꿀팁관리소장 2021.05.15 03:04 SECRET

    "비밀글입니다."

  • profile
    꿀팁관리소장 2021.05.15 03:07 SECRET

    "비밀글입니다."

  • profile
    꿀팁관리소장 2021.05.15 03:13 SECRET

    "비밀글입니다."

  • 사이트대박 2021.05.15 03:27 SECRET

    "비밀글입니다."

  • profile
    꿀팁관리소장 2021.05.15 03:40 SECRET

    "비밀글입니다."

  • 사이트대박 2021.05.15 03:55 SECRET

    "비밀글입니다."

  • profile
    adlib 2021.05.17 06:19
    오늘은 기존 사이트에 다크모드 적용하기 ^^*
  • profile
    꿀팁관리소장 2021.05.17 09:20
    To.adlib
    성공하시길 바래요^^
  • d
    discord 2021.05.18 03:06

    감사 인사 드리려고 가입했습니다.
    XETOWN에 남겨 주신 글 참고해서 저도 쓰고 있는 레이아웃에 다크모드 기능 추가에 성공했습니다. 정말 대단하신 분들 많은 거 같아요.. ㅎㅎ
    사실 이쪽은 1도 모르지만 그냥 인터넷 참고하면서 사이트 운영 중이거든요.
    6개월 가량을 시도하고 실패했던 다크모드를 운영자님 덕분에 성공했습니다. 너무 감사드려요 ㅎ

    이틀에 걸쳐 컬러 세팅까지 마치니 정말 만족스럽습니다 ㅋㅋㅋ

  • profile
    꿀팁관리소장 2021.05.18 08:25
    To.discord
    성공 축하드립니다. 도움이 되셨다니 다행입니다. 저도 인터넷 검색하며 사이트 운영중인 사람중 1인 입니다.
  • profile
    Superbox 2021.05.27 23:30
    엄청난 팁입니다. 잘 적용해보도록 하겠습니다. 정말 감사합니다.
  • profile
    꿀팁관리소장 2021.05.27 23:32
    To.Superbox
    성공하시면 좋겠네요.
  • profile
    Superbox 2021.06.04 22:35
    To.꿀팁관리소장
    엄청나게 감사한 팁입니다만... 제 능력부족으로 실패했습니다. ㅠㅠ
    저도 comely 사용중인데 layout.html에 스크립트를 넣고 업로드 하고 소스보기로 보면 스크립트가 보이지 않습니다. 관리자 모드로 들어가 layout 설정에서 헤더스크립트에 스크립트를 넣으면 소스보기에서 보이기는 하는데 토글 버튼이 나오질 않네요.
  • profile
    To.Superbox

    스크립트는 일단
    <!--@if(\Rhymix\Framework\UA::getColorScheme() === 'auto')-->

    <!--@endif-->

    위와 같이 조건이 작동하지 않는다면 저 조건에 감싸진 것 부터 작동을 안할겁니다.

    현재 라이믹스의 다크모드 상태가 auto 인지 체크가 안된다면 이게 왜 안되는지 부터 찾아가야합니다.

     

    레이아웃 설정 같은 곳에 넣으면 저 조건이 통하지 않기에 스크립트가 보이는 것이구요.

    사이트 설정에 다크모드 설정은 잘 하셨나요?

     

    화면 캡처 2021-06-04 224207.png

  • profile
    Superbox 2021.06.04 22:52 Files첨부 (2)
    To.꿀팁관리소장

    빠른 답변 감사합니다.
    네, 스크립트는 저 위에서 카피해서 정확히 넣고 몇 번이나 확인했습니다. info.xml 도 몇 번 확인해 봤는데 이상이 없는 것 같은데 도무지 모르겠어요.

     

    경우없는 짓이지만 설정한 파일을 첨부 했습니다.

     

    color.PNG

  • profile
    꿀팁관리소장 2021.06.04 22:53
    To.Superbox
    버전이 최신버전이 아닌거 같네요? 그렇다면 정상작동하지 않을 수 있습니다.
  • profile
    Superbox 2021.06.04 22:56
    To.꿀팁관리소장
    그렇군요. 날 잡아서 또 라이믹스 부터 업글을 해야겠네요. ㅠㅠ
    정말 감사합니다.
  • profile
    꿀팁관리소장 2021.06.04 22:57
    To.Superbox
    네. 2.0으로 가셔도 큰 문제는 안생길 겁니다. 저의 경우는 푸시앱을 사용하는 곳만 아직 1.9 버전을 유지하고 있는 상황입니다. 푸시앱이 해결이 안되서요. 다른 것은 별 문제 없을겁니다.
  • profile
    Superbox 2021.06.04 22:55
    To.꿀팁관리소장
    참 현재 라이믹스 버전이 1.9.9.9 입니다. 이 버전에서도 사용 가능한지 이걸 먼저 여쭤봤어야 했네요. 죄송합니다.
  • profile
    꿀팁관리소장 2021.06.04 22:56
    To.Superbox
    아마 안될겁니다. 라이믹스 최신버전 다크모드에 적용된 것을 다른 레이아웃에 적용하는 팁이라서요. 2.X 버전대에 사용되는 레이아웃의 기능중 일부를 이식하는거라서요.
  • profile
    Superbox 2021.06.04 22:57
    To.꿀팁관리소장
    네, 감사합니다. ^^
  • profile
    Superbox 2021.06.09 21:55
    To.꿀팁관리소장
    라이믹스 2.0.11로 업데잇하고 드디어 성공했습니다. 다시 한번 감사의 말씀 드립니다. ^^
  • profile
    꿀팁관리소장 2021.06.09 21:57
    To.Superbox
    축하드립니다. 라이믹스2.0 이라고 적힌 부분을 좀더 크게 해 놓았네요.
    라이믹스2.0에서 지원되는 다크모드 기능은 정말 최고에요!
  • 지구침략자 2021.07.02 13:07
    도전~~~~~~~^^
  • profile
    꿀팁관리소장 2021.07.02 13:09
    To.지구침략자
    성공 하시길 바래요.
  • j
    jaemoya 2021.10.11 16:54
    어려워 보이는데 도전해보렵니다.ㅎ
  • profile
    꿀팁관리소장 2021.10.11 16:56
    To.jaemoya
    성공하시길 바랍니다~
  • 낙쑤 2021.12.20 17:13
    도전해보겠습니다!!
  • 유니 2022.02.13 12:16
    도전해보겠습니다!
  • 웅돌프 2022.03.22 23:15
    다크모드 도전~
  • 웅돌프 2022.03.24 18:12
    다크모드 적용 완료!
  • profile
    꿀팁관리소장 2022.03.24 18:13
    To.웅돌프
    수고하셨네요~
  • 팔공산 2022.04.27 09:44
    도전해 봐야 겠네요!!!
  • 팔공산 2022.04.27 11:57
    To.팔공산

    팁 감사했습니다.

     

    저 같은 경우는 css에서

    body .color_scheme_dark 는 적용이 되지를 않고 

    .color_scheme_dark만 적용이 됩니다.

    차이점이 있을가요?

     

    그리고 위젯들 까지 완벽한 다크모드를 구현할려면 손 볼때가 많군요^,^

  • profile
    꿀팁관리소장 2022.04.27 12:01
    To.팔공산

    css 에 관힌 부분은 제가 따로 조언을 드리기 어렵네요. 영향 받는 곳들이 여러곳 일테니까요.

    참고로 한가지 더 알려드리면 선언된 테마컬러를 사용하셔도 됩니다.

    ex) color : var( --color-gray-050);

    이런식으로 테마컬러를 사용하면 정의된 컬러로 출력이되고 다크모드,라이트모드에 따라 지정된 컬러로 적용됩니다.

     

    단, 이렇게 하려면 flex 레이아웃에 동봉된 base.scss 를 지금 사용하시려는 레이아웃에서 로딩해 줘야 합니다.

     

     

    :root {
      --color-primary: #247bff;
      --color-secondary: #ff3a4e;
      --color-success: #13ce66;
      --color-warning: #f7ba2a;
      --color-danger: #ff5a57;
      --color-info: #2957ff;
      --color-white: white;
      --color-black: black;
      --color-gray-050: #fefefe;
      --color-gray-100: #fdfdfd;
      --color-gray-200: #f7f8f9;
      --color-gray-300: #e9ebee;
      --color-gray-400: #c5c8ce;
      --color-gray-500: #646f7c;
      --color-gray-600: #374553;
      --color-gray-700: #28323c;
      --color-gray-800: #161d24;
      --color-background: white;
      --color-text-primary: white;
    }

    .color_scheme_dark {
      --color-white: black;
      --color-black: white;
      --color-gray-050: #17181c;
      --color-gray-100: #1e2427;
      --color-gray-200: #2e363a;
      --color-gray-300: #41474c;
      --color-gray-400: #5a6166;
      --color-gray-500: #999fa4;
      --color-gray-600: #c5c8ce;
      --color-gray-700: #f7f8f9;
      --color-gray-800: #fdfdfd;
      --color-background: #17181c;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --color-white: black;
        --color-black: white;
        --color-gray-050: #17181c;
        --color-gray-100: #1e2427;
        --color-gray-200: #2e363a;
        --color-gray-300: #41474c;
        --color-gray-400: #5a6166;
        --color-gray-500: #999fa4;
        --color-gray-600: #c5c8ce;
        --color-gray-700: #f7f8f9;
        --color-gray-800: #fdfdfd;
        --color-background: #17181c;
      }

      .color_scheme_light {
        --color-primary: #247bff;
        --color-secondary: #ff3a4e;
        --color-success: #13ce66;
        --color-warning: #f7ba2a;
        --color-danger: #ff5a57;
        --color-info: #2957ff;
        --color-white: white;
        --color-black: black;
        --color-gray-050: #fefefe;
        --color-gray-100: #fdfdfd;
        --color-gray-200: #f7f8f9;
        --color-gray-300: #e9ebee;
        --color-gray-400: #c5c8ce;
        --color-gray-500: #646f7c;
        --color-gray-600: #374553;
        --color-gray-700: #28323c;
        --color-gray-800: #161d24;
        --color-background: white;
        --color-text-primary: white;
      }
    }

     

    이정도 부분이 포함된 파일을 로딩하면 됩니다.

    https://github.com/YJSoft/rxp_flex/blob/main/assets/css/base.scss

  • profile
    꿀팁관리소장 2022.04.27 12:03
    To.팔공산
    그리고 body.color_scheme_dark 와 body .color_scheme_dark 는 전혀 다르게 적용됩니다. 이부분도 학습해 보세요.
  • 팔공산 2022.04.27 12:25
    To.꿀팁관리소장
    아~ 그렇네요.
    띄우는 것과 안 띄우는 것의 차이가 크네요.
    처음 알았습니다. 감사~~

    flex 레이아웃을 찾아 봐야겠네요.
  • 블링크 2022.05.08 10:15
    이것저것하다보니 호기심에 여기까지 왔습니다
    잘할수있겟죠? 도전!
  • a
    alrin 2022.12.29 02:13
    어렵네요 @_@
  • 웅돌프 2023.08.08 23:09
    _config.php파일 만들어서 include하면 에러가 나는데...
    도전 해보겠습니다.
  • d
    discord 2023.11.14 05:29
    오랜만에 스킨 만들면서 도전합니당

라이믹스 팁(112)

라이믹스 운영과 사용에 관한 팁을 공유 합니다.

  1. read more
  2. read more
  3. Read More
  4. 라이믹스 읽지 않은 쪽지(새쪽지) 표시해 주기 7

    Date2022.05.01 Category기능 Views508 Votes3
    Read More
  5. Read More
  6. 라이믹스 게시판 목록에서 문서의 태그 출력해 주기 10

    Date2022.01.30 Category기능 Views2580 Votes5
    Read More
  7. Read More
  8. 라이믹스 설문조사 비회원참여를 막는 방법 2

    Date2021.12.05 Category기능 Views171 Votes2
    Read More
  9. 쿠키를 이용한 목록 스타일 변경 제공하기 1

    Date2021.11.20 Category기능 Views182 Votes4
    Read More
  10. Read More
  11. Read More
  12. 현재 읽고 있는 글의 목록 위치로 바로 가기 만들기 6

    Date2021.10.28 Category기능 Views183 Votes2
    Read More
  13. Read More
  14. Read More
  15. Read More
  16. Read More
  17. Read More
  18. Read More
  19. Read More
  20. Read More
  21. Read More
  22. Read More
Prev 1 2 3 4 Next
/ 4