Jekyll Themes •
Last updated: January 20, 2026

Tokyo Theme Color Scheme Customization

Tokyo Jekyll Theme

Table of Contents

The Tokyo Jekyll Theme offers flexible color customization options. This guide explains how to modify the color scheme to match your brand identity.

Color Configuration Files

The theme’s colors are managed in several CSS files:

  • assets/css/colors.css - Main color variables
  • assets/css/dark.css - Dark mode specific colors
  • assets/css/style.css - Global styles

Primary Color Variables

Open assets/css/colors.css to view and modify the main color variables:

:root {
    /* Primary Colors */
    --primary-color: #f75023;
    --primary-color-hover: #d63500;
    
    /* Text Colors */
    --text-color: #767676;
    --heading-color: #000;
    
    /* Background Colors */
    --bg-color: #fff;
    --bg-secondary: #f9f9f9;
    
    /* Border Colors */
    --border-color: #e5e5e5;
    
    /* Social Media Colors */
    --facebook-color: #3b5998;
    --twitter-color: #1da1f2;
    --instagram-color: #e1306c;
    --dribbble-color: #ea4c89;
    --tiktok-color: #000000;
}

Customizing Primary Colors

Changing the Primary Color

The primary color is used throughout the theme for:

  • Navigation active states
  • Buttons
  • Links
  • Progress bars
  • Accent elements

To change the primary color:

:root {
    --primary-color: #your-color-here;
    --primary-color-hover: #your-hover-color-here;
}

Example - Blue Theme:

:root {
    --primary-color: #007bff;
    --primary-color-hover: #0056b3;
}

Example - Green Theme:

:root {
    --primary-color: #28a745;
    --primary-color-hover: #1e7e34;
}

Example - Purple Theme:

:root {
    --primary-color: #6f42c1;
    --primary-color-hover: #5a32a3;
}

Text Color Customization

Heading Colors

:root {
    --heading-color: #000;  /* Main headings */
}

Body Text Colors

:root {
    --text-color: #767676;  /* Body text */
}

Custom Text Colors

You can add custom text color variables:

:root {
    --text-color: #767676;
    --text-color-light: #999;
    --text-color-dark: #333;
}

Background Color Customization

Main Background

:root {
    --bg-color: #fff;  /* Main background */
}

Secondary Background

:root {
    --bg-secondary: #f9f9f9;  /* Secondary sections */
}

Custom Background Colors

:root {
    --bg-color: #fff;
    --bg-secondary: #f9f9f9;
    --bg-dark: #1a1a1a;
    --bg-light: #f5f5f5;
}

Dark Mode Customization

The Tokyo theme includes a dark mode feature. Dark mode colors are defined in assets/css/dark.css.

Dark Mode Color Variables

.dark {
    --primary-color: #f75023;
    --primary-color-hover: #d63500;
    
    --text-color: #a0a0a0;
    --heading-color: #fff;
    
    --bg-color: #1a1a1a;
    --bg-secondary: #252525;
    
    --border-color: #333;
}

Customizing Dark Mode

To create a custom dark mode color scheme:

.dark {
    --primary-color: #f75023;
    --primary-color-hover: #d63500;
    
    --text-color: #b0b0b0;
    --heading-color: #ffffff;
    
    --bg-color: #0d0d0d;
    --bg-secondary: #1a1a1a;
    
    --border-color: #2a2a2a;
}

Section-Specific Colors

The navigation colors are controlled by CSS classes. To customize:

/* Navigation Links */
.menu ul li a {
    color: #000;
}

.menu ul li.active a {
    color: var(--primary-color);
}

.menu ul li a:hover {
    color: var(--primary-color);
}

Portfolio Colors

Portfolio item hover effects:

.portfolio_list li .inner .entry:hover {
    background-color: var(--primary-color);
}

.portfolio_list li .inner .entry:hover h3,
.portfolio_list li .inner .entry:hover span {
    color: #fff;
}

Button Colors

Primary button styling:

.tokyo_tm_button a {
    background-color: var(--primary-color);
    color: #fff;
}

.tokyo_tm_button a:hover {
    background-color: var(--primary-color-hover);
}

Creating Custom Color Schemes

Method 1: CSS Variables

Create a new CSS file for your custom color scheme:

File: assets/css/custom-colors.css

:root {
    /* Custom Color Scheme */
    --primary-color: #e91e63;
    --primary-color-hover: #c2185b;
    
    --text-color: #666;
    --heading-color: #222;
    
    --bg-color: #fafafa;
    --bg-secondary: #f0f0f0;
    
    --border-color: #ddd;
}

Then include it in your layout:

<link rel="stylesheet" href="/assets/css/custom-colors.css">

Method 2: Predefined Themes

Create multiple theme options:

Light Theme (default):

:root {
    --primary-color: #f75023;
    --bg-color: #fff;
    --text-color: #767676;
}

Dark Theme:

.dark-mode {
    --primary-color: #f75023;
    --bg-color: #1a1a1a;
    --text-color: #a0a0a0;
}

Blue Theme:

.blue-theme {
    --primary-color: #007bff;
    --primary-color-hover: #0056b3;
}

Apply theme classes to the body:

<body class="blue-theme">

Gradient Customization

The theme may use gradients for certain elements. To customize:

/* Gradient Background */
.gradient-bg {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-hover) 100%);
}

/* Gradient Text */
.gradient-text {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-hover) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

Social Media Colors

Customize social media brand colors:

:root {
    --facebook-color: #3b5998;
    --twitter-color: #1da1f2;
    --instagram-color: #e1306c;
    --dribbble-color: #ea4c89;
    --tiktok-color: #000000;
    --linkedin-color: #0077b5;
    --youtube-color: #ff0000;
}

Apply to social icons:

.social a[href*="facebook"] { color: var(--facebook-color); }
.social a[href*="twitter"] { color: var(--twitter-color); }
.social a[href*="instagram"] { color: var(--instagram-color); }

Progress Bar Colors

Customize skill progress bars:

.tokyo_progress .progress_inner .bar_in {
    background-color: var(--primary-color);
}

/* Different colors for different skill types */
.tokyo_progress .progress_inner[data-value="95"] .bar_in {
    background-color: #28a745;
}

.tokyo_progress .progress_inner[data-value="85"] .bar_in {
    background-color: #ffc107;
}

Responsive Color Adjustments

Adjust colors for different screen sizes:

/* Mobile */
@media (max-width: 768px) {
    :root {
        --text-color: #555;
        --bg-color: #fff;
    }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    :root {
        --text-color: #666;
        --bg-color: #fafafa;
    }
}

/* Desktop */
@media (min-width: 1025px) {
    :root {
        --text-color: #767676;
        --bg-color: #fff;
    }
}

Color Accessibility

Ensure your color choices meet WCAG accessibility standards:

Contrast Ratio

  • Normal text: Minimum 4.5:1 contrast ratio
  • Large text: Minimum 3:1 contrast ratio
  • UI components: Minimum 3:1 contrast ratio

Testing Tools

  • WebAIM Contrast Checker
  • Color Contrast Analyzer

Accessible Color Combinations

/* High contrast example */
:root {
    --primary-color: #0056b3;  /* Dark blue on white */
    --text-color: #333;        /* Dark gray on white */
    --heading-color: #000;      /* Black on white */
}

Best Practices

  1. Use CSS variables for easy theme-wide color changes
  2. Maintain consistency across all color schemes
  3. Test on multiple devices and screen sizes
  4. Consider accessibility when choosing colors
  5. Document your color palette for future reference
  6. Use color tools like Adobe Color or Coolors for inspiration
  7. Test dark mode thoroughly
  8. Keep backup of original colors before making changes

Common Color Customization Tasks

Change All Orange to Blue

:root {
    --primary-color: #007bff;
    --primary-color-hover: #0056b3;
}

Make Text Darker

:root {
    --text-color: #333;
}

Lighten Background

:root {
    --bg-color: #fafafa;
    --bg-secondary: #f0f0f0;
}

Add Custom Accent Color

:root {
    --accent-color: #e91e63;
    --accent-color-hover: #c2185b;
}

/* Use accent color */
.custom-element {
    color: var(--accent-color);
}

Troubleshooting

Colors not updating

Solution:

  • Clear browser cache
  • Check CSS file is properly linked
  • Verify CSS syntax is correct
  • Ensure no !important rules overriding your changes

Dark mode not working

Solution:

  • Verify dark mode CSS is loaded
  • Check JavaScript toggle functionality
  • Ensure dark-mode class is applied to body
  • Test in different browsers

Colors look different on different devices

Solution:

  • Use consistent color formats (hex, rgb, or hsl)
  • Test on multiple devices
  • Consider device color profiles
  • Use web-safe colors when possible

Example Complete Color Scheme

Here’s a complete custom color scheme example:

:root {
    /* Primary Colors - Purple Theme */
    --primary-color: #9c27b0;
    --primary-color-hover: #7b1fa2;
    
    /* Text Colors */
    --text-color: #616161;
    --heading-color: #212121;
    
    /* Background Colors */
    --bg-color: #fafafa;
    --bg-secondary: #f5f5f5;
    
    /* Border Colors */
    --border-color: #e0e0e0;
    
    /* Social Media Colors */
    --facebook-color: #3b5998;
    --twitter-color: #1da1f2;
    --instagram-color: #e1306c;
    --dribbble-color: #ea4c89;
    --tiktok-color: #000000;
    
    /* Custom Accent */
    --accent-color: #ff5722;
    --accent-color-hover: #e64a19;
}

.dark-mode {
    --primary-color: #9c27b0;
    --primary-color-hover: #7b1fa2;
    
    --text-color: #b0b0b0;
    --heading-color: #ffffff;
    
    --bg-color: #121212;
    --bg-secondary: #1e1e1e;
    
    --border-color: #333;
}

Customizing the Tokyo theme’s colors is straightforward with CSS variables. Experiment with different combinations to create a unique look that matches your brand identity.