diff --git a/stylesheets/application.css b/stylesheets/application.css
index 576beab..b3a8e59 100644
--- a/stylesheets/application.css
+++ b/stylesheets/application.css
@@ -1,23 +1,19 @@
 @import url(../../../stylesheets/application.css);
 
 /*
- * color: #2A5685 -> #0c4d7f;
+ * This theme uses CSS variables defined in open-color.css (Redmine 7.0+).
+ * The second argument of var() specifies fallback values for older versions
+ * of Redmine that do not include open-color.css.
  *
- * color: #444 -> #222;
- * color: #555 -> #333;
- * color: #484848 -> #222;
- * color: #666 -> #484848;
- * color: #777 -> #484848;
- * color: #808080 -> #484848;
- * color: #999 -> #666;
- *
- * opacity: 0.4 -> 0.7;
+ * Example:
+ *   color: var(--oc-gray-9, #212529);
+ *   ↑ Uses #212529 as fallback for Redmine < 7.0.
  *
+ * TODO: Remove these fallback values after Redmine 6.x reaches EOL.
  */
 
 body {
   font-family: Meiryo, "Hiragino Kaku Gothic Pro", "MS PGothic", Verdana, sans-serif;
-  color: #222;
 }
 
 h1, h2, h3, h4 {
@@ -29,15 +25,11 @@ h1, h2, h3, h4 {
 }
 
 #content h1, h2, h3, h4 {
-  color: #222;
-}
-
-#sidebar h3 {
-  color: #484848
+  color: var(--oc-gray-9, #212529); /* Initial value is fallbak for Redmine < 7.0 */
 }
 
 #main-menu li a.selected, #main-menu li a.selected:hover {
-  color: #222;
+  color: var(--oc-gray-9, #212529);
   box-shadow: 3px -2px 2px rgba(0, 0, 0, 0.1);
 }
 
@@ -199,20 +191,16 @@ tr.priority-lowest a {
   color: #559
 }
 
-#watchers a.delete {
-  opacity: 0.7
-}
-
 .box {
-  color: #222;
+  color: var(--oc-gray-9, #212529);
 }
 
 .issue .contextual {
   margin: 0;
   padding: 2px 3px;
   border-radius: 3px;
-  background: #fffff2;
-  border: 1px solid #e6e6cf;
+  background: rgba(var(--oc-white-rgb, 255, 255, 255), 0.8);
+  border: 1px solid var(--oc-gray-4, #ced4da);
 }
 
 /* proportional でない場合にフォントを変更 */
@@ -224,10 +212,6 @@ textarea.wiki-edit {
   font-size: 0.875rem;
 }
 
-div.issue {
-  background-color: #ffffe6; /* HSV(60,10,100) */
-}
-
 div.issue div.subject p {
   color: #666
 }
@@ -236,16 +220,8 @@ div.issue .next-prev-links {
   color:#666;
 }
 
-div#activity dt .time {
-  color: #484848
-}
-
 div#activity dd span.description, #search-results dd span.description {
-  color: #484848
-}
-
-table#time-report tbody tr {
-  color: #484848
+  color: var(--oc-gray-7, #495057);
 }
 
 form .attributes {
@@ -266,7 +242,7 @@ ul.projects div.root a.project {
 }
 
 p.other-formats {
-  color: #484848;
+  color: var(--oc-gray-7, #495057);
 }
 
 /***** Wiki *****/
@@ -286,11 +262,11 @@ div.wiki li {
 
 /***** My page layout *****/
 .mypage-box {
-  color:#222;
+  color: var(--oc-gray-9, #212529);
 }
 
 #top-menu #loggedas {
-    color: #ccc;
+  color: var(--oc-gray-4, #ced4da);
 }
 
 #login-form input#username, #login-form input#password {
@@ -333,8 +309,8 @@ div.projects.box > ul > li > a {
 
 /* journal */
 div.journal-content ul.journal-details {
-  color: #444;
-  background: #f8f9fa;
+  color: var(--oc-gray-7, #495057);
+  background: var(--oc-gray-0, #f8f9fa);
   border-radius: 3px;
   padding-top: 3px;
   padding-bottom: 3px;
@@ -358,7 +334,7 @@ body.controller-news.action-index h3 {
 
 body.controller-news.action-index .author {
   margin-top: 0;
-  border-bottom: 1px dotted #BBBBBB;
+  border-bottom: 1px dotted var(--oc-gray-4, #ced4da);
 }
 
 body.controller-news.action-index .wiki {