Pydata sphinx theme [DARKMODE]

style.css

/*
A user made theme modification for pydata's sphinx theme.
This modification turns your original theme to dark mode so your eyes don't burn out
If you want to see were this theme is being used check out:
`https://docs.mechakaren.xyz/` For the demo / live preview
`https://github.com/Seniatical/Mecha-Karen/Documentation` For the source code!

First create this file, preferably in `_static/css/custom.css` in the source directory
Then head over to `conf.py` and add
```
html_static_path = ['_static']

html_css_files = [
    'css/style.css',
]
```

Save your files and then run `make html` in terminal and your good to go!

Make sure to check out the amazing people who actually created this theme!
Documentation - `https://pydata-sphinx-theme.readthedocs.io/en/latest/`
Org - `https://github.com/pydata`
Themes Repo - `https://github.com/pydata/pydata_sphinx_theme`

Theme addition / customisation created by Seniatical.
*/

/* Recolours all of the text + some blocks and elements */
:root {
    /* Texts for paragraphs etc. */
    --pst-color-primary: 250, 250, 250;
    --pst-color-success: 40, 167, 69;
    --pst-color-info: 0, 123, 255;
    --pst-color-warning: 255, 193, 7;
    --pst-color-danger: 220, 53, 69;
    --pst-color-text-base: 174, 174, 174;
  
    /* Headers and paragraphs */
    --pst-color-h1: var(--pst-color-primary);
    --pst-color-h2: var(--pst-color-primary);
    --pst-color-h3: var(--pst-color-text-base);
    --pst-color-h4: var(--pst-color-text-base);
    --pst-color-h5: var(--pst-color-text-base);
    --pst-color-h6: var(--pst-color-text-base);
    --pst-color-paragraph: var(--pst-color-text-base);

    /* Links and block / block texts */
    --pst-color-link: 24, 131, 174;
    --pst-color-link-hover: 0, 91, 129;

    --pst-color-headerlink: 198, 15, 15;
    --pst-color-headerlink-hover: 255, 255, 255;

    --pst-color-preformatted-text: 250, 250, 250;
    --pst-color-preformatted-background: 32, 35, 40;
    --pst-color-inline-code: 232, 62, 140;
  
    --pst-color-active-navigation: 24, 131, 174;

    --pst-color-navbar-link: var(--pst-color-link);
    --pst-color-navbar-link-hover: var(--pst-color-active-navigation);
    --pst-color-navbar-link-active: var(--pst-color-active-navigation);

    --pst-color-sidebar-link: 77, 77, 77;
    --pst-color-sidebar-link-hover: var(--pst-color-active-navigation);
    --pst-color-sidebar-link-active: var(--pst-color-active-navigation);
    --pst-color-sidebar-expander-background-hover: 250, 250, 250;
    --pst-color-sidebar-caption: 250, 250, 250;

    --pst-color-toc-link: 250, 250, 250;
    --pst-color-toc-link-hover: var(--pst-color-active-navigation);
    --pst-color-toc-link-active: var(--pst-color-active-navigation);
}


/* Styles the footer and the background of the theme */
body {
    background-color: rgb(21, 23, 26);
}

.navbar-light {
    background-color: rgb(32, 35, 40) !important;
}

.navbar-brand {
    color: rgb(250, 250, 250) !important;
}


/* Minor typographical changes */
strong {
    color: rgb(250, 250, 250) !important;
}


/* All forms in the documentation will have the same colour as the footer/navbar */
.form-control {
    background-color: rgb(32, 35, 40);
}

.form-control:enabled {
    background-color: rgb(32, 35, 40);
    border-color: rgb(100, 100, 100) !important;
}


/* Turns the navigation buttons for forward/backwards to white */
.left-prev {
    color: rgb(250, 250, 250) !important;
    border-color: rgb(250, 250, 250) !important;
}

.right-next {
    color: rgb(250, 250, 250) !important;
    border-color: rgb(250, 250, 250) !important;
}


/* Changes the sidebar blocks backgrounds to match the theme */
.sidebar {
    background-color: rgb(32, 35, 40) !important;
}


/* Changes the permlink style from red and red bg to white and transparent */
.headerlink {
    color: rgb(250, 250, 250) !important;
    background-color: transparent !important;
}


/* Restyle admontion blocks */
.admonition {
    background-color: rgb(32, 35, 40) !important;
}

.admonition-title {
    color: rgb(250, 250, 250);
}

div.deprecated p {
    color: rgb(255, 107, 107) !important;
}


/* Code block changes */
.n {
    color: rgb(250, 250, 250) !important;
}

.p {
    color: rgb(250, 250, 250) !important;
}

.s2 {
    color: rgb(170, 218, 0) !important;
}

.o {
    color: #eb7616 !important;
}

.mi {
    color: rgb(104, 121, 219) !important;
}

pre {
    margin: 1.5em 0;
    padding: 10px;
    background-color: rgba(var(--pst-color-preformatted-background), 1);
    color: rgba(var(--pst-color-preformatted-text),1);
    border: 1px solid rgb(49, 53, 59);
    box-shadow: none !important;
}

/* Icon and other styling for small details */
i.fa-github:before {
    color: rgb(250, 250, 250);
}

i.fa-discord:before {
    color: rgb(250, 250, 250);
}

.editthispage a {
    color: rgb(24, 131, 174);
}

.editthispage a:hover {
    color: rgb(0, 91, 129);
}