Dark Theme for BibleGateway by AlphaeusNg

/* ==UserStyle==
@name           BibleGateway Dark Theme
@namespace      github.com/openstyles/stylus
@version        1.0.4
@description    Dark Theme
@author         Turq6ise
==/UserStyle== */

@-moz-document domain("biblegateway.com") {
    /* Set background color to dark */
    body, .container, .navbar, .footer, .content, .top-wrapper{
        background-color: #3a3636 !important;
        color: #d7d7d7 !important;
    }
	/*Set borders to grey*/
	.sticky-resources {
		border: 1px solid rgb(84, 84, 84);
	}
	.content-box, .passage-col, .sidebar-box, .sidebar-menu {
		border: 1px solid #545454
	}

    /* Set text color to light */
    span, a, li, td, th {
        color: #b5aeae !important;
	}
	
	h1, h2, h3, h4, h5, h6, p, div{
        color: #b1a7a7c9 !important;
	}
	
	li {
		background-color: #4c4646;
	}

    /* Adjust links */
    a {
        color: #ac81e2 !important; /* Light purple color for links */
    }

    /* Override specific elements */
    .passage-display, .passage-content, .verse, .bible-text {
        background-color: #322e2e !important;
        color: #c8c8c8 !important;
    }

    /* Make sure input fields and buttons are also dark */
    input, textarea, select, button {
        background-color: #333 !important;
        color: #a9a3a3 !important;
        border: 1px solid #444 !important;
    }

    /* Adjust the search bar */
    .search-bar, .search-button, .search-dropdown-display {
        background-color: #333 !important;
        color: #dfdfdf !important;
		border-block-color: #333;
    }

    /* Modify table headers and rows */
    table th, table td {
        background-color: #3e3939 !important;
        color: #b5b5b5 !important;
    }

    /* Ensure code snippets are dark */
    code, pre {
        background-color: #2e2e2e !important;
        color: #c6c6c6 !important;
    }

    /* Handle specific classes and IDs for dark mode */
    #navbar, .footer-links, .advertisement {
        background-color: #333030 !important;
        color: #e0e0e0 !important;
    }
	div[class="testaments"] {
		background-color: #4c4646 !important;
	}
	div[class="chapter-col"] {
		background-color: #4c4646 !important;
	}
	div[style="border-bottom: 1px solid rgb(221, 220, 218); display: flex; margin-bottom: 1px;"] {
		background-color: #3b3333 !important;
	}

    /* Adjust images and icons */
    img, svg {
        filter: brightness(0.8);
    }

    /* Darken the left side bar (red) */
    .left-side-bar, .left-sidebar-container, .logo-area, .brand-area, .site-name {
        background-color: #2a2a2a !important; /* Dark grey */
        color: #aeaeae !important;
    }
	/* Specific media query for nav element */
    @media screen and (min-width: 1025px) {
        nav {
            background-color: #531709 !important;
        }
    }

    .nav, .an-mobile-menu-closed, .logo-menu-user{
        background-color: #531709 !important;
	}

    /* Darken the top bar (yellow) */
    .top-bar, .header-banner, .alert-bar, .notification-bar, .site-message {
        background-color: #4c4646 !important; /* Dark grey */
        color: #e0e0e0 !important;
    }

    /* Darken the right sidebar */
    .right-sidebar, .right-sidebar-container, .resource-box, .suggested-resources {
        background-color: #312b2b !important;
        color: #9b9393 !important;
    }
	.go3077380512 {
		background: #312b23;
	}

    /* Darken sidebar box */
    .sidebar-box, .sidebar-menu {
        background: #4f4646 !important; /* Dark grey */
    }

    /* Darken specific div inside sidebar box */
    .sidebar-box > div[style*="background: rgb(255, 255, 255);"] {
        background: #3c3838 !important; /* Dark grey */
    }
	
	/* Darken bottom bar */
	.bga-copyright-multi, .other-resources, .footer-wrapper {
		background-color: #322e2e;
	}
	footer .footer-wrapper .footer-menu.signup {
		background-color: #50513d;
	}
    /* Darken the main content area */
    .main-content, .passage-box, .passage-col {
        background-color: #322e2e !important;
        color: #e0e0e0 !important;
    }
	/* Log In Page*/
	.modal {
        background: rgba(23, 19, 19, .94) !important;
    }

    .go1165799442.show .modal {
        opacity: 1;
        transform: translate(0, 0%);
    }
	/* New Rule for the specific <div> element */
    div[style*="font-synthesis: none;"][style*="width: 100%;"][style*="height: 100%;"] {
        background: #4c4c4cc4 !important; /* Dark grey instead of black */
    }
	
	
	
}