diff --git a/judgels-client/src/components/Card/Card.scss b/judgels-client/src/components/Card/Card.scss
index b424a9384..ce4f9f880 100644
--- a/judgels-client/src/components/Card/Card.scss
+++ b/judgels-client/src/components/Card/Card.scss
@@ -25,11 +25,3 @@
   margin-bottom: 10px;
   overflow-x: auto;
 }
-
-.bp5-dark .bp5-card {
-  background-color: #30404d;
-  box-shadow:
-    0 0 0 1px rgba(16, 22, 26, 0.4),
-    0 0 0 rgba(16, 22, 26, 0),
-    0 0 0 rgba(16, 22, 26, 0);
-}
diff --git a/judgels-client/src/components/ClarificationFilterWidget/ClarificationFilterForm.scss b/judgels-client/src/components/ClarificationFilterWidget/ClarificationFilterForm.scss
index 5ad01309d..6f22ee517 100644
--- a/judgels-client/src/components/ClarificationFilterWidget/ClarificationFilterForm.scss
+++ b/judgels-client/src/components/ClarificationFilterWidget/ClarificationFilterForm.scss
@@ -8,13 +8,15 @@
 
   .form-status {
     float: right;
+
     label {
       float: left;
       width: initial;
       line-height: 30px;
       margin-right: 5px;
     }
-    .form-group-select {
+
+    .form-group__select {
       float: left;
       width: initial;
     }
@@ -22,6 +24,5 @@
 
   button {
     float: right;
-    margin-left: 5px;
   }
 }
diff --git a/judgels-client/src/components/ContentCard/ContentCard.scss b/judgels-client/src/components/ContentCard/ContentCard.scss
index aca1449fa..5d62211fe 100644
--- a/judgels-client/src/components/ContentCard/ContentCard.scss
+++ b/judgels-client/src/components/ContentCard/ContentCard.scss
@@ -5,15 +5,15 @@
   margin-bottom: 10px;
   overflow: auto;
 
+  .bp5-dark & {
+    box-shadow: 0 0 0 0.5px $dark-secondary-background-color !important;
+  }
+
   h3 {
     margin-bottom: 5px;
   }
 }
 
-.bp5-dark .content-card {
-  box-shadow: 0 0 0 0.5px #5c7080 !important;
-}
-
 .content-card__section {
   margin-bottom: 15px;
 }
diff --git a/judgels-client/src/components/ContentCardLink/ContentCardLink.scss b/judgels-client/src/components/ContentCardLink/ContentCardLink.scss
index 49a8ed31f..39dbef728 100644
--- a/judgels-client/src/components/ContentCardLink/ContentCardLink.scss
+++ b/judgels-client/src/components/ContentCardLink/ContentCardLink.scss
@@ -10,14 +10,14 @@
 .content-card-link:hover {
   cursor: pointer;
   text-decoration: none;
-}
 
-.bp5-light .content-card-link:hover {
-  background-color: $secondary-background-color;
-}
+  .bp5-light & {
+    background-color: $secondary-background-color;
+  }
 
-.bp5-dark .content-card-link:hover {
-  background-color: $dark-secondary-background-color;
+  .bp5-dark & {
+    background-color: $dark-secondary-background-color;
+  }
 }
 
 .content-card-link__content {
diff --git a/judgels-client/src/components/Header/Header.scss b/judgels-client/src/components/Header/Header.scss
index 3940f9e15..e32126f88 100644
--- a/judgels-client/src/components/Header/Header.scss
+++ b/judgels-client/src/components/Header/Header.scss
@@ -2,32 +2,32 @@
 
 .header {
   height: 50px;
-}
+  color: white;
 
-.bp5-light .header {
-  background-color: $primary-color !important;
-  height: 50px;
-}
+  .bp5-light & {
+    background-color: $primary-color !important;
+    height: 50px;
+  }
 
-.bp5-dark .header {
-  color: $dark-text-color !important;
-  background-color: $dark-blue-main-background-color !important;
-  box-shadow:
-    0 0 0 1px rgba(17, 20, 24, 0.1),
-    0 1px 1px rgba(17, 20, 24, 0.2);
-}
+  .bp5-dark & {
+    color: $dark-text-color !important;
+    background-color: $dark-blue-main-background-color !important;
+    box-shadow:
+      0 0 0 1px rgba(17, 20, 24, 0.1),
+      0 1px 1px rgba(17, 20, 24, 0.2);
+  }
 
-.bp5-dark .header a {
-  color: $dark-text-color !important;
-}
+  a {
+    color: white;
 
-.header,
-.header a {
-  color: white;
-}
+    .bp5-dark & {
+      color: $dark-text-color !important;
+    }
 
-.header a:hover {
-  text-decoration: none;
+    &:hover {
+      text-decoration: none;
+    }
+  }
 }
 
 .header__wrapper {
diff --git a/judgels-client/src/components/HtmlText/HtmlText.scss b/judgels-client/src/components/HtmlText/HtmlText.scss
index 5d5d2fd5b..18c0dff5f 100644
--- a/judgels-client/src/components/HtmlText/HtmlText.scss
+++ b/judgels-client/src/components/HtmlText/HtmlText.scss
@@ -47,30 +47,27 @@
     cursor: pointer;
     font-family: $accent-font;
     font-weight: bold;
-  }
 
-  .spoiler:hover {
-    background-color: #e7e7e7;
-  }
+    .bp5-dark & {
+      background-color: $dark-secondary-background-color;
+    }
 
-  .spoiler .spoiler-content {
-    display: none;
-    border-top: 1px solid;
-    margin-top: 5px;
-    padding-top: 15px;
-    font-family: $primary-font;
-    font-style: normal;
-    font-weight: normal;
-  }
-}
+    &:hover {
+      background-color: #e7e7e7;
 
-.bp5-dark .html-text {
-  .spoiler {
-    background-color: #5c7080;
-    border: 2px dashed $gray5;
-  }
+      .bp5-dark & {
+        background-color: $dark-background-color;
+      }
+    }
 
-  .spoiler:hover {
-    background-color: $dark-background-color;
+    .spoiler-content {
+      display: none;
+      border-top: 1px solid;
+      margin-top: 5px;
+      padding-top: 15px;
+      font-family: $primary-font;
+      font-style: normal;
+      font-weight: normal;
+    }
   }
 }
diff --git a/judgels-client/src/components/ProblemWorksheetCard/Programming/ProblemStatementCard/ProblemStatementCard.jsx b/judgels-client/src/components/ProblemWorksheetCard/Programming/ProblemStatementCard/ProblemStatementCard.jsx
index 583f1399f..76b09f541 100644
--- a/judgels-client/src/components/ProblemWorksheetCard/Programming/ProblemStatementCard/ProblemStatementCard.jsx
+++ b/judgels-client/src/components/ProblemWorksheetCard/Programming/ProblemStatementCard/ProblemStatementCard.jsx
@@ -32,7 +32,7 @@ export function ProblemStatementCard({ alias, statement: { title, text }, limits
         {alias ? `${alias}. ` : ''}
         {title}
       </h2>
-      <HTMLTable condensed className="programming-problem-statement__limits">
+      <HTMLTable compact className="programming-problem-statement__limits">
         <tbody>
           <tr>
             <td>Time limit</td>
diff --git a/judgels-client/src/components/Sidebar/Sidebar.scss b/judgels-client/src/components/Sidebar/Sidebar.scss
index 149137f38..b51d36864 100644
--- a/judgels-client/src/components/Sidebar/Sidebar.scss
+++ b/judgels-client/src/components/Sidebar/Sidebar.scss
@@ -21,26 +21,68 @@
 
   .bp5-tab-indicator {
     border-radius: 0 !important;
-  }
 
-  .bp5-tab {
-    a {
-      width: 100%;
+    .bp5-light & {
+      background-color: $secondary-background-color !important;
+      border-left: 3px solid $primary-color;
+    }
+
+    .bp5-dark & {
+      background-color: $dark-secondary-background-color !important;
+      border-left: 3px solid $gray3;
     }
+  }
 
+  .bp5-tab {
     position: relative;
     padding-left: 20px !important;
     line-height: 50px;
     height: 50px;
-  }
 
-  .bp5-tab[aria-selected='true'] {
-    font-weight: bold;
+    &:hover {
+      .bp5-light & {
+        background-color: $tertiary-background-color !important;
+      }
+
+      .bp5-dark & {
+        background-color: $dark-tertiary-background-color !important;
+      }
+    }
+
+    &[aria-selected='true'] {
+      font-weight: bold;
+
+      .bp5-light & {
+        color: $text-color;
+      }
+
+      .bp5-dark & {
+        color: inherit;
+      }
+    }
+
+    &[aria-selected='false'] {
+      .bp5-light & {
+        color: $primary-color;
+      }
+    }
+
+    a {
+      width: 100%;
+
+      .bp5-dark & {
+        color: $dark-text-color !important;
+      }
+    }
   }
 }
 
 .card-sidebar__arrow {
   float: right;
+
+  .bp5-light & {
+    color: $primary-color !important;
+  }
 }
 
 .card-sidebar__full {
@@ -72,45 +114,3 @@
     }
   }
 }
-
-.bp5-light .card-sidebar {
-  .card-sidebar__arrow {
-    color: $primary-color !important;
-  }
-
-  .bp5-tab-indicator {
-    background-color: $secondary-background-color !important;
-    border-left: 3px solid $primary-color;
-  }
-
-  .bp5-tab:hover {
-    background-color: $tertiary-background-color !important;
-  }
-
-  .bp5-tab[aria-selected='true'] {
-    color: $text-color;
-  }
-
-  .bp5-tab[aria-selected='false'] {
-    color: $primary-color;
-  }
-}
-
-.bp5-dark .card-sidebar {
-  .bp5-tab a {
-    color: $dark-text-color !important;
-  }
-
-  .bp5-tab[aria-selected='true'] {
-    color: inherit;
-  }
-
-  .bp5-tab-indicator {
-    background-color: $dark-secondary-background-color !important;
-    border-left: 3px solid $gray3;
-  }
-
-  .bp5-tab:hover {
-    background-color: $dark-tertiary-background-color !important;
-  }
-}
diff --git a/judgels-client/src/components/SourceCode/SourceCode.scss b/judgels-client/src/components/SourceCode/SourceCode.scss
index b9179bb68..9c59962f2 100644
--- a/judgels-client/src/components/SourceCode/SourceCode.scss
+++ b/judgels-client/src/components/SourceCode/SourceCode.scss
@@ -3,9 +3,9 @@
 pre.source-code {
   border-color: #cccccc;
   background-color: #f5f5f5 !important;
-}
 
-.bp5-dark pre.source-code {
-  border-color: #202b33;
-  background-color: #293742 !important;
+  .bp5-dark & {
+    border-color: #202b33;
+    background-color: #293742 !important;
+  }
 }
diff --git a/judgels-client/src/components/SubmissionFilterWidget/SubmissionFilterForm.scss b/judgels-client/src/components/SubmissionFilterWidget/SubmissionFilterForm.scss
index fbfa581d8..564b676dd 100644
--- a/judgels-client/src/components/SubmissionFilterWidget/SubmissionFilterForm.scss
+++ b/judgels-client/src/components/SubmissionFilterWidget/SubmissionFilterForm.scss
@@ -16,13 +16,15 @@
   .form-username,
   .form-problem-alias {
     float: right;
+
     label {
       float: left;
       width: initial;
       line-height: 30px;
       margin-right: 5px;
     }
-    .form-group-select {
+
+    .form-group__select {
       float: left;
       width: initial;
     }
diff --git a/judgels-client/src/components/UserWidget/UserWidget.scss b/judgels-client/src/components/UserWidget/UserWidget.scss
index 11cb3d4bd..e92cd80e3 100644
--- a/judgels-client/src/components/UserWidget/UserWidget.scss
+++ b/judgels-client/src/components/UserWidget/UserWidget.scss
@@ -8,6 +8,14 @@
   line-height: 30px;
   vertical-align: middle !important;
 
+  .bp5-light & {
+    background-color: #f4f5f6;
+  }
+
+  .bp5-dark & {
+    background-color: $dark-background-color;
+  }
+
   svg {
     vertical-align: middle !important;
   }
@@ -18,14 +26,6 @@
   color: inherit;
 }
 
-.bp5-light .widget-user__profile {
-  background-color: #f4f5f6;
-}
-
-.bp5-dark .widget-user__profile {
-  background-color: $dark-background-color;
-}
-
 .widget-user__avatar-wrapper {
   height: 60px;
   padding-top: 10px;
diff --git a/judgels-client/src/routes/contests/contests/single/components/ContestEditDialog/ContestEditDialog.scss b/judgels-client/src/routes/contests/contests/single/components/ContestEditDialog/ContestEditDialog.scss
index 485e834d4..4ab6b5bdc 100644
--- a/judgels-client/src/routes/contests/contests/single/components/ContestEditDialog/ContestEditDialog.scss
+++ b/judgels-client/src/routes/contests/contests/single/components/ContestEditDialog/ContestEditDialog.scss
@@ -29,32 +29,54 @@
     padding-left: 20px !important;
     line-height: 40px;
     height: 40px;
-  }
 
-  .bp5-tab span:first-child {
-    width: 100%;
-  }
+    &[aria-selected='true'] {
+      left: -3px;
+      border-radius: 0 !important;
+      font-weight: bold;
+
+      .bp5-light & {
+        background-color: white !important;
+        border-left: 3px solid $primary-color;
+        color: $text-color;
+      }
+
+      .bp5-dark & {
+        color: inherit !important;
+        background-color: $dark-secondary-background-color !important;
+        border-left: 3px solid $gray3;
+      }
+
+      svg {
+        display: initial;
+        height: 40px;
+      }
+    }
 
-  .bp5-tab[aria-selected='true'] {
-    left: -3px;
-    border-radius: 0 !important;
-    font-weight: bold;
+    &[aria-selected='false'] {
+      svg {
+        display: none;
+      }
+    }
 
-    svg {
-      display: initial;
-      height: 40px;
+    &:not([aria-disabled='true']):hover {
+      .bp5-dark & {
+        color: #48aff0;
+      }
     }
   }
 
-  .bp5-tab[aria-selected='false'] {
-    svg {
-      display: none;
-    }
+  .bp5-tab span:first-child {
+    width: 100%;
   }
 
   .contest-edit-dialog__arrow {
     line-height: 0 !important;
     float: right;
+
+    .bp5-light & {
+      color: $primary-color !important;
+    }
   }
 
   .right-action-button {
@@ -108,23 +130,3 @@
     max-height: 460px;
   }
 }
-
-.bp5-light .contest-edit-dialog {
-  .contest-edit-dialog__arrow {
-    color: $primary-color !important;
-  }
-
-  .bp5-tab[aria-selected='true'] {
-    background-color: white !important;
-    border-left: 3px solid $primary-color;
-    color: $text-color;
-  }
-}
-
-.bp5-dark .contest-edit-dialog {
-  .bp5-tab[aria-selected='true'] {
-    color: inherit !important;
-    background-color: $dark-secondary-background-color !important;
-    border-left: 3px solid $gray3;
-  }
-}
diff --git a/judgels-client/src/routes/courses/courses/single/CourseChaptersSidebar/CourseChaptersSidebar.scss b/judgels-client/src/routes/courses/courses/single/CourseChaptersSidebar/CourseChaptersSidebar.scss
index 0e1d92263..58c1c5b96 100644
--- a/judgels-client/src/routes/courses/courses/single/CourseChaptersSidebar/CourseChaptersSidebar.scss
+++ b/judgels-client/src/routes/courses/courses/single/CourseChaptersSidebar/CourseChaptersSidebar.scss
@@ -10,6 +10,10 @@
   box-shadow: none !important;
   transition: flex-grow 0.2s ease-in-out;
 
+  .bp5-dark & {
+    border-color: $dark-border-color;
+  }
+
   hr {
     margin: 0 !important;
   }
@@ -35,13 +39,29 @@ a.course-chapters-sidebar__item {
     color: inherit;
     background-color: $tertiary-background-color;
     border-radius: 3px;
+
+    .bp5-dark & {
+      background-color: $dark-tertiary-background-color;
+    }
+
+    .bp5-dark &.course-chapters-sidebar__item--selected {
+      background-color: $dark-secondary-background-color;
+    }
   }
 
   &--future {
     color: #bcc0c2;
 
+    .bp5-dark & {
+      color: #5d6c79;
+    }
+
     .bp5-tag {
       background-color: #ced4d8;
+
+      .bp5-dark & {
+        background-color: #5f6d79;
+      }
     }
   }
 
@@ -49,6 +69,11 @@ a.course-chapters-sidebar__item {
     color: inherit;
     background-color: $tertiary-background-color;
     border-radius: 3px;
+
+    .bp5-dark & {
+      color: inherit;
+      background-color: $dark-secondary-background-color;
+    }
   }
 }
 
@@ -62,35 +87,6 @@ a.course-chapters-sidebar__item {
   }
 }
 
-.bp5-dark {
-  .course-chapters-sidebar {
-    border-color: $dark-border-color;
-  }
-
-  a.course-chapters-sidebar__item {
-    &:hover {
-      background-color: $dark-tertiary-background-color;
-    }
-
-    &--future {
-      color: #5d6c79;
-
-      .bp5-tag {
-        background-color: #5f6d79;
-      }
-    }
-
-    &--selected {
-      color: inherit;
-      background-color: $dark-secondary-background-color;
-    }
-  }
-
-  a.course-chapters-sidebar__item:hover.course-chapters-sidebar__item--selected {
-    background-color: $dark-secondary-background-color;
-  }
-}
-
 @media only screen and (max-width: 750px) {
   .course-chapters-sidebar {
     &__full {
diff --git a/judgels-client/src/routes/courses/courses/single/chapters/single/resources/ChapterProblemCard/ChapterProblemCard.scss b/judgels-client/src/routes/courses/courses/single/chapters/single/resources/ChapterProblemCard/ChapterProblemCard.scss
index 72c2112fa..09f9eeff1 100644
--- a/judgels-client/src/routes/courses/courses/single/chapters/single/resources/ChapterProblemCard/ChapterProblemCard.scss
+++ b/judgels-client/src/routes/courses/courses/single/chapters/single/resources/ChapterProblemCard/ChapterProblemCard.scss
@@ -24,35 +24,25 @@
   &--future {
     background-color: inherit;
 
-    a h4,
+    h4,
     .chapter-problem-card__heading > .bp5-icon {
       font-weight: normal !important;
       color: #bcc0c2;
-    }
 
-    a:hover h4,
-    a:hover .chapter-problem-card__heading > .bp5-icon {
-      color: inherit !important;
+      .bp5-dark & {
+        color: #5d6c79;
+      }
+
+      a:hover & {
+        color: inherit !important;
+        font-weight: inherit !important;
+      }
     }
 
     .bp5-tag {
       background-color: #ced4d8;
-    }
-  }
-}
-
-.bp5-dark {
-  .chapter-problem-card {
-    &--future {
-      background-color: inherit;
-
-      a h4,
-      .chapter-problem-card__heading > .bp5-icon {
-        font-weight: normal !important;
-        color: #5d6c79;
-      }
 
-      .bp5-tag {
+      .bp5-dark & {
         background-color: #5f6d79;
       }
     }
diff --git a/judgels-client/src/routes/home/HomePage/HomePage.scss b/judgels-client/src/routes/home/HomePage/HomePage.scss
index e8c80be8c..709fdc335 100644
--- a/judgels-client/src/routes/home/HomePage/HomePage.scss
+++ b/judgels-client/src/routes/home/HomePage/HomePage.scss
@@ -4,14 +4,14 @@
   margin: -35px -10px 20px -10px;
   padding-top: 40px;
   padding-bottom: 20px;
-}
 
-.bp5-light .home-banner {
-  background-color: $primary-color;
-}
+  .bp5-light & {
+    background-color: $primary-color;
+  }
 
-.bp5-dark .home-banner {
-  background-color: rgba(19, 124, 189, 0.25);
+  .bp5-dark & {
+    background-color: rgba(19, 124, 189, 0.25);
+  }
 }
 
 .home-banner__contents {
@@ -21,6 +21,10 @@
 
 .home-banner__text {
   color: white !important;
+
+  .bp5-dark & {
+    color: $dark-text-color !important;
+  }
 }
 
 .home-banner__title {
@@ -44,10 +48,6 @@
   margin-bottom: 5px !important;
 }
 
-.bp5-dark .home-banner__text {
-  color: $dark-text-color !important;
-}
-
 .home-banner__buttons {
   margin-top: 20px;
 }
diff --git a/judgels-client/src/styles/_ratings.scss b/judgels-client/src/styles/_ratings.scss
index 19b38535d..744cc3de2 100644
--- a/judgels-client/src/styles/_ratings.scss
+++ b/judgels-client/src/styles/_ratings.scss
@@ -1,59 +1,63 @@
 .rating-unrated {
   color: #252527 !important;
   font-weight: 600;
-}
 
-.bp5-dark .rating-unrated {
-  color: #f5f8fa !important;
+  .bp5-dark & {
+    color: #f5f8fa !important;
+  }
 }
 
 .rating-gray {
   color: #b7b7b7 !important;
   font-weight: bold;
-}
 
-.bp5-dark .rating-gray {
-  color: #738694 !important;
+  .bp5-dark & {
+    color: #738694 !important;
+  }
 }
 
-.rating-green,
-.bp5-dark .rating-green {
-  color: #70ad47 !important;
-  font-weight: bold;
+.rating-green {
+  &,
+  .bp5-dark & {
+    color: #70ad47 !important;
+    font-weight: bold;
+  }
 }
 
 .rating-blue {
   color: #3c78d8 !important;
   font-weight: bold;
-}
 
-.bp5-dark .rating-blue {
-  color: #39ace7 !important;
-  font-weight: bold;
+  .bp5-dark & {
+    color: #39ace7 !important;
+    font-weight: bold;
+  }
 }
 
 .rating-purple {
   color: #7030a0 !important;
   font-weight: bold;
-}
 
-.bp5-dark .rating-purple {
-  color: #cc99cd !important;
+  .bp5-dark & {
+    color: #cc99cd !important;
+  }
 }
 
-.rating-orange,
-.bp-dark .rating-orange {
-  color: #f6b26b !important;
-  font-weight: bold;
+.rating-orange {
+  &,
+  .bp-dark & {
+    color: #f6b26b !important;
+    font-weight: bold;
+  }
 }
 
 .rating-red {
   color: #ff0000 !important;
   font-weight: bold;
-}
 
-.bp5-dark .rating-red {
-  color: #ff4545 !important;
+  .bp5-dark & {
+    color: #ff4545 !important;
+  }
 }
 
 .rating-legend {
@@ -61,11 +65,10 @@
   background: linear-gradient(0deg, #bb0000 0%, #bb0000 50%, #000000 51%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
-}
 
-.bp5-dark .rating-legend {
-  font-weight: bold;
-  background: linear-gradient(0deg, #ff4545 0%, #ff4545 50%, #f5f8fa 51%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+  .bp5-dark & {
+    background: linear-gradient(0deg, #ff4545 0%, #ff4545 50%, #f5f8fa 51%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
 }
diff --git a/judgels-client/src/styles/index.scss b/judgels-client/src/styles/index.scss
index 2d8905fda..1c07ee0a6 100644
--- a/judgels-client/src/styles/index.scss
+++ b/judgels-client/src/styles/index.scss
@@ -8,30 +8,28 @@
 @import './table';
 @import './ratings';
 
-.bp5-dark,
-.bp5-dark td,
-.bp5-dark th,
-.bp5-dark table.bp5-html-table td,
-.bp5-dark table.bp5-html-table th,
-.bp5-dark label,
-.bp5-dark .bp5-control,
-.bp5-dark .bp5-dialog,
-.bp5-dark .bp5-tag.bp5-intent-primary,
-.bp5-dark .bp5-breadcrumb-current {
-  color: $dark-text-color;
-}
-
 body {
   font-family: $primary-font;
   background-color: $background-color;
-}
 
-body .bp5-dark {
-  background-color: $dark-background-color !important;
+  .bp5-dark {
+    background-color: $dark-background-color !important;
+  }
 }
 
-.secondary-info {
-  font-family: $accent-font;
+.bp5-dark {
+  &,
+  td,
+  th,
+  table.bp5-html-table td,
+  table.bp5-html-table th,
+  label,
+  .bp5-control,
+  .bp5-dialog,
+  .bp5-tag.bp5-intent-primary,
+  .bp5-breadcrumb-current {
+    color: $dark-text-color;
+  }
 }
 
 h1,
@@ -50,22 +48,22 @@ p {
 
 small {
   line-height: 14px !important;
-}
 
-.bp5-light small {
-  color: $secondary-text-color;
-}
+  .bp5-light & {
+    color: $secondary-text-color;
+  }
 
-.bp5-dark small {
-  color: $dark-secondary-text-color !important;
+  .bp5-dark & {
+    color: $dark-secondary-text-color !important;
+  }
 }
 
 strong {
   font-weight: 700;
-}
 
-.bp5-dark strong {
-  color: #eeeeee;
+  .bp5-dark & {
+    color: #eeeeee;
+  }
 }
 
 h2 {
@@ -97,26 +95,24 @@ hr {
   margin-top: 15px !important;
   margin-bottom: 15px !important;
   width: 100%;
-
   border: none;
-  border-bottom: 1px solid rgba($text-color, 0.15);
-}
 
-.bp5-light hr {
-  border-bottom: 1px solid $border-color;
-}
+  .bp5-light & {
+    border-bottom: 1px solid $border-color;
+  }
 
-.bp5-dark hr {
-  border-bottom: 1px solid $dark-border-color;
+  .bp5-dark & {
+    border-bottom: 1px solid $dark-border-color;
+  }
 }
 
 a {
   color: $primary-color;
-}
 
-.bp5-dark a,
-.bp5-dark a:hover {
-  color: #48aff0;
+  .bp5-dark &,
+  .bp5-dark &:hover {
+    color: #48aff0;
+  }
 }
 
 ol {
@@ -144,6 +140,11 @@ pre {
   background-color: #f5f5f5;
   border: 1px solid #cccccc;
   border-radius: 4px;
+
+  .bp5-dark & {
+    background-color: #293742;
+    border-color: #202b33;
+  }
 }
 
 code {
@@ -163,12 +164,6 @@ pre {
   }
 }
 
-.bp5-dark code,
-.bp5-dark pre {
-  border-color: #202b33;
-  background-color: #293742;
-}
-
 em {
   font-style: oblique;
 }
@@ -193,9 +188,11 @@ table {
   width: 100%;
 }
 
-.bp5-dark td,
-.bp5-dark th {
-  border-color: $dark-secondary-background-color !important;
+td,
+th {
+  .bp5-dark & {
+    border-color: $dark-secondary-background-color !important;
+  }
 }
 
 blockquote {
@@ -210,76 +207,140 @@ blockquote {
   margin-top: 50px;
 }
 
-.bp5-button.bp5-intent-primary,
-.bp5-tag.bp5-intent-primary {
-  background-color: $primary-color;
+.bp5-intent-primary {
+  &.bp5-button,
+  &.bp5-tag {
+    background-color: $primary-color;
+  }
 }
 
-.bp5-button.bp5-intent-warning,
-.bp5-tag.bp5-intent-warning {
-  background-color: #d9822b;
-  color: #fff !important;
+.bp5-intent-warning {
+  &.bp5-button,
+  &.bp5-tag {
+    color: #fff !important;
+    background-color: #d9822b;
+  }
 }
 
-.bp5-dark .bp5-button:not([class*='bp5-intent-']) {
-  background-color: #394b59;
-}
+.bp5-button:not([class*='bp5-intent-']) {
+  .bp5-dark & {
+    background-color: $dark-background-color;
+  }
 
-.bp5-dark .bp5-button:not([class*='bp5-intent-']).bp5-active {
-  background-color: #202b33;
-}
+  .bp5-dark &:hover {
+    background-color: $dark-tertiary-background-color;
+  }
+
+  .bp5-dark &.bp5-active {
+    background-color: #202b33;
+  }
 
-.bp5-dark .bp5-callout.bp5-intent-primary {
-  color: unset;
+  .bp5-dark &.bp5-disabled {
+    background-color: $dark-background-color;
+  }
 }
 
 .bp5-callout {
   padding: 10px 12px 9px;
-}
 
-.bp5-callout.bp5-intent-primary {
-  color: inherit;
-  background-color: rgba(19, 124, 189, 0.15);
-}
+  .bp5-dark &:not([class*='bp5-intent-']) {
+    background-color: $dark-tertiary-background-color;
+  }
 
-.bp5-callout.bp5-callout-icon > .bp5-icon:first-child {
-  top: 12px;
-}
+  &.bp5-callout-icon > .bp5-icon:first-child {
+    top: 12px;
+  }
 
-.bp5-dark .bp5-callout.bp5-intent-primary {
-  background-color: rgba(19, 124, 189, 0.25);
+  &.bp5-intent-primary {
+    color: inherit;
+    background-color: rgba(19, 124, 189, 0.15);
+
+    .bp5-dark & {
+      color: unset;
+      background-color: $dark-blue-secondary-background-color;
+    }
+  }
 }
 
 table.bp5-html-table.bp5-html-table-striped tbody tr:nth-child(odd) td {
   background-color: rgba(191, 204, 214, 0.15);
+
+  .bp5-dark & {
+    background-color: rgba(92, 112, 128, 0.15);
+  }
 }
 
-.bp5-dark table.bp5-html-table.bp5-html-table-striped tbody tr:nth-child(odd) td {
-  background-color: rgba(92, 112, 128, 0.15);
+.bp5-card {
+  .bp5-dark & {
+    background-color: $dark-card-background-color;
+    box-shadow:
+      0 0 0 1px rgba(16, 22, 26, 0.4),
+      0 0 0 rgba(16, 22, 26, 0),
+      0 0 0 rgba(16, 22, 26, 0);
+  }
 }
 
 .bp5-dialog {
   background-color: rgb(235, 241, 245);
+
+  .bp5-dark & {
+    background-color: $dark-card-background-color;
+  }
 }
 
-.bp5-dark .bp5-dialog {
-  background-color: #293742;
-  box-shadow:
-    0 0 0 1px rgba(16, 22, 26, 0.4),
-    0 0 0 rgba(16, 22, 26, 0),
-    0 0 0 rgba(16, 22, 26, 0);
+.bp5-dialog-header {
+  .bp5-dark & {
+    background-color: $dark-tertiary-background-color;
+  }
+
+  .bp5-dark & .bp5-button {
+    background-color: $dark-tertiary-background-color;
+  }
 }
 
-.bp5-dark .bp5-dialog-header {
-  background-color: #30404d;
-  box-shadow:
-    0 0 0 1px rgba(16, 22, 26, 0.4),
-    0 0 0 rgba(16, 22, 26, 0),
-    0 0 0 rgba(16, 22, 26, 0);
+.bp5-menu {
+  .bp5-dark & {
+    background-color: $dark-background-color;
+  }
+}
+
+.bp5-menu-item.bp5-active {
+  .bp5-dark & {
+    color: inherit;
+    background-color: $dark-blue-secondary-background-color;
+  }
+}
+
+.bp5-popover {
+  .bp5-dark & {
+    box-shadow:
+      0 0 0 1px rgba(17, 20, 24, 0.1),
+      0 2px 4px rgba(17, 20, 24, 0.2),
+      0 8px 24px rgba(17, 20, 24, 0.2);
+  }
+
+  .bp5-dark & .bp5-popover-arrow-fill {
+    fill: $dark-background-color;
+  }
+
+  .bp5-dark & .bp5-popover-arrow-border {
+    fill: $dark-background-color;
+    fill-opacity: 1;
+  }
+}
+
+.bp5-file-upload-input::after {
+  .bp5-dark & {
+    background-color: $dark-background-color;
+  }
 }
 
 /* End Blueprint overrides */
 
+.secondary-info {
+  font-family: $accent-font;
+}
+
 .float-left {
   float: left;
 }
diff --git a/judgels-client/src/styles/variables/_colors.scss b/judgels-client/src/styles/variables/_colors.scss
index b962fc935..01ef8e4a2 100644
--- a/judgels-client/src/styles/variables/_colors.scss
+++ b/judgels-client/src/styles/variables/_colors.scss
@@ -11,8 +11,9 @@ $border-color: rgba($text-color, 0.15);
 $dark-background-color: #394b59;
 $dark-text-color: #c9d1d9;
 $dark-blue-main-background-color: #0c5174;
-$dark-blue-secondary-background-color: #0c5174;
+$dark-blue-secondary-background-color: rgba(19, 124, 189, 0.25);
 $dark-secondary-text-color: #abb3bf;
 $dark-secondary-background-color: #5c7080;
 $dark-tertiary-background-color: rgba(92, 112, 128, 0.3);
+$dark-card-background-color: #30404d;
 $dark-border-color: #5c7080;