Dometrain.com fix: add light theme and ipad-friendly view

I prefer light themes for long learning/coding sessions.

Dometrain.com is a great though a bit outdated resource to learn .net/c# among other things. I have a pro sub.

Lack of light theme

I have requested them several times to add a light theme, but the requests remain unaswered. They have one light theme in the in-built vs code snippet which I use, but it creates a contrast with the rest of the content. With this selection it looks like this:

Fix

This adds light theme to all content except the editor and aligns left and right content equally.

Create a new bookmark called Dometrain Fix to toggle light theme on or off and add this code as url.

Bookmark's url shall have this format:
javascript:(function(){<javascript>})();void 0;

javascript:
(function() {
  var m = document.querySelector('.challenge-main');
  var e = document.getElementById('hc');
    if (e) {
      e.remove();
      if (m) m.style.gridTemplateColumns = '';
      return
    }
  var t = document.createElement('style');
  t.id = 'hc';
  t.textContent = `
  .lesson-viewer *:not(#editor-container):not(#editor-container *):not(pre):not(pre *):not(.test-case-icon){
    color: #000 !important;
    background: rgb(237 241 242) !important;
    border-color: #999 !important
  }
  html,body,*{
    scrollbar-color: #999 rgb(237 241 242) !important
  }
  ::-webkit-scrollbar-thumb{
    background: #999 !important
  }
  ::-webkit-scrollbar-track{
    background: rgb(237 241 242)!important
  }`;
  document.head.appendChild(t);
  if (m) m.style.gridTemplateColumns = '50fr 6px 50fr'
})();void 0;

Adding also CSS prettified from the above snippet.

.lesson-viewer *:not(#editor-container):not(#editor-container *):not(pre):not(pre *):not(.test-case-icon){
  color: #000 !important;
  background: rgb(237 241 242) !important;
  border-color: #999 !important
}
html,body,*{
  scrollbar-color: #999 rgb(237 241 242) !important
}
::-webkit-scrollbar-thumb{
  background: #999 !important
}
::-webkit-scrollbar-track{
  background: rgb(237 241 242)!important
}

iPad is useless

You cannot use it on ipad if you want just to read content or watch videos due to a min-screen size limitation:

Fix

Adds both light theme and fixes the size issue removing some top buttons.

javascript: (function() {
  var m = document.querySelector('.challenge-main');
  var e = document.getElementById('nomob');
  if (e) {
    e.remove();
    if (m)
      m.style.gridTemplateColumns = '';
      return
  }
  var t = document.createElement('style');
  t.id = 'nomob';
  t.textContent = '.challenge-container{display:block!important}.exercise-mobile-warning{display:none!important}.panel-header{display:none!important}.lesson-title-section{display:none!important}.progression-display{display:none!important}.content-header{padding:0!important}.header-actions{padding:0!important;margin:0!important}.instructions-panel{max-height:none!important;height:auto!important}.instructions-content{overscroll-behavior:auto!important;overflow:visible!important;max-height:none!important}.lesson-viewer *:not(#editor-container):not(#editor-container *):not(pre):not(pre *){color:#000!important;background:rgb(237 241 242)!important;border-color:#999!important}html,body,*{scrollbar-color:#999 rgb(237 241 242)!important}::-webkit-scrollbar-thumb{background:#999!important}::-webkit-scrollbar-track{background:rgb(237 241 242)!important}';
  document.head.appendChild(t);
  if (m)
    m.style.gridTemplateColumns = '1fr 0 0'
})();void 0;

Fix layout 50|50

This short one fixes layout as switching lessons resets it to 60|40.

javascript:document.querySelector('.challenge-main').style.gridTemplateColumns='50fr 6px 50fr';void 0;

Comments

[오피셜메일]

장시간 학습에서 라이트 테마 필요성과 iPad 최소 화면 제한을 각각 북마클릿으로 해결한 구성이 실용적입니다. 특히 editor-container와 pre를 예외 처리해 코드 가독성을 지킨 점이 좋네요. Dometrain이 네이티브로 지원하기 전까지는 사용자 CSS 범위를 버전별로 확인하면 더 안전할 것 같습니다.