Bruno Miguel

Writefreely only has a light theme. It's a good one, I admit. However, I prefer having a dark theme, and since I love the Tokyonight color scheme, I decided to implement it in this blog.

If you want to use the same theme I'm using here right now, or you want to use it as a base to build your own, you can find the CSS below or visit Pastebin and copy it from there.

You'll notice I'm using two typefaces from Google Fonts. If you don't want to use them or you don't like Google Fonts, remove the first two lines.

Update: I switched to using CSS variables

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,200;0,300;0,400;0,700;1,200;1,300;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/* The variables names are taken from:
- https://raw.githubusercontent.com/folke/tokyonight.nvim/main/lua/tokyonight/colors.lua */
:root {
    --fg: #c8d3f5;
    --fg-dark: #828bb8;
    --fg-gutter: #3b4261;
    --bg: #222436;
    --bg-dark: #1e2030;
    --bg-highlight: #2f334d;
    --dark3: #545c7e;
    --terminal-black: #444a73;
    --yellow: #ffc777;
    --orange: #ff966c;
    --magenta2: #ff007c;
    --blue: #82aaff;
    --font-text: 'Hanken Grotesk', sans-serif;
    --font-title: 'Space Grotesk', sans-serif;
}

.video {
    width: 40rem;
    max-height: 600px;
}

nav#manage ul a {
    color: var(--fg);
}

nav#manage ul li:hover {
    background: var(--dark3);
}

nav#manage ul ul {
    background: var(--dark3);
    border: 1px solid var(--fg-gutter);
}

nav#manage ul a:hover, nav#manage ul a:active, nav#manage ul a:focus {
    color: var(--yellow);
}

body {
    background-color: var(--bg);
    color: var(--fg);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-title);
}

body, .font.norm, body#collection article.norm, body#post article.norm, body#subpage article.norm, input#title.norm, pre.norm, span.norm, textarea.norm, header h1 {
    font-family: var(--font-text);
}

header p.description {
    color: var(--dark3);
}

#official-writing h2, #official-writing h3, #official-writing h4, #wrapper h2, #wrapper h3, #wrapper h4, .post-title a:visited, .post-title a {
    color: var(--magenta2);
}

time, body#post article time.dt-published, body#subpage article time.dt-published {
    opacity: 0.62;
    color: var(--fg);
}

body h1 a, body header h2 a {
    color: var(--fg-dark);
}

body h1 a:hover, body header h2 a:hover, body h1 a:active, body header h2 a:active, body h1 a:focus, body header h2 a:focus {
    color: var(--yellow);
}

article a {
    color: var(--yellow);
}

body#collection a.read-more, body#subpage a.read-more {
    color: var(--orange);
}

body#post header, body#subpage header {
    opacity: 1;
}

article.norm {
    font-size: 1.05em;
}

hr {
    background-color: var(--terminal-black);
}

body footer nav {
    color: var(--fg-dark);
}

body footer nav a:link, body footer nav a:visited, body footer ul a:link, body footer ul a:visited, body footer a.home:link, body footer a.home:visited {
    color: var(--blue);
}

.post-title a.action {
    color: var(--fg) !important;
}

body#collection pre, body#post pre, body#subpage pre {
    background: var(--bg-dark);
    border: 1px solid var(--bg-highlight);
    padding: .675em 1em;
    border-radius: 0.5em;
}

/* Uncomment the rule below and replace the font names to use a custom
monospaced font for your code sharing */
/*code, textarea#embed {
    font-family: 'custom monospace font', monospace;
}*/

#Writefreely #TokyoNight #DarkTheme #Blog