로그인

검색

Extra Form
추천지수 8

저희 라이믹스 꿀팁의 레이아웃을 변경했다고 몇일 전 소식을 전해 드렸는데요. RXP FLEX 레이아웃 입니다. 원작의 버그들이 수정되고 기능이 개선되어 아주 사용하기 편리하고 빠르고 해서 좋네요.

 

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

 

특히 다크모드, 라이트모드 전환이 아주 자연스럽고 아주 깔끔하게 작동을 해서 게시판 스킨에도 CSS만 간단히 추가해서 다크모드가 지원되도록 해 보았습니다.

 

사용하시는 스킨에 따라 추가해야 할 것들이 달라지겠지만 원리는 아주 간단하네요. 실제로 해보니까 너무 간단해요 ㅋㅋ

 

 

스크린샷(163).png

 

게시판 스킨에 다크모드가 되었을때 바꾸고 싶은 요소에 .color_scheme_dark 를 추가해 주고 배경을 어두운색 글자색을 밝은색으로 해주고 나머지 어두운 배경에서 조금 바꾸고 싶은 것들을 바꿔 주면 됩니다.

 

쉽게 설명하면 

원래 글자색상이 검정색이었던 요소 .bd_zine li.notice 라고 가정을 한다면 (개발자도구로 보시면 나옵니다.) 

게시판 스킨의 css에 

 

.color_scheme_dark .bd_zine li.notice { color:#fff;}

이렇게 추가를 해주면 다크모드 전환되면 글자색이 흰색으로 바뀝니다.  배경색도 함께 검정으로 바꿔야 하는 요소라면 backgorund-color:#000 을 함께 넣어주고 분리해서 적용해야 할 것들은 따로 따로 해주면 됩니다.

 

시도하기 전에는 복잡할 것이라 생각했는데 실제 해보니 너무 간단하네요.

 

라이믹스 다크모드 기능 그리고 RXP FLEX 레이아웃이 사용하는 다크모드,라이트모드 전환하는 방식 자체가 

body 에 클래스를 color_scheme_dark 와 라이트모드일때 클래스 를 토글 해서 넣어주는 방식이라 다크모드일때만 다른 색상을 가지도록 게시판 스킨에 일부 원하는 곳에 css만 적용해 주면 되네요.

 

 

바꾸는데도 한 10-20분이면 되는 것 같습니다. 물론 앞으로 사용하면서 발견되는 부분도 있겠지만 그런 부분도 쉽게 추가해주면 되니 문제도 안될 것 같구요.

 

RXP FLEX 레이아웃 너무 좋네요. 

Who's 꿀팁관리소장

profile
라이믹스로 커뮤니티 사이트를 운영하는 비개발자 운영자 입니다.
파트너쉽 맺으실 사이트 운영자분 환영합니다.
3 추천
Atachment
첨부 '0'

라이믹스 팁(112)

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

  1. read more
  2. read more
  3. Read More
  4. Read More
  5. Read More
  6. Read More
  7. 라이믹스 회원(팝업)메뉴에 아이콘 추가해주기 2

    Date2021.05.11 Category기능 Views295 Votes3
    Read More
  8. RXP FLEX 레이아웃의 다크모드 기능 게시판에 적용하기 4

    Date2021.05.09 Category기능 Views399 Votes3
    Read More
  9. 카카오지도 마커 위치로 카카오내비 길안내 연동하기

    Date2021.05.08 Category기능 Views802 Votes3
    Read More
  10. Read More
  11. 신규 회원 가입 사실만 메일로 전달 받고 싶을때

    Date2021.05.06 Category기능 Views233 Votes3
    Read More
  12. Read More
  13. 스케치북5 스킨 검색어 하이라이트 효과 주기

    Date2021.05.02 Category기능 Views214 Votes3
    Read More
  14. 댓글 주소 클립보드에 복사하는 기능 추가하기 11

    Date2021.04.25 Category기능 Views252 Votes3
    Read More
  15. Read More
  16. 스케치북 빵조각 '메뉴 아이콘' 적용해 보았습니다.

    Date2021.04.21 Category기능 Views209 Votes3
    Read More
  17. Read More
  18. 본문 게시글 주소 복사 버튼 여러곳에 추가해 주기 20

    Date2021.04.10 Category기능 Views308 Votes3
    Read More
  19. 본문 게시글 주소 클립보드 복사 기능 만들기 23

    Date2021.04.06 Category기능 Views631 Votes3
    Read More
  20. 라이믹스 2.0 회원 서명 높이를 조절 하고 싶다면

    Date2021.03.13 Category기능 Views221 Votes5
    Read More
  21. Read More
  22. Read More
Prev 1 2 3 4 Next
/ 4