Customizing Colors with Mythos Theme

Mythos Theme for Micro.blog offers extensive color customization through CSS custom properties (variables). This guide will show you how to modify colors using Micro.blog’s Custom CSS feature, ensuring your blog reflects your personal style while maintaining the theme’s clean, readable design.

Where to Add Custom CSS

To customize your Mythos theme colors:

  1. Go to Design in your Micro.blog dashboard
  2. Select or Create a Custom Theme (if one isn’t already selected)
  3. Click Open Theme: (Your Theme Name)
  4. Click Custom CSS in the top left

⚠️ Never modify the main theme files directly. Always use Custom CSS to preserve your customizations when the theme updates.

Available Color Variables

The Mythos theme uses CSS custom properties for consistent color management. Here are all available color variables with their default values:

Light Mode Colors

:root {
      /* Text Colors */
      --color-text: #000000;           /* Primary text (pure black) */
      --color-text-light: #333333;     /* Secondary text (dark gray) */
      --color-text-muted: #666666;     /* Muted text (medium gray) */

      /* Background Colors */
      --color-background: #ffffff;      /* Main background (white) */
      --color-background-alt: #f8f9fa;  /* Alternate background (light gray) */

      /* Border Colors */
      --color-border: #e1e5e9;         /* Standard borders */
      --color-border-light: #f1f3f4;   /* Light borders */

      /* Link Colors */
      --color-link: #555555;           /* Link color */
      --color-link-hover: #000000;     /* Link hover color */

      /* Accent Color */
      --color-accent: #666666;         /* Focus outlines, highlights */
}

Dark Mode Colors

@media (prefers-color-scheme: dark) {
    :root {
        /* Text Colors */
        --color-text: #e5e5e5;           /* Primary text (light gray) */
        --color-text-light: #cccccc;     /* Secondary text */
        --color-text-muted: #999999;     /* Muted text */

        /* Background Colors */
        --color-background: #1a1a1a;     /* Main background (dark) */
        --color-background-alt: #2a2a2a; /* Alternate background */

        /* Border Colors */
        --color-border: #404040;         /* Standard borders */
        --color-border-light: #333333;   /* Light borders */

        /* Link Colors */
        --color-link: #aaaaaa;           /* Link color */
        --color-link-hover: #e5e5e5;     /* Link hover color */

        /* Accent Color */
        --color-accent: #888888;         /* Focus outlines, highlights */
    }
}

How to Customize Colors

Method 1: Override Specific Variables

To change specific colors, add CSS custom property overrides to your Custom CSS:

:root {
    /* Make links blue instead of gray */
    --color-link: #007acc;
    --color-link-hover: #0056b3;

    /* Use a slightly warmer background */
    --color-background: #fefefe;
    --color-background-alt: #f8f8f8;
}

/* Override for dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --color-link: #4da6ff;
        --color-link-hover: #66b3ff;
        --color-background: #1e1e1e;
        --color-background-alt: #2e2e2e;
    }
}

Method 2: Complete Color Scheme Override

For a completely custom color palette, override all variables:

:root {
    /* Custom color scheme */
    --color-text: #2d3748;
    --color-text-light: #4a5568;
    --color-text-muted: #718096;
    --color-background: #ffffff;
    --color-background-alt: #f7fafc;
    --color-border: #e2e8f0;
    --color-border-light: #edf2f7;
    --color-link: #3182ce;
    --color-link-hover: #2c5282;
    --color-accent: #4299e1;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-text: #f7fafc;
        --color-text-light: #e2e8f0;
        --color-text-muted: #a0aec0;
        --color-background: #1a202c;
        --color-background-alt: #2d3748;
        --color-border: #4a5568;
        --color-border-light: #2d3748;
        --color-link: #63b3ed;
        --color-link-hover: #90cdf4;
        --color-accent: #4299e1;
    }
}

Here’s a complete example that transforms Mythos into a warm, earth-tone theme:

:root {
    /* Warm earth tone palette - Light Mode */
    --color-text: #3c2415;           /* Dark brown */
    --color-text-light: #5d4037;     /* Medium brown */
    --color-text-muted: #8d6e63;     /* Light brown */
    --color-background: #fefbf3;     /* Warm white */
    --color-background-alt: #f5f1e8; /* Warm gray */
    --color-border: #d7ccc8;         /* Light brown border */
    --color-border-light: #efebe9;   /* Very light brown */
    --color-link: #6d4c41;          /* Brown link */
    --color-link-hover: #3c2415;     /* Dark brown hover */
    --color-accent: #8d6e63;        /* Brown accent */
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Warm earth tone palette - Dark Mode */
        --color-text: #f5f1e8;          /* Warm light */
        --color-text-light: #d7ccc8;    /* Warm gray */
        --color-text-muted: #a1887f;    /* Muted brown */
        --color-background: #2e1a0f;    /* Dark brown */
        --color-background-alt: #3c2415; /* Medium brown */
        --color-border: #5d4037;        /* Brown border */
        --color-border-light: #4a2c20;  /* Dark border */
        --color-link: #bcaaa4;          /* Light brown link */
        --color-link-hover: #d7ccc8;    /* Lighter brown hover */
        --color-accent: #8d6e63;        /* Brown accent */
    }
}

Dark Mode Considerations

Mythos Theme automatically detects your device’s dark mode preference using @media (prefers-color-scheme: dark). When customizing colors:

  1. Always provide both light and dark variations of your custom colors
  2. Ensure sufficient contrast between text and backgrounds in both modes
  3. Test your colors in both light and dark modes before publishing
  4. Consider accessibility - maintain readability for users with visual impairments

Pro Tips

  1. Use straight quotes, not curly quotes in your CSS code - curly quotes will break your styling
  2. Start small - change one or two colors at a time to see their effect
  3. Use browser developer tools to preview colors before adding them to Custom CSS
  4. Keep accessibility in mind - use tools like https://webaim.org/resources/contrastchecker/ to ensure good contrast ratios

Testing Your Changes

After adding custom CSS:

  1. Save your changes in the Micro.blog dashboard
  2. Open your blog in a new tab or window
  3. Test both light and dark modes (toggle your device’s appearance settings)
  4. Check different page types (home, individual posts, archives)
  5. Verify colors work well on different devices

Need Help?

If you encounter issues with color customization:

  • Validate your CSS syntax using an online CSS validator
  • Ask for help

Mythos theme’s flexible color system makes it easy to create a unique look for your blog while maintaining its fast, readable foundation. Experiment with different color combinations to find the perfect palette for your content!

Longform (5)