로그인

검색

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

라이믹스로 커뮤니티 사이트를 운영하는 비개발자 운영자 입니다.

커뮤니티를 운영하면서 필요한 간단한 것을 만들고 공유하고 운영에 필요한 노하우나 기술을 공유합니다.

하지만 따로 의뢰를 받거나 하지 않으니 문의 등을 하실 필요는 없습니다.

Atachment
첨부 '0'

라이믹스 팁(76)

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

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

    Date2021.05.11 Category기능 Views54 Votes0
    Read More
  15. Read More
  16. Read More
  17. Read More
  18. 신규 회원 가입 사실만 메일로 전달 받고 싶을때

    Date2021.05.06 Category기능 Views45 Votes0
    Read More
  19. Read More
  20. Read More
  21. 스케치북5 스킨 검색어 하이라이트 효과 주기

    Date2021.05.02 Category기능 Views52 Votes0
    Read More
  22. Read More
  23. Read More
  24. 댓글 주소 클립보드에 복사하는 기능 추가하기 10

    Date2021.04.25 Category기능 Views46 Votes0
    Read More
  25. Read More
  26. Read More
  27. Read More
  28. 스케치북 빵조각 '메뉴 아이콘' 적용해 보았습니다.

    Date2021.04.21 Category기능 Views34 Votes0
    Read More
  29. Read More
  30. 본문 게시글 주소 복사 버튼 여러곳에 추가해 주기 17

    Date2021.04.10 Category기능 Views49 Votes0
    Read More
  31. input 입력창 크기가 작거나 이상한가요? css box-sizing

    Date2021.04.09 Category기타 Views43 Votes0
    Read More
  32. 본문 게시글 주소 클립보드 복사 기능 만들기 8

    Date2021.04.06 Category기능 Views73 Votes0
    Read More
Board Pagination Prev 1 2 3 Next
/ 3